微信小程序实现左滑删除效果(原生/uni-app)

说啥好啊 發表於 2019-8-29 15:50:00

微信小程序实现左滑删除效果(原生/uni-app)

<h3>实现效果</h3>
<ol>
<li>列表中侧滑删除</li>
<li>删除不同时存在</li>
<li>scrollview上下滑动与侧滑删除不影响</li>
</ol>
<img src="https://img2018.cnblogs.com/blog/1307134/201908/1307134-20190829154520146-509629429.png" alt="" width="203" height="318">
 
 
<h3>uni-app实现</h3>
html部分
<div class="cnblogs_code">
<pre><template>
<scroll-view :scroll-y="isScroll" :style="{ height: windowHeight + 'px' }">
 <block :key="index" v-for="(item, index) in dataList">
 <view :data-index="index" class="order-item" @touchstart="drawStart" @touchmove="drawMove" @touchend="drawEnd" :style="{ right: item.right + 'rpx' }">
 <view class="content">{{ item.content }}</view>
 <view class="remove" @click="delItem">删除</view>
 </view>
 </block>
</scroll-view>
</template></pre>
</div>
 
js部分
<div class="cnblogs_code">
<pre><script>
export default {
data() {
 return {
 delBtnWidth: 160,
 dataList: [
 { content: '1', right: 0 },
 { content: '2', right: 0 },
 { content: '3', right: 0 },
 { content: '4', right: 0 },
 { content: '5', right: 0 },
 { content: '6', right: 0 },
 { content: '7', right: 0 },
 { content: '8', right: 0 },
 { content: '9', right: 0 },
 { content: '10', right: 0 }
 ],
 isScroll: true,
 windowHeight: 0
 };
},
onLoad: function(options) {
 var that = this;
 wx.getSystemInfo({
 success: function(res) {
 that.windowHeight = res.windowHeight;
 }
 });
},
methods: {
 drawStart: function(e) {
 // console.log("drawStart");
 var touch = e.touches;
 for (var index in this.dataList) {
 this.dataList.right = 0;
 }
 this.startX = touch.clientX;
 },
 drawMove: function(e) {
 var touch = e.touches;
 var item = this.dataList;
 var disX = this.startX - touch.clientX;

 if (disX >= 20) {
 if (disX > this.delBtnWidth) {
 disX = this.delBtnWidth;
 }
 this.isScroll = false;
 this.dataList.right = disX;
 } else {
 this.isScroll = true;
 this.dataList.right = 0;
 }
 },
 drawEnd: function(e) {
 var item = this.dataList;
 if (item.right >= this.delBtnWidth / 2) {
 this.isScroll = true;
 this.dataList.right = this.delBtnWidth;
 } else {
 this.isScroll = true;
 this.dataList.right = 0;
 }
 },
 delItem() {
 console.log('删除');
 }
}
};
</script></pre>
</div>
 
css样式
<div class="cnblogs_code">
<pre><style scoped>
.order-item {
height: 240rpx;
width: 100%;
display: flex;
position: relative;
}

.remove {
width: 160rpx;
height: 100%;
background-color: red;
color: white;
position: absolute;
top: 0;
right: -160rpx;
display: flex;
justify-content: center;
align-items: center;
}
</style></pre>
</div>
 
 
<h3>小程序原生开发</h3>
html部分
<div class="cnblogs_code">
<pre><scroll-view scroll-y="{{isScroll}}" style='height:{{windowHeight}}px'>
<block wx:key="item" wx:for="{{data}}">
<view data-index='{{index}}' class="order-item" bindtouchstart="drawStart" bindtouchmove="drawMove" bindtouchend="drawEnd" style="right:{{item.right}}rpx">
 <view class="content">{{item.content}}</view>
 <view class="remove" bindtap="delItem">删除 </view>
</view>
</block>
</scroll-view></pre>
</div>
 
js部分
<div class="cnblogs_code">
<pre>Page({
data: {
delBtnWidth:160,
data: [{ content: "1", right: 0 }, { content: "2", right: 0 }, { content: "3", right: 0 }, { content: "4", right: 0 }, { content: "5", right: 0 }, { content: "6", right: 0 }, { content: "7", right: 0 }, { content: "8", right: 0 }, { content: "9", right: 0 }, { content: "10",right: 0 }],
isScroll:true,
windowHeight:0,
},
onLoad: function (options) {
var that = this;
wx.getSystemInfo({
 success: function (res) {
 that.setData({
 windowHeight: res.windowHeight
 });
 }
});
},
drawStart: function (e) {
// console.log("drawStart");
var touch = e.touches

for(var index in this.data.data) {
 var item = this.data.data
 item.right = 0
}
this.setData({
 data: this.data.data,
 startX: touch.clientX,
})

},
drawMove: function (e) {
var touch = e.touches
var item = this.data.data
var disX = this.data.startX - touch.clientX

if (disX >= 20) {
 if (disX > this.data.delBtnWidth) {
 disX = this.data.delBtnWidth
 }
 item.right = disX
 this.setData({
 isScroll: false,
 data: this.data.data
 })
} else {
 item.right = 0
 this.setData({
 isScroll: true,
 data: this.data.data
 })
}
},
drawEnd: function (e) {
var item = this.data.data
if (item.right >= this.data.delBtnWidth/2) {
 item.right = this.data.delBtnWidth
 this.setData({
 isScroll: true,
 data: this.data.data,
 })
} else {
 item.right = 0
 this.setData({
 isScroll: true,
 data: this.data.data,
 })
}
},

delItem: function (e) {
 console.log(e)
}
})</pre>
</div>
 
css部分
<div class="cnblogs_code">
<pre>.order-item {
height: 240rpx;
width: 100%;
display: flex;
position: relative;
}
.remove {
width: 160rpx;
height: 100%;
background-color: red;
color: white;
position: absolute;
top: 0;
right: -160rpx;
display: flex;
justify-content: center;
align-items: center;
}</pre>
</div>
 
 
 参考链接：https://www.jianshu.com/p/f9cc446fd328
  
来源：https://www.cnblogs.com/cap-rq/p/11430103.html

頁: [1]

琼殿技术论坛's Archiver

微信小程序实现左滑删除效果(原生/uni-app)