WeChat applet slide Delete (left slide delete), Applet

Source: Internet
Author: User

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!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.