微信小程式側滑刪除

2021-08-22 11:57:30 字數 1152 閱讀 5638

直接上乾貨吧

wxml

} }

刪除

wxss

view,label,textarea,input

.hd-con

.hd-con .listitem

.hd-con .list

.hd-con .listitem.active .list

.hd-con .list .info

.hd-con .list .info .toph

.hd-con .list .info .toph .name

.hd-con .list .info .msgs

.hd-con .listitem .deleted

.flex

.f_between

.f_around

.f_end

.f_start

.f_center

.f_warp

.f_relative

.flex_tel

.f_row

.f_line

js**

page(,

onload: function () ,

gettestlist: function ()

that.data.testlist.push(pagelist);

that.setdata();}},

//手指觸控動作開始 記錄起點x座標

touchstart: function (e) )

this.setdata()

},//滑動事件處理

touchmove: function (e) , );

that.data.testlist.foreach(function (v, i)

})//更新資料

that.setdata()

},/**

* 計算滑動角度

* @param start 起點座標

* @param end 終點座標

*/angle: function (start, end) ,

/***刪除某個行

*/deltestinfo: function (event) );

}})

微信小程式實現側滑

先上效果圖 滑動之前 滑動之後 覺得效果圖不錯的朋友請繼續往下看 先上一段html 德國nestl 雀巢beba貝巴適度水解奶粉3段 10個月以上 800g 刪除下面是css touch item content item img item title del touch move active c...

微信小程式左滑刪除

view class touch item data index wx for wx key view class content view style class item data index bindtouchstart touchstart bindtouchmove touchmove b...

微信小程式 左滑刪除效果

1 wxml touch item元素繫結了bindtouchstart bindtouchmove事件 class container class touch item data index bindtouchstart touchstart bindtouchmove touchmove wx ...