useSwiper.js 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. import {
  2. reactive
  3. } from "vue"
  4. import {getUserIdentity} from "@/utils/common.js"
  5. export function useSwiper(Da, callBack) {
  6. const userCode = getUserIdentity()
  7. const swiperData = reactive({
  8. startX: 0, // 触摸起点X坐标
  9. isAllowed: true // 是否允许切
  10. })
  11. if (userCode!='VIP') {
  12. swiperData.isAllowed = false;
  13. }
  14. // 1. 触摸开始:记录起点
  15. function handleTouchStart(e) {
  16. swiperData.startX = e.touches[0].pageX;
  17. }
  18. // 2. 触摸结束:校验距离与业务条件
  19. function handleTouchEnd(e) {
  20. const endX = e.changedTouches[0].pageX;
  21. const deltaX = endX - swiperData.startX;
  22. const absDeltaX = Math.abs(deltaX);
  23. // 校验条件:滑动距离 > 10px 且业务条件通过
  24. if (absDeltaX > 10 && checkBusinessCondition()) {
  25. swiperData.isAllowed = true;
  26. // 根据方向更新索引
  27. // if (deltaX > 0 && Da.activeIndex > 0) {
  28. // Da.activeIndex--; // 向右滑,上一页
  29. // } else if (deltaX < 0 && Da.activeIndex < Da.jieNumberList.length - 1) {
  30. // Da.activeIndex++; // 向左滑,下一页
  31. // }
  32. } else {
  33. swiperData.isAllowed = false;
  34. }
  35. callBack && callBack(userCode)
  36. }
  37. // 4. 业务条件校验(示例)
  38. function checkBusinessCondition() {
  39. if (userCode != 'VIP') {
  40. return false
  41. }
  42. return true
  43. }
  44. return {
  45. swiperData,
  46. userCode,
  47. handleTouchStart,
  48. handleTouchEnd
  49. }
  50. }