WeChat applet slide Delete (left slide delete), Applet

The applet is slide-deleted (left slide-deleted) and the Applet

Slide and delete a applet (Slide left)

The demo is the slide deletion of the applet, Which I modified based on the example written by others. The Code is as follows:

Js file code:

// Pages/leftSwiperDel/index. js var initdata = function (that) {var list = that. data. list for (var I = 0; I <list. length; I ++) {listpolicipolic.txt Style = ""} that. setData ({list: list})} Page ({data: {delBtnWidth: 180, // delete button width unit (rpx) list: [{txtStyle: "", icon: "/images/qcm.png", txt: "fingertip Express" },{ txtStyle: "", icon: "/images/qcm.png", txt: "fingertip Express "}, {txtStyle: "", icon: "/images/qcm.png", txt :" Fingertip Express "},{ txtStyle:" ", icon:"/images/qcm.png ", txt:" fingertip Express "},{ txtStyle:" ", icon: "/images/qcm.png", txt: "fingertip Express" },{ txtStyle: "", icon: "/images/qcm.png", txt: "fingertip Express "}, {txtStyle: "", icon: "/images/qcm.png", txt: "fingertip Express" },{ txtStyle: "", icon: "/images/qcm.png", txt: "fingertip Express" },{ txtStyle: "", icon: "/images/qcm.png", txt: "fingertip Express" },{ txtStyle: "", icon: "/images/qcm.png", txt: "fingertip Express "}, {TxtStyle: "", icon: "/images/qcm.png", txt: "fingertip Express"},]}, onLoad: function (options) {// The parameter this. initEleWidth () ;}, onReady: function () {// page rendering completed}, onShow: function () {// page display}, onHide: function () {// page hiding}, onUnload: function () {// page closing}, touchS: function (e) {if (e. touches. length = 1) {this. setData ({// set the horizontal position of the touch start point startX: e. touches [0]. clientX });}}, TouchM: function (e) {var that = this initdata (that) if (e. touches. length = 1) {// horizontal position var moveX = e. touches [0]. clientX; // the difference between the start point and the start point of the finger. var disX = this. data. startX-moveX; var delBtnWidth = this. data. delBtnWidth; var txtStyle = ""; if (disX = 0 | disX <0) {// if the moving distance is smaller than or equal to 0, the text layer position remains unchanged. txtStyle = "left: 0px ";} else if (disX> 0) {// The moving distance is greater than 0, and the left value of the text layer is equal to the moving distance of the finger. txtStyle =" left:-"+ disX +" p X "; if (disX> = delBtnWidth) {// controls the maximum finger movement distance to the width of the delete button. txtStyle =" left:-"+ delBtnWidth +" px ";}} // obtain the var index = e.tar get. dataset. index; var list = this. data. list; listparts index.txt Style = txtStyle; // update the list status this. setData ({list: list}) ;}, touchE: function (e) {if (e. changedTouches. length = 1) {// horizontal position after finger movement ends var endX = e. changedTouches [0]. clientX; // the start and end of the touch. The distance between the finger movement and var disX = this. Data. startX-endX; var delBtnWidth = this. data. delBtnWidth; // if the distance is less than 1/2 of the delete button, the delete button var txtStyle = disX> delBtnWidth/2 is not displayed? "Left:-" + delBtnWidth + "px": "left: 0px"; // obtain the var index = e.tar get that the finger is touching. dataset. index; var list = this. data. list; listparts index.txt Style = txtStyle; // update the list status this. setData ({list: list}) ;}}, // get the actual width of the adaptive element getEleWidth: function (w) {var real = 0; try {var res = wx. getSystemInfoSync (). optional wwidth; var scale = (750/2)/(w/2); // The width of the PX design draft is used for adaptive // console. log (scale); real = Math. flo Or (res/scale); return real;} catch (e) {return false; // Do something when catch error }}, initEleWidth: function () {var delBtnWidth = this. getEleWidth (this. data. delBtnWidth); this. setData ({delBtnWidth: delBtnWidth}) ;}, // click the delete button event delItem: function (e) {var that = this wx. showModal ({title: 'hprompt ', content:' Are you sure you want to delete it? ', Success: function (res) {if (res. confirm) {// obtain the subscript var index = e.tar get. dataset. index; var list = that. data. list; // remove the list of items marked as index in the list. splice (index, 1); // update the status of the list that. setData ({list: list});} else {initdata (that )}}})}})

Wxss file code:

/* pages/leftSwiperDel/index.wxss */ view{   box-sizing: border-box; } .item-box{   width: 700rpx;   margin: 0 auto;   padding:40rpx 0; } .items{   width: 100%; } .item{   position: relative;   border-top: 2rpx solid #eee;   height: 120rpx;   line-height: 120rpx;   overflow: hidden; } .item:last-child{   border-bottom: 2rpx solid #eee; } .inner{   position: absolute;   top:0; } .inner.txt{   background-color: #fff;   width: 100%;   z-index: 5;   padding:0 10rpx;   transition: left 0.2s ease-in-out;   white-space:nowrap;   overflow:hidden;   text-overflow:ellipsis; } .inner.del{   background-color: #e64340;   width: 180rpx;text-align: center;   z-index: 4;   right: 0;   color: #fff } .item-icon{   width: 64rpx;   vertical-align: middle;   margin-right: 16rpx } .thumb{   width: 200px;   height: 200px;   -webkit-overflow-scrolling: touch;   overflow: scroll; } 

Wxml file code:

<View class = "item-box"> <view class = "items"> <view wx: for = "{list}" wx: key = "{index }}" class =" item "> <view bindtouchstart =" touchS "bindtouchmove =" touchM "bindtouchend =" touchE "data-index =" {index} "style =" extends item.txt Style} "class =" inner txt "> <image class =" item-icon "mode =" widthFix "src =" {item. icon }}" ></image >{{ index20.00000000item.txt }}</view> <view data-index = "{{ index }}" bindtap = "delItem" class = "inner del "> Delete </view>

Thank you for reading this article. I hope it will help you. Thank you for your support for this site!