108 lines
3.1 KiB
JavaScript
108 lines
3.1 KiB
JavaScript
|
"use strict";
|
||
|
|
const common_vendor = require("../../../common/vendor.js");
|
||
|
|
const _sfc_main = {
|
||
|
|
__name: "specialDrawer",
|
||
|
|
props: {
|
||
|
|
widNumber: {
|
||
|
|
type: Number,
|
||
|
|
default: 17
|
||
|
|
}
|
||
|
|
},
|
||
|
|
setup(__props, { expose: __expose }) {
|
||
|
|
const isVisible = common_vendor.ref(false);
|
||
|
|
const props = __props;
|
||
|
|
const screenWidth = common_vendor.ref(0);
|
||
|
|
common_vendor.onMounted(() => {
|
||
|
|
const sys = common_vendor.index.getSystemInfoSync();
|
||
|
|
screenWidth.value = sys.screenWidth;
|
||
|
|
});
|
||
|
|
const startX = common_vendor.ref(0);
|
||
|
|
const dragging = common_vendor.ref(false);
|
||
|
|
const currentOffset = common_vendor.ref(0);
|
||
|
|
const drawerStyle = common_vendor.computed(() => {
|
||
|
|
const widthPct = `${props.widNumber}%`;
|
||
|
|
if (dragging.value) {
|
||
|
|
const offset = currentOffset.value;
|
||
|
|
return {
|
||
|
|
width: widthPct,
|
||
|
|
transform: `translateX(${offset}px)`,
|
||
|
|
transition: "none"
|
||
|
|
};
|
||
|
|
} else {
|
||
|
|
return {
|
||
|
|
width: widthPct
|
||
|
|
};
|
||
|
|
}
|
||
|
|
});
|
||
|
|
function openDrawer() {
|
||
|
|
isVisible.value = true;
|
||
|
|
}
|
||
|
|
function closeDrawer() {
|
||
|
|
isVisible.value = false;
|
||
|
|
}
|
||
|
|
function whiteDrawer() {
|
||
|
|
isVisible.value = !isVisible.value;
|
||
|
|
rotate180();
|
||
|
|
}
|
||
|
|
__expose({
|
||
|
|
openDrawer,
|
||
|
|
closeDrawer
|
||
|
|
});
|
||
|
|
function onTouchStart(e) {
|
||
|
|
if (!isVisible.value)
|
||
|
|
return;
|
||
|
|
dragging.value = true;
|
||
|
|
currentOffset.value = 0;
|
||
|
|
startX.value = e.touches[0].pageX;
|
||
|
|
}
|
||
|
|
function onTouchMove(e) {
|
||
|
|
if (!dragging.value)
|
||
|
|
return;
|
||
|
|
const delta = e.touches[0].pageX - startX.value;
|
||
|
|
currentOffset.value = delta > 0 ? delta : 0;
|
||
|
|
}
|
||
|
|
function onTouchEnd() {
|
||
|
|
if (!dragging.value)
|
||
|
|
return;
|
||
|
|
dragging.value = false;
|
||
|
|
const halfPx = screenWidth.value * (props.widNumber / 100) / 2;
|
||
|
|
if (currentOffset.value > halfPx) {
|
||
|
|
closeDrawer();
|
||
|
|
rotate180();
|
||
|
|
}
|
||
|
|
currentOffset.value = 0;
|
||
|
|
}
|
||
|
|
const angle = common_vendor.ref(0);
|
||
|
|
common_vendor.computed(() => ({
|
||
|
|
transform: `rotate(${angle.value}deg)`,
|
||
|
|
transition: "transform 0.6s ease"
|
||
|
|
}));
|
||
|
|
function rotate180() {
|
||
|
|
angle.value += 180;
|
||
|
|
}
|
||
|
|
return (_ctx, _cache) => {
|
||
|
|
return {
|
||
|
|
a: isVisible.value ? `rotate(180deg)` : ``,
|
||
|
|
b: isVisible.value ? "/static/index/watch/arrow.png" : "/static/index/watch/arrow.png",
|
||
|
|
c: common_vendor.s(isVisible.value ? {
|
||
|
|
background: `linear-gradient(to bottom,#62E8FF,#0097FF)`
|
||
|
|
} : {
|
||
|
|
background: `linear-gradient(to bottom,#62E8FF,#0097FF)`
|
||
|
|
}),
|
||
|
|
d: common_vendor.o(whiteDrawer),
|
||
|
|
e: common_vendor.o(onTouchStart),
|
||
|
|
f: common_vendor.o(onTouchMove),
|
||
|
|
g: common_vendor.o(onTouchEnd),
|
||
|
|
h: common_vendor.o(onTouchEnd),
|
||
|
|
i: common_vendor.n({
|
||
|
|
"drawer-open": isVisible.value
|
||
|
|
}),
|
||
|
|
j: common_vendor.s(drawerStyle.value)
|
||
|
|
};
|
||
|
|
};
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-97afcb63"]]);
|
||
|
|
wx.createComponent(Component);
|
||
|
|
//# sourceMappingURL=../../../../.sourcemap/mp-weixin/pages/timeMatrix/drawer/specialDrawer.js.map
|