小程序左滑删除，可上下滑动

如图：

　　

 

代码：

　　

  1 .userInfoView{
  2   width: 100%;
  3   height: 592rpx;
  4   margin-top: 40rpx;
  5   padding-bottom: 20rpx;
  6 }
  7 .userInfoLi{
  8   width: 100%;
  9   height: 176rpx;
 10   background-color: #F8F9FC;
 11   margin-bottom: 20rpx;
 12   border-radius: 8rpx;
 13 }
 14 .userinfonName{
 15   position: absolute;
 16   left: 108rpx;
 17   top: 24rpx;
 18   font-size: 28rpx;
 19   color: #333333;
 20 }
 21 .userinfoType{
 22   margin-left: 20rpx;
 23   color: #999999;
 24   font-size: 24rpx;
 25 }
 26 .userinfoCord{
 27   position: absolute;
 28   left: 108rpx;
 29   top: 74rpx;
 30   font-size: 24rpx;
 31   color: #999999;
 32 }
 33 .userinfoncordNer{
 34   position: absolute;
 35   left: 212rpx;
 36   top: 74rpx;
 37   font-size: 24rpx;
 38   color: #999999;
 39 }
 40 .userinfoPhone{
 41   position: absolute;
 42   left: 108rpx;
 43   top: 118rpx;
 44   font-size: 24rpx;
 45   color: #999999;
 46 }
 47 .userinfoPhoneNer{
 48   position: absolute;
 49   left: 212rpx;
 50   top: 118rpx;
 51   font-size: 24rpx;
 52   color: #999999;
 53 }
 54 .userinfonAdit{
 55   position: absolute;
 56   left: 602rpx;
 57   top: 74rpx;
 58   width: 28rpx;
 59   height: 27rpx;
 60 }
 61 .touch-item {
 62   height: 176rpx;
 63   background-color: #F8F9FC;
 64   margin-bottom: 20rpx;
 65   border-radius: 8rpx;
 66   font-size: 14px;
 67   display: flex;
 68   justify-content: space-between;
 69   width: 100%;
 70   overflow: hidden
 71 }
 72 
 73 .content {
 74   width: 100%;
 75   margin-right:0;
 76   -webkit-transition: all 0.4s;
 77   transition: all 0.4s;
 78   -webkit-transform: translateX(90px);
 79   transform: translateX(90px);
 80   margin-left: -90px;
 81   position: relative;
 82 }
 83 .userCheckIcon{
 84   position: absolute;
 85   left: 40rpx;
 86   top: 74rpx;
 87   width: 28rpx;
 88   height: 28rpx;
 89 }
 90 .del {
 91   background-color: #F56141;
 92   width: 90rpx;
 93   display: flex;
 94   flex-direction: column;
 95   align-items: center;
 96   justify-content: center;
 97   color: #fff;
 98   -webkit-transform: translateX(90px);
 99   transform: translateX(90px);
100   -webkit-transition: all 0.4s;
101   transition: all 0.4s;
102   font-size: 28rpx;
103 }
104 
105 .touch-move-active .content,
106 .touch-move-active .del {
107   -webkit-transform: translateX(0);
108   transform: translateX(0);
109 }
View Code

 

 1 <scroll-view hidden="{{items.length==0}}" class='userInfoView' scroll-y="true">
 2       <view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove" wx:for="{{items}}" wx:key="index">
 3         <view class="content">
 4           <image class='userCheckIcon' src="{{item.checkIcon}}"></image>
 5           <view class="userinfonName">{{item.name}}<span class="userinfoType">{{item.userType}}</span></view>
 6           <!-- <view class='userinfoType'>{{item.userType}}</view> -->
 7           <view class='userinfoCord'>身份证</view>
 8           <view class='userinfoncordNer'>{{item.userCord}}</view>
 9           <view class='userinfoPhone'>手机号</view>
10           <view class='userinfoPhoneNer'>{{item.phone}}</view>
11           <image class='userinfonAdit' src="{{item.aditIcon}}"></image>
12         </view>
13         <view class="del" catchtap="del" data-index="{{index}}">删除</view>
14       </view>
15     </scroll-view>
View Code

 

  1 // pages/Travel/FillOrder/fillOrder.js
  2 
  3 Page({
  4   data: {
  5     items: [],
  6     startX: 0, 
  7     startY: 0,
  8     mengbanBol:true
  9   },
 10   onLoad: function (options) {
 11     wx.setNavigationBarTitle({
 12       title: "填写订单"
 13     })
 14     var that = this;
 15     for (var i = 0; i < 10; i++) {
 16       this.data.items.push({
 17         checkIcon: '../../image/checkTrue.png',
 18         name:"李俊涛",
 19         userType:"儿童",
 20         userCord:"3111 2589 8512 365 222",
 21         phone:"180 0011 1166",
 22         aditIcon: '../../image/aditIcon.png',
 23         isTouchMove: false //默认隐藏删除
 24       })
 25     }
 26     this.setData({
 27       items: this.data.items
 28     });
 29   },
 30   changMbbOL(e){
 31     this.setData({
 32       mengbanBol:false
 33     });
 34   },
 35   calselMbbOL(){
 36     this.setData({
 37       mengbanBol: true
 38     });
 39   },
 40   touchstart: function (e) {
 41     //开始触摸时 重置所有删除
 42     this.data.items.forEach(function (v, i) {
 43 
 44       if (v.isTouchMove)//只操作为true的
 45 
 46         v.isTouchMove = false;
 47 
 48     })
 49     this.setData({
 50       startX: e.changedTouches[0].clientX,
 51       startY: e.changedTouches[0].clientY,
 52       items: this.data.items
 53 
 54     })
 55   },
 56   touchmove: function (e) {
 57 
 58     var that = this,
 59 
 60       index = e.currentTarget.dataset.index,//当前索引
 61 
 62       startX = that.data.startX,//开始X坐标
 63 
 64       startY = that.data.startY,//开始Y坐标
 65 
 66       touchMoveX = e.changedTouches[0].clientX,//滑动变化坐标
 67 
 68       touchMoveY = e.changedTouches[0].clientY,//滑动变化坐标
 69 
 70       //获取滑动角度
 71 
 72       angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });
 73 
 74     that.data.items.forEach(function (v, i) {
 75 
 76       v.isTouchMove = false
 77 
 78       //滑动超过30度角 return
 79 
 80       if (Math.abs(angle) > 30) return;
 81 
 82       if (i == index) {
 83 
 84         if (touchMoveX > startX) //右滑
 85 
 86           v.isTouchMove = false
 87 
 88         else //左滑
 89 
 90           v.isTouchMove = true
 91 
 92       }
 93 
 94     })
 95     //更新数据
 96 
 97     that.setData({
 98 
 99       items: that.data.items
100 
101     })
102 
103   },
104   /**
105 
106 * 计算滑动角度
107 
108 * @param {Object} start 起点坐标
109 
110 * @param {Object} end 终点坐标
111 
112 */
113 
114   angle: function (start, end) {
115 
116     var _X = end.X - start.X,
117 
118       _Y = end.Y - start.Y
119 
120     //返回角度 /Math.atan()返回数字的反正切值
121 
122     return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
123 
124   },
125   //删除事件
126 
127   del: function (e) {
128 
129     this.data.items.splice(e.currentTarget.dataset.index, 1)
130 
131     this.setData({
132 
133       items: this.data.items
134 
135     })
136 
137   }
138   
139 })
View Code

 

OVER!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

 

　　

　　

posted @ 2018-10-27 14:13  lijuntao  阅读(2990)  评论(0)  编辑  收藏  举报
TOP