微信小程序提示移除代码（微信小程序左滑删除代码实现）

代码实现.wxml代码：bindtouchstart与bindtouchend不需要<view><view><movable-area><movable-viewdirection="horizontal"inertia="true"bindtouchstart="onBindtouchstartEvent"bindtouchend="onBindtouchendEvent"bindchange=

.wxml代码：

bindtouchstart与bindtouchend不需要

<view><view ><movable-area><movable-viewdirection="horizontal" inertia="true" bindtouchstart="onBindtouchstartEvent" bindtouchend="onBindtouchendEvent" bindchange="onChangeEvent" x="{{x}}">聊天内容</movable-view></movable-area><view >删除</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);}})

案例效果展示,