<view class="bgwhite bor-bom-f2 row just-btw alignitems?
{{item.isTouchMove ? 'touch-move-active' : ''}}" wx:for="{{dataList}}" wx:key="index">
? <view class="item-left" data-index="{{index}}"?
? bindtouchstart="touchStart" bindtouchmove="touchMove">
? ? <view class="m-lr-30 row just-btw alignitems">
? ? ? <view>
? ? ? ? <view class="f28">{{item.name}}</view>
? ? ? ? <view class="row m-t-15">
? ? ? ? ? <view class="c999">張三</view>
? ? ? ? ? <view class="c999 m-l-50">17637930507</view>
? ? ? ? </view>
? ? ? </view>
? ? ? <image src="../../../images/phone_mid.png" mode="aspectFit"?
? ? ? style="width:43rpx;height:43rpx;"></image>
? ? </view>
? </view>
? <view class="delete">刪除</view>
</view>

// pages/user/suppliermana/suppliermana.js
Page({

? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? data: {
? ? // 設(shè)置開始的位置
? ? startX: 0,
? ? startY: 0,
? ? dataList:[],
? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面加載
? ?*/
? onLoad: function (options) {
?? ??? ?for (var i = 0; i < 10; i++) {
? ? ? ? ?this.data.dataList.push({
? ? ? ? ? ? ?content: "供應商名稱" + i,
? ? ? ? ? ? ?isTouchMove: false //默認全隱藏刪除
? ? ? ? ?})
? ? ?}
? ? ?this.setData({
? ? ? ? ?dataList: this.data.dataList
? ? ?})
? },
? // 開始滑動
? touchStart(e) {
? ? console.log('touchStart=====>', e);
? ? let dataList = [...this.data.dataList]
? ? dataList.forEach(item => {
? ? ? // 讓原先滑動的塊隱藏
? ? ? if (item.isTouchMove) {
? ? ? ? item.isTouchMove = !item.isTouchMove;
? ? ? }
? ? });
? ? // 初始化開始位置
? ? this.setData({
? ? ? dataList: dataList,
? ? ? startX: e.touches[0].clientX,
? ? ? startY: e.touches[0].clientY
? ? })
? },
? // 滑動~
? touchMove(e) {
? ? console.log('touchMove=====>', e);
? ? let moveX = e.changedTouches[0].clientX;
? ? let moveY = e.changedTouches[0].clientY;
? ? let indexs = e.currentTarget.dataset.index;
? ? let dataList = [...this.data.dataList]
? ? // 拿到滑動的角度，判斷是否大于 30°，若大于，則不滑動
? ? let angle = this.angle({
? ? ? X: this.data.startX,
? ? ? Y: this.data.startY
? ? }, {
? ? ? X: moveX,
? ? ? Y: moveY
? ? });

? ? dataList.forEach((item, index) => {
? ? ? item.isTouchMove = false;
? ? ? // 如果滑動的角度大于30° 則直接return；
? ? ? if (angle > 30) {
? ? ? ? return
? ? ? }
? ??
? ? // 判斷是否是當前滑動的塊，然后對應修改 isTouchMove 的值，實現(xiàn)滑動效果
? ? ? if (indexs === index) {
? ? ? ? if (moveX > this.data.startX) { // 右滑
? ? ? ? ? item.isTouchMove = false;
? ? ? ? } else { // 左滑
? ? ? ? ? item.isTouchMove = true;
? ? ? ? }
? ? ? }
? ? })

? ? this.setData({
? ? ? dataList
? ? })
? },

? /**
? ?* 計算滑動角度
? ?* @param {Object} start 起點坐標
? ?* @param {Object} end 終點坐標
? ?*/
? angle: function (start, end) {
? ? var _X = end.X - start.X,
? ? ? _Y = end.Y - start.Y
? ? //返回角度 /Math.atan()返回數(shù)字的反正切值
? ? return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
? ?*/
? onReady: function () {

? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面顯示
? ?*/
? onShow: function () {

? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面隱藏
? ?*/
? onHide: function () {

? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面卸載
? ?*/
? onUnload: function () {

? },

? /**
? ?* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
? ?*/
? onPullDownRefresh: function () {

? },

? /**
? ?* 頁面上拉觸底事件的處理函數(shù)
? ?*/
? onReachBottom: function () {

? },

? /**
? ?* 用戶點擊右上角分享
? ?*/
? onShareAppMessage: function () {

? }
})

.item-left {
? width: 100%;
? margin-left: -140rpx;
? transform: translateX(140rpx);
? -webkit-transition: all 0.4s;
? transition: all 0.4s;
? -webkit-transform: translateX(140rpx);
}
.delete {
? height: 100%;
? width: 140rpx;
? background: #FF4128;
? color:#fff;
? text-align: center;
? padding:50rpx 0;
? transform: translateX(150rpx);
? -webkit-transition: all 0.4s;
? transition: all 0.4s;
? -webkit-transform: translateX(150rpx);
}
.touch-move-active .item-left,
.touch-move-active .delete {
? -webkit-transform: translateX(0);
? transform: translateX(0);
}