.wxml代碼：

bindtouchstart與bindtouchend不需要

<view class="listview" style="width:{{windowWidth}}px"> <view class="itemview"> <movable-area class="movablearea" style="width:{{windowWidth*2-200}}rpx"> <movable-view class="movableview" style="width:{{windowWidth*2}}rpx" direction="horizontal" inertia="true" bindtouchstart="onBindtouchstartEvent" bindtouchend="onBindtouchendEvent" bindchange="onChangeEvent" x="{{x}}"> 聊天内容 </movable-view> </movable-area> <view class="deleteview">删除</view> </view> </view>

wxss代碼實現

/ * pages/function/function.wxss .area { width: 100%; height: 400px; background: gray; overflow: hidden; } .view { width: 100px; height: 100px; background: green; } */ .listview { width: 100%; height: 1000rpx; background: #ccc; padding: 0; } .itemview { width: 100%; height: 200rpx; background: pink; display: flex; } .itemview .movablearea { height: 200rpx; background: blue; } .itemview .movableview { height: 200rpx; background: rgb(104, 243, 139); display: flex; justify-content: center; align-items: center; } .itemview .deleteview { width: 200rpx; height: 200rpx; background: red; display: flex; justify-content: center; align-items: center; }

js代碼實現

Page({ /** * 生命周期函數--監聽頁面加載 */ onLoad: function (options) { var systemInfo = wx.getSystemInfoSync(); var windowWidth = systemInfo.windowWidth; //console.log(systemInfo); this.setData({ "windowWidth": windowWidth }) }, onChangeEvent: function (event){ console.log(event) if(event.detail.x <= -50){ this.setData({ "x":-100 }) }else{ this.setData({ "x": 0 }) } console.log(this.data.x); } })

案例效果展示

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部