<view wx:for-items='{{offerList}}'> <!--这里绑定了刚才说的3个函数分别为 touchS，touchM touchE--> <!--这里注意这个 ，这是我们一会再js中 将要设置的样式 --> <view> <view bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" data-index="{{index}}"> <navigator bindtap='navigatorTo' data-index="{{item.id}}"> <view> <view> <view> {{item.title}}党建项目报价表 </view> <image src=''></image> </view> <view> <view> {{item.create_time}} </view> </view> </view> </navigator> </view> <!--这里是左滑按钮部分----start--> <view bindtap="delItem" hidden='{{!item.isMove}}'> <view data-offerid="{{item.id}}" data-index="{{item.id}}" catchtap="ref"> <image src=''></image> </view> <view data-offerid="{{item.id}}" data-index="{{item.id}}" catchtap="del"> <image src=''></image> </view> </view> <!--这里是左滑按钮部分----end--> </view> </view>
wxss：
.offer-item { height: 150rpx; width: 100vw; overflow-x: hidden; border-bottom: 1px solid #f0f0f0; } .offer-item>view { position: absolute; /* width: calc(100% + 200rpx); */ height: 150rpx; } .offer-item .offer-item-top { height: 100%; } .offer-item .offer-item-top navigator { display: inline-block; width: 100vw; height: 100%; } .offer-item .content { padding: 35rpx 30rpx; position: relative; height: calc(100% - 70rpx); } .offer-item .title .fl { display: inline-block; width: 78%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 30rpx; color: #333; } .offer-item .title .fr { display: inline-block; width: 20rpx; height: 26rpx; margin-top: 5rpx; } .offer-item .note { position: absolute; left: 30rpx; bottom: 35rpx; width: calc(100vw - 60rpx); font-size: 24rpx; color: #999; } .offer-item .posit { width: 200rpx; height: 150rpx; line-height: 150rpx; text-align: center; display: none } .posit.isMove { display: inline-block; position: absolute; } .posit.isMove[hidden] { display: none } .offer-item .posit>view { display: inline-block; width: 100rpx; } .offer-item .posit>view:first-of-type { background-color: #FED847; } .offer-item .posit>view:last-of-type { background-color: #C71B1B; } .offer-item .posit image { display: inline-block; width: 36rpx; height: 36rpx; }
js：
let len = 0; // 初次加载长度 let hadLastPage = false; // 判断是否到最后一页 var initdata = function (that) { var list = that.data.offerList for (var i = 0; i < list.length; i++) { list[i].txtStyle = ""; list[i].isMove = false; } that.setData({ offerList: list }) } Page({ data: { offerList: [ ], delBtnWidth: 100, // 删除按钮宽度单位（rpx） }, // 手指刚放到屏幕触发 touchS: function (e) { console.log("touchS" + e); // initdata(this); // 判断是否只有一个触摸点 if (e.touches.length == 1) { this.setData({ // 记录触摸起始位置的X坐标 startX: e.touches[0].clientX }); }; return false; }, // 触摸时触发，手指在屏幕上每移动一次，触发一次 touchM: function (e) { var that = this; initdata(that); if (e.touches.length == 1) { // 记录触摸点位置的X坐标 var moveX = e.touches[0].clientX; // 计算手指起始点的X坐标与当前触摸点的X坐标的差值 var disX = that.data.startX - moveX; // delBtnWidth 为右侧按钮区域的宽度 var delBtnWidth = that.data.delBtnWidth; var txtStyle = ""; if (disX == 0 || disX < 0) { // 如果移动距离小于等于0，文本层位置不变 txtStyle = "left:0px"; } else if (disX > 0) { // 移动距离大于0，文本层left值等于手指移动距离 txtStyle = "left:-" + disX + "px"; if (disX >= delBtnWidth) { // 控制手指移动距离最大值为删除按钮的宽度 txtStyle = "left:-" + delBtnWidth + "px"; } } // 获取手指触摸的是哪一个item var index = e.currentTarget.dataset.index; var list = that.data.offerList; // 将拼接好的样式设置到当前item中 list[index].txtStyle = txtStyle; list[index].isMove = true; // 更新列表的状态 this.setData({ offerList: list }); } }, touchE: function (e) { console.log( e); var that = this if (e.changedTouches.length == 1) { // 手指移动结束后触摸点位置的X坐标 var endX = e.changedTouches[0].clientX; // 触摸开始与结束，手指移动的距离 var disX = that.data.startX - endX; var delBtnWidth = that.data.delBtnWidth; // 如果距离小于删除按钮的1/2，不显示删除按钮 var txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "px" : "left:0px"; // 获取手指触摸的是哪一项 var index = e.currentTarget.dataset.index; var list = that.data.offerList; list[index].txtStyle = txtStyle; // 更新列表的状态 that.setData({ offerList: list }); } }, /** * */ navigatorTo: function (event) { }, /** * 删除操作 */ del: function (e) { var that = this; var data = { id: e.currentTarget.dataset.index }; wx.showModal({ title: '', content: '确定选择删除么？', confirmColor: '#C71B1B', cancelColor: '#666666', success: function (res) { if (res.confirm) { utils.requestFun("接口url", data, 'POST', function (msg) { console.log(msg) wx.showToast({ title: '删除成功', icon: 'success', duration: 1500 }) var lists = that.data.offerList; var list1 = []; for (let i = 0; i < lists.length; i++) { if (lists[i].id != e.currentTarget.dataset.index) { list1.push(lists[i]) } } len--; that.setData({ offerList: list1 }) }) } else if (res.cancel) { } } }) }, /** * 修改操作 */ ref: function (e) { wx.navigateTo({ url: '修改页面路径?id=' + e.currentTarget.dataset.index, }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { page = 0; this.loadList(); }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { hadLastPage = false; len = 0; }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function (event) { console.log("上拉事件") this.loadList(); }, /** * 数据请求封装 */ loadList: function (event) { if (hadLastPage != false) { wx.showToast({ title: '到底啦', }); return; } var that = this; // 显示加载图标 wx.showLoading({ title: '玩命加载中', }) let data = { length: len, openId: 'openid' }; utils.requestFun("接口url", data, 'POST', function (msg) { if (msg.data.length != 0) { var lists = that.data.offerList; for (let i = 0; i < msg.data.length; i++) { msg.data[i].isMove = false; lists.push(msg.data[i]); } // len len = len + msg.data.length; // 设置数据 that.setData({ offerList: lists }) } else { hadLastPage = true; } wx.hideLoading(); }) } })