這篇文章給大家分享的是有關(guān)微信小程序如何實現(xiàn)向左滑動刪除效果的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
創(chuàng)新互聯(lián)專注于潮安企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站,商城網(wǎng)站定制開發(fā)。潮安網(wǎng)站建設(shè)公司,為潮安等地區(qū)提供建站服務(wù)。全流程專業(yè)公司,專業(yè)設(shè)計,全程項目跟蹤,創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)先看效果
要實現(xiàn)的效果:
1,當(dāng)向左滑動時,item跟隨手指像左移動,同時右側(cè)出現(xiàn)兩個可點(diǎn)擊的按鈕
2,當(dāng)滑動距離大于按鈕寬度一半松開手指時,item自動滑動到左側(cè)顯示出按鈕,小于一半時item自動回到原來的位置,隱藏按鈕。
思路:
1,首先頁面每個item分為上下兩層,上面一層放置正常內(nèi)容,下面一層放置左滑顯示出的按鈕,這個可以使用z-index來實現(xiàn)分層。
2,item上層使用絕對定位,我們操縱 left 屬性的值來實現(xiàn)像左移動。
3,我們通過微信小程序api提供的touch對象和3個有關(guān)手指觸摸的函數(shù)(touchstart,touchmove,touchend)來實現(xiàn)item隨手指移動。
由于比較簡單,所以直接上代碼了,詳細(xì)的講解都在代碼的注釋中,首先看下頁面的布局
<!--這是一個item的代碼> <view class="address-item" wx:for="pw_addressList" > <!--這里綁定了剛才說的3個函數(shù)分別為 touchS,touchM touchE--> <!--這里注意這個 style="pw_item.txtStyle" ,這是我們一會再js中 將要設(shè)置的樣式 --> <view style="pw_item.txtStyle" bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" data-index="pw_index" class="address-item-top" > <!--中間無關(guān)的代碼已被我刪除--> </view> <!--這里是左滑按鈕部分----start--> <view bindtap="delItem" class="posit"> <view class="editor" data-addressid="pw_item.address.ID" catchtap="setDefaultAddress">設(shè)為默認(rèn)地址</view> <view class="del" data-addressid="pw_item.address.ID" data-index="pw_index" catchtap="delAddress">刪除</view> </view> <!--這里是左滑按鈕部分----end--> </view>
再看js代碼
Page({ data:{ addressList:[{"Contact":"鐘誠","Mobile":13888888888,"Address":"江蘇省蘇州市工業(yè)園區(qū)創(chuàng)意產(chǎn)業(yè)園"}, {"Contact":"凹凸曼","Mobile":13666666666,"Address":"江蘇省蘇州市工業(yè)園區(qū)獨(dú)墅湖體育館"}, {"Contact":"圖傲曼","Mobile":13666666666,"Address":"江蘇省蘇州市工業(yè)園區(qū)獨(dú)墅湖體育館"}], editIndex:0, delBtnWidth:150//刪除按鈕寬度單位(rpx) }, onLoad:function(options){}, //手指剛放到屏幕觸發(fā) touchS:function(e){ console.log("touchS"+e); //判斷是否只有一個觸摸點(diǎn) if(e.touches.length==1){ this.setData({ //記錄觸摸起始位置的X坐標(biāo) startX:e.touches[0].clientX }); } }, //觸摸時觸發(fā),手指在屏幕上每移動一次,觸發(fā)一次 touchM:function(e){ console.log("touchM:"+e); var that = this if(e.touches.length==1){ //記錄觸摸點(diǎn)位置的X坐標(biāo) var moveX = e.touches[0].clientX; //計算手指起始點(diǎn)的X坐標(biāo)與當(dāng)前觸摸點(diǎn)的X坐標(biāo)的差值 var disX = that.data.startX - moveX; //delBtnWidth 為右側(cè)按鈕區(qū)域的寬度 var delBtnWidth = that.data.delBtnWidth; var txtStyle = ""; if(disX == 0 || disX < 0){//如果移動距離小于等于0,文本層位置不變 txtStyle = "left:0px"; }else if(disX > 0 ){//移動距離大于0,文本層left值等于手指移動距離 txtStyle = "left:-"+disX+"px"; if(disX>=delBtnWidth){ //控制手指移動距離較大值為刪除按鈕的寬度 txtStyle = "left:-"+delBtnWidth+"px"; } } //獲取手指觸摸的是哪一個item var index = e.currentTarget.dataset.index; var list = that.data.addressList; //將拼接好的樣式設(shè)置到當(dāng)前item中 list[index].txtStyle = txtStyle; //更新列表的狀態(tài) this.setData({ addressList:list }); } }, touchE:function(e){ console.log("touchE"+e); var that = this if(e.changedTouches.length==1){ //手指移動結(jié)束后觸摸點(diǎn)位置的X坐標(biāo) var endX = e.changedTouches[0].clientX; //觸摸開始與結(jié)束,手指移動的距離 var disX = that.data.startX - endX; var delBtnWidth = that.data.delBtnWidth; //如果距離小于刪除按鈕的1/2,不顯示刪除按鈕 var txtStyle = disX > delBtnWidth/2 ? "left:-"+delBtnWidth+"px":"left:0px"; //獲取手指觸摸的是哪一項 var index = e.currentTarget.dataset.index; var list = that.data.addressList; list[index].txtStyle = txtStyle; //更新列表的狀態(tài) that.setData({ addressList:list }); } }
感謝各位的閱讀!關(guān)于“微信小程序如何實現(xiàn)向左滑動刪除效果”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
網(wǎng)頁標(biāo)題:微信小程序如何實現(xiàn)向左滑動刪除效果-創(chuàng)新互聯(lián)
網(wǎng)頁地址:http://muchs.cn/article22/dhsjjc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設(shè)計、ChatGPT、定制開發(fā)、網(wǎng)站改版、虛擬主機(jī)、企業(yè)網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容