|
|
@@ -0,0 +1,56 @@
|
|
|
+import {
|
|
|
+ reactive
|
|
|
+} from "vue"
|
|
|
+import {hasUserIdentity} from "@/utils/common.js"
|
|
|
+
|
|
|
+export function useSwiper(Da, noticeYK) {
|
|
|
+
|
|
|
+ const useCode = hasUserIdentity()
|
|
|
+
|
|
|
+ const swiperData = reactive({
|
|
|
+ startX: 0, // 触摸起点X坐标
|
|
|
+ isAllowed: false // 是否允许切
|
|
|
+ })
|
|
|
+
|
|
|
+ // 1. 触摸开始：记录起点
|
|
|
+ function handleTouchStart(e) {
|
|
|
+ swiperData.startX = e.touches[0].pageX;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 2. 触摸结束：校验距离与业务条件
|
|
|
+ function handleTouchEnd(e) {
|
|
|
+ const endX = e.changedTouches[0].pageX;
|
|
|
+ const deltaX = endX - swiperData.startX;
|
|
|
+ const absDeltaX = Math.abs(deltaX);
|
|
|
+
|
|
|
+ // 校验条件：滑动距离 > 10px 且业务条件通过
|
|
|
+ if (absDeltaX > 10 && checkBusinessCondition()) {
|
|
|
+ swiperData.isAllowed = true;
|
|
|
+ // 根据方向更新索引
|
|
|
+ if (deltaX > 0 && Da.currentIndex > 0) {
|
|
|
+ Da.currentIndex--; // 向右滑，上一页
|
|
|
+ } else if (deltaX < 0 && Da.currentIndex < swiperData.list.length - 1) {
|
|
|
+ Da.currentIndex++; // 向左滑，下一页
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ swiperData.isAllowed = false;
|
|
|
+ noticeYK(useCode)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 4. 业务条件校验（示例）
|
|
|
+ function checkBusinessCondition() {
|
|
|
+ if (useCode != 'VIP') {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ return true
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ return {
|
|
|
+ swiperData,
|
|
|
+ handleTouchStart,
|
|
|
+ handleTouchEnd
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
wangxy