实现效果
- 列表中侧滑删除
- 删除不同时存在
- scrollview上下滑动与侧滑删除不影响
uni-app实现
html部分
<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>
js部分
<script> export default { data() { return { delBtnWidth: 160,dataList: [ { content: ‘1‘,right: 0 },{ content: ‘2‘,{ content: ‘3‘,{ content: ‘4‘,{ content: ‘5‘,{ content: ‘6‘,{ content: ‘7‘,{ content: ‘8‘,{ content: ‘9‘,{ 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[0]; for (var index in this.dataList) { this.dataList[index].right = 0; } this.startX = touch.clientX; },drawMove: function(e) { var touch = e.touches[0]; var item = this.dataList[e.currentTarget.dataset.index]; var disX = this.startX - touch.clientX; if (disX >= 20) { if (disX > this.delBtnWidth) { disX = this.delBtnWidth; } this.isScroll = false; this.dataList[e.currentTarget.dataset.index].right = disX; } else { this.isScroll = true; this.dataList[e.currentTarget.dataset.index].right = 0; } },drawEnd: function(e) { var item = this.dataList[e.currentTarget.dataset.index]; if (item.right >= this.delBtnWidth / 2) { this.isScroll = true; this.dataList[e.currentTarget.dataset.index].right = this.delBtnWidth; } else { this.isScroll = true; this.dataList[e.currentTarget.dataset.index].right = 0; } },delItem() { console.log(‘删除‘); } } }; </script>
css样式
<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>
小程序原生开发
html部分
<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>
js部分
Page({ data: { delBtnWidth:160,data: [{ content: "1",right: 0 },{ content: "2",{ content: "3",{ content: "4",{ content: "5",{ content: "6",{ content: "7",{ content: "8",{ content: "9",{ 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[0] for(var index in this.data.data) { var item = this.data.data[index] item.right = 0 } this.setData({ data: this.data.data,startX: touch.clientX,}) },drawMove: function (e) { var touch = e.touches[0] var item = this.data.data[e.currentTarget.dataset.index] 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[e.currentTarget.dataset.index] 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,}) } },delItem: function (e) { console.log(e) } })
css部分
.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; }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。