标签:idt 图片 style 距离 nload lex 方向 flex data-
1、wxml
<!--pages/test/test.wxml--> <view class="page"> <movable-area class="m_a" wx:for="{{plist}}" wx:key="*this" wx:for-index="id" > <movable-view class="data_list" direction="horizontal" inertia="true" x="{{item.leftx}}" out-of-bounds="true" bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" data-index="{{id}}" > <view class="d_box"> <view class="data">{{item.title}}</view> <view>删除</view> </view> </movable-view> </movable-area> </view>
2.wxss
/* pages/test/test.wxss */ .page{ width: 100vw; height: 100vh; } .m_a{ width: 100%; height: 200rpx; border: 1rpx solid gray; } .data_list{ height: 200rpx; width: 120%; border: 1rpx solid red; } .d_box{ display: flex; justify-content: flex-start; justify-items: center; height: 100%; } .data{ width: 100vw; background: red; }
3.js
// pages/test/test.js Page({ /** * 页面的初始数据 */ data: { plist: [{ "title": "内容内容13131", "leftx": 0 }, { "title": "asdasd内容13131", "leftx": 0 }, { "title": "a是sd内容13131", "leftx": 0 }, { "title": "as水电费多个d内容13131", "leftx": 0 }], pcontrolWidth: 200, }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 触摸开始 */ touchS: function (e) { let index = e.currentTarget.dataset.index; //遍历复位 this.data.plist.forEach(function (item, key) { if (key != index) { item.leftx = 0; } }); //复位后,赋值 this.setData({ plist: this.data.plist, }); if (e.touches.length == 1) { this.setData({ //设置触摸起始点水平方向位置 startX: e.touches[0].clientX }); } }, /** * 触摸移动 */ touchM: function (e) { console.log(e); let index = e.currentTarget.dataset.index; var endX = e.touches[0].clientX; var disX = this.data.startX - endX; var pcontrolWidth = this.data.pcontrolWidth; var left = 0; if (disX <= 0) { left = 0; } else if (disX > 0) { left = disX; if (disX >= pcontrolWidth) { //控制手指移动距离最大值为删除按钮的宽度 left = pcontrolWidth; } } this.data.plist[index].leftx = -left; this.setData({ plist: this.data.plist, }); console.log(this.data.plist); }, /** * 触摸结束 */ touchE: function (e) { } })
标签:idt 图片 style 距离 nload lex 方向 flex data-
原文地址:https://www.cnblogs.com/fps2tao/p/11390024.html