文章目录
整体思路
监听页面滑动事件,判断滑动方向从而改变移动距离。
一、HTML部分
代码如下(示例):
<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部分
代码如下(示例):
<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部分
代码如下(示例):
<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>
总结
没总结,只是简单的功能,谢谢大家观看!