国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

微信小程序?qū)崿F(xiàn)滑動刪除效果

2019-11-19 16:32:49
字體:
供稿:網(wǎng)友

最初打算使用scroll-view實現(xiàn),效果好、流暢、有慣性滑動,但由于滾動條沒法去掉、無法實現(xiàn)上下層的幀布局,最終放棄了。

還是自己寫個吧,利用手勢事件。遺憾的是小程序中目前沒有像Android中快速滑動事件,所以,要實現(xiàn)慣性滑動是不可能了。

item的布局:

推薦小程序優(yōu)先使用flex布局,完全夠用。這也是微信推薦的。

<view wx:for="{{cardTeams}}" wx:for-item="cardTeam" id="{{cardTeam.id}}" class="item" bindtouchstart="drawStart" bindtouchmove="drawMove" bindtouchend="drawEnd" style="right:{{cardTeam.right}}px">     <image class="img" src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg" mode="scaleToFill"></image>     <view class="number-wrapper">      <text class="name">{{cardTeam.name}}</text>      <view class="count-wrapper">       <view class="decrease-btn">-</view>       <text class="count">1</text>       <view class="increase-btn">+</view>      </view>      <view class="price-wrapper">       <text class="unit">¥</text>       <text class="price">99.80</text>      </view>     </view>     <view class="ok"><view class="inner-ok">確定</view></view>     <view class="remove" data-id="{{cardTeam.id}}" bindtap="delItem"><view>刪除</view></view>    </view> 

主要是將刪除按鈕的設(shè)為絕對定位(position: absolute):

.item .remove{   width: 60px;   height: 100%;   background-color: red;   position: absolute;   top: 0;   right: -60px;   display: flex;   justify-content: center;   align-items: center; } 
Page({  data: {   cardTeams:[{"id":"aaaaa", "name":"android教程", "url":"http://www.see-source.com", "right":0, "startRight":0},{"id":"bbbb", "name":"小程序教程", "url":"http://www.see-source.com", "right":0, "startRight":0}]  },  drawStart : function(e){    // console.log("drawStart");   var touch = e.touches[0];   startX = touch.clientX;   startY = touch.clientY;   var cardTeams = this.data.cardTeams;   for(var i in cardTeams){     var data = cardTeams[i];     data.startRight = data.right;   }   key = true;  },  drawEnd : function(e){   console.log("drawEnd");   var cardTeams = this.data.cardTeams;   for(var i in cardTeams){     var data = cardTeams[i];     if(data.right <= 100/2){       data.right = 0;     }else{       data.right = maxRight;     }   }   this.setData({     cardTeams:cardTeams   });  },  drawMove : function(e){    //console.log("drawMove");   var self = this;   var dataId = e.currentTarget.id;   var cardTeams = this.data.cardTeams;   if(key){     var touch = e.touches[0];     endX = touch.clientX;     endY = touch.clientY;     console.log("startX="+startX+" endX="+endX );     if(endX - startX == 0)       return ;     var res = cardTeams;       //從右往左        if((endX - startX) < 0){         for(var k in res){           var data = res[k];           if(res[k].id == dataId){             var startRight = res[k].startRight;             var change = startX - endX;             startRight += change;             if(startRight > maxRight)               startRight = maxRight;             res[k].right = startRight;           }         }       }else{//從左往右         for(var k in res){           var data = res[k];           if(res[k].id == dataId){             var startRight = res[k].startRight;             var change = endX - startX;             startRight -= change;             if(startRight < 0)               startRight = 0;             res[k].right = startRight ;           }         }       }       self.setData({         cardTeams:cardTeams       });              }  },  //刪除item  delItem: function(e){   var dataId = e.target.dataset.id;   console.log("刪除"+dataId);   var cardTeams = this.data.cardTeams;   var newCardTeams = [];    for(var i in cardTeams){     var item = cardTeams[i];     if(item.id != dataId){      newCardTeams.push(item);     }   }   this.setData({     cardTeams:newCardTeams    });  },  onLoad: function () {   console.log('onLoad:'+app.globalData.domain)     } }) 

drawStart用于記錄手指觸碰時的位置,drawMove記錄手指滑動的位置,兩者的差值就是刪除按鈕的偏移量
drawEnd手指抬起時觸發(fā),用于設(shè)置彈回、攤開效果。目前我的是超過一半自動彈開,不足一半自動收回。

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持武林網(wǎng)。

發(fā)表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發(fā)表
主站蜘蛛池模板: 郧西县| 射洪县| 康马县| 凉城县| 保靖县| 大城县| 霍邱县| 丹棱县| 新昌县| 中西区| 黔西县| 平泉县| 清镇市| 衡阳县| 阿图什市| 晋宁县| 清原| 谢通门县| 大石桥市| 徐汇区| 乐平市| 清水河县| 襄汾县| 商丘市| 滦平县| 漳平市| 东乡族自治县| 远安县| 芷江| 普格县| 双峰县| 乌海市| 双城市| 呼玛县| 武安市| 沧州市| 霍邱县| 安岳县| 英超| 隆化县| 科尔|