以下内容转自亭瞳^（CSDN），原文地址：https://blog.csdn.net/m0_72951245/article/details/132076127
根据我自己的业务需求，我只采用了@touchstart=”touchStart” @touchend=”touchEnd”及其methods，页面上通过v-if来判断显示对应内容。
一、HTML部分
代码如下（示例）：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<template> <view class="slideBox" @touchstart="touchStart" @touchend="touchEnd"> <!-- 这里放需要滑动的区域 --> <view class="slideBox_slidingRegion" :style="{left: vwidth + '%'}"> <view class="slideBox_slidingRegion_item"> <!-- 模块一 --> <view class="slideBox_slidingRegion_item_child" v-for="item in demandLists">{{item.name}}</view> </view> <view class="slideBox_slidingRegion_item"> <!-- 模块二 --> <view class="slideBox_slidingRegion_item_child" style="background-color: #28AC74;" v-for="item in supplierLists">{{item.name}}</view> </view> </view> </view> </template> |
二、Script部分
代码如下（示例）：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<script> export default { data() { return { startX: 0, //滑动开始x轴位置 vwidth: 0, //滑动的x轴距离 demandLists: [{ //求购商品列表 name: '强盛集团 1', }, { name: '强盛集团 2', }, { name: '强盛集团 3', }, { name: '强盛集团 4', }, { name: '强盛集团 5', } ], supplierLists: [{ //求购商品列表 name: '永恒之主—白小纯', }, { name: '永恒之主—白小纯', }, { name: '永恒之主—白小纯', }, { name: '永恒之主—白小纯', }, { name: '永恒之主—白小纯', } ], } }, methods: { touchStart(e) { if (e.touches.length == 1) { this.startX = e.touches[0].clientX; } }, touchEnd(e) { if (e.changedTouches.length == 1) { var endX = e.changedTouches[0].clientX; let diff = endX - this.startX; const that = this if (Math.abs(diff) > 100) { console.log(diff) if (diff > 0) { //右滑 这里可以放需要进行的业务逻辑 // console.log('元素信息右滑：', that.vwidth) that.vwidth += 100 if (that.vwidth == 100) { that.vwidth = -100 } } else { //左滑 这里可以放需要进行的业务逻辑 const that = this console.log('元素信息左滑：', that.vwidth) that.vwidth += -100 if (that.vwidth == -200) { that.vwidth = 0 } } } } } } } </script> |
三、Style部分
代码如下（示例）：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<style lang="scss"> .slideBox { display: flex; width: 100%; height: 1000rpx; overflow: hidden; position: relative; &_slidingRegion { display: flex; flex-direction: row; width: 200%; height: 100%; position: absolute; left: 0; top: 0; &_item { width: 100%; height: 100%; display: flex; flex-direction: column; &_child { display: flex; flex-direction: row; align-items: center; justify-content: center; width: 100%; height: 180rpx; margin: 10rpx 0; color: #fff; font-size: 34rpx; background-color: #fb723b; } } } } </style> |
原创文章，作者：蓝洛水深，如若转载，请注明出处：https://blog.lanluo.cn/12465
微信扫一扫 
支付宝扫一扫 