這篇文章主要介紹“微信小程序中怎么實(shí)現(xiàn)左滑刪除效果”的相關(guān)知識,小編通過實(shí)際案例向大家展示操作過程,操作方法簡單快捷,實(shí)用性強(qiáng),希望這篇“微信小程序中怎么實(shí)現(xiàn)左滑刪除效果”文章能幫助大家解決問題。
讓客戶滿意是我們工作的目標(biāo),不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶,將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴,公司提供的服務(wù)項目有:申請域名、雅安服務(wù)器托管、營銷軟件、網(wǎng)站建設(shè)、蒲城網(wǎng)站維護(hù)、網(wǎng)站推廣。先看效果
要實(shí)現(xiàn)的效果:
1,當(dāng)向左滑動時,item跟隨手指像左移動,同時右側(cè)出現(xiàn)兩個可點(diǎn)擊的按鈕
2,當(dāng)滑動距離大于按鈕寬度一半松開手指時,item自動滑動到左側(cè)顯示出按鈕,小于一半時item自動回到原來的位置,隱藏按鈕。
思路:
1,首先頁面每個item分為上下兩層,上面一層放置正常內(nèi)容,下面一層放置左滑顯示出的按鈕,這個可以使用z-index來實(shí)現(xiàn)分層。
2,item上層使用絕對定位,我們操縱 left 屬性的值來實(shí)現(xiàn)像左移動。
3,我們通過微信小程序api提供的touch對象和3個有關(guān)手指觸摸的函數(shù)(touchstart,touchmove,touchend)來實(shí)現(xiàn)item隨手指移動。
由于比較簡單,所以直接上代碼了,詳細(xì)的講解都在代碼的注釋中,首先看下頁面的布局
<!--這是一個item的代碼> <view class="address-item" wx:for="{{addressList}}" > <!--這里綁定了剛才說的3個函數(shù)分別為 touchS,touchM touchE--> <!--這里注意這個 ,這是我們一會再js中 將要設(shè)置的樣式 --> <view bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" data-index="{{index}}" class="address-item-top" > <!--中間無關(guān)的代碼已被我刪除--> </view> <!--這里是左滑按鈕部分----start--> <view bindtap="delItem" class="posit"> <view class="editor" data-addressid="{{item.address.ID}}" catchtap="setDefaultAddress">設(shè)為默認(rèn)地址</view> <view class="del" data-addressid="{{item.address.ID}}" data-index="{{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)于“微信小程序中怎么實(shí)現(xiàn)左滑刪除效果”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識,可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,小編每天都會為大家更新不同的知識點(diǎn)。
本文名稱:微信小程序中怎么實(shí)現(xiàn)左滑刪除效果-創(chuàng)新互聯(lián)
當(dāng)前URL:http://www.muchs.cn/article28/ddeocp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站導(dǎo)航、微信小程序、建站公司、企業(yè)網(wǎng)站制作、網(wǎng)站策劃、面包屑導(dǎo)航
聲明:本網(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)容