码迷,mamicode.com
首页 > 微信 > 详细

微信小程序列表左滑删除,删除按钮自适应高度,删除后列表归位,同时存在一个左滑元素,目前为止写过最舒服的左滑删除

时间:2020-04-08 16:24:41      阅读:81      评论:0      收藏:0      [点我收藏+]

标签:inf   src   pac   active   数字   ppi   translate   detail   自适应   

 

技术图片

 

 

js

page({

  data:{

  items:[
    //isTouchMove初始化取消所有元素的向左滑动
            {name:‘店名范德萨‘,huowu:‘鸭脖货物鸭肠鸭头鸭爪鸭翅‘,time:‘2032-32-32 12:21‘,zhuangtai:‘待付款‘,price:‘23‘,current:1,isTouchMove: false},
            {name:‘店名久久丫‘,huowu:‘鸭脖货物鸭肠鸭头鸭爪鸭翅‘,time:‘2032-32-32 12:21‘,zhuangtai:‘待收货‘,price:‘23‘,current:2,isTouchMove: false},
            {name:‘店名武汉鸭头‘,huowu:‘鸭脖货物鸭肠鸭头鸭爪鸭翅‘,time:‘2032-32-32 12:21‘,zhuangtai:‘待评价‘,price:‘23‘,current:3,isTouchMove: false},
            {name:‘店名周黑鸭‘,huowu:‘鸭脖货物鸭肠鸭头鸭爪鸭翅‘,time:‘2032-32-32 12:21‘,zhuangtai:‘退款‘,price:‘23‘,current:4,isTouchMove: false},
        ]

  },

  

  //手指触摸动作开始 记录起点X坐标
    touchstart: function (e) {
        //开始触摸时 重置所有删除
        this.data.items.forEach(function (v, i) {
        if (v.isTouchMove)//只操作为true的
        v.isTouchMove = false;
        })
        this.setData({
        startX: e.changedTouches[0].clientX,
        startY: e.changedTouches[0].clientY,
        items: this.data.items
        })
   },
//滑动事件处理
   touchmove: function (e) {
        var that = this,
        index = e.currentTarget.dataset.index,//当前索引
        startX = that.data.startX,//开始X坐标
        startY = that.data.startY,//开始Y坐标
        touchMoveX = e.changedTouches[0].clientX,//滑动变化坐标
        touchMoveY = e.changedTouches[0].clientY,//滑动变化坐标
        //获取滑动角度
        angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });
        that.data.items.forEach(function (v, i) {
        v.isTouchMove = false
        //滑动超过30度角 return
        if (Math.abs(angle) > 30) return;
        if (i == index) {
        if (touchMoveX > startX) //右滑
        v.isTouchMove = false
        else //左滑
        v.isTouchMove = true
        }
        })
        //更新数据
        that.setData({
        items: that.data.items
        })
    },
 angle: function (start, end) {
        var _X = end.X - start.X,
        _Y = end.Y - start.Y
        //返回角度 /Math.atan()返回数字的反正切值
        return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
    },
    //删除事件
    del: function (e) {
        console.log(e)
        this.data.items.splice(e.currentTarget.dataset.index, 1)
        this.setData({
            items: this.data.items
        })
    },

})

css

.touch-item {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    /* border-bottom:1px solid #ccc; */
    width: 690rpx;
    margin: 0 auto 15rpx;
    overflow: hidden
}
.content {
    width: 100%;
    padding: 10px;
    /* line-height: 22px; */
    margin-right:0;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    -webkit-transform: translateX(90px);
    transform: translateX(90px);
    margin-left: -90px
}
.del {
    background-color: #D42F1E;
    width: 137rpx;
    display: flex;
    font-size: 32rpx;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    -webkit-transform: translateX(90px);
    transform: translateX(90px);
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
}
.touch-move-active .content,
.touch-move-active .del {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
.list{
    background-color: #fff;
    padding: 28rpx 10rpx 30rpx;
    border-radius: 20rpx;
    width: 100%;
    margin-right:0;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    -webkit-transform: translateX(90px);
    transform: translateX(90px);
    margin-left: -90px
}
.title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #F9F9F9;
}
.shop{
    display: flex;
    align-items: center;
}
.shopping{
    color: #191919;
    font-size: 30rpx;
    font-weight: 600;
    margin-right: 14rpx;
}
.desc{
    color: #959595;
    font-size: 26rpx;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    width: 200rpx;
}
.zhuangtai{
    color: #EA2C1A;
    font-size: 30rpx;
}
.product{
    margin-top: 30rpx;
    display: flex;

}
.pLeft{
    width: 100rpx;
    height: 100rpx;
    margin-right: 25rpx;
}
.pImg{
    width: 100%;
    height: 100%;
    border-radius: 10rpx;
}
.pRight{
    display: flex;
    flex-direction: column;
    padding-top: 9rpx;
}
.time{
    color: #6C6C6C;
    font-size: 28rpx;
}
.price{
    color: #6C6C6C;
    font-size: 28rpx;
    margin-top: 16rpx;
}
.operation{
    width: 100%;
    text-align: right;
    height: 60rpx;
    display: flex;
    justify-content: flex-end;
}
.anniu{
    /* padding:0 22rpx; */
    width: 150rpx;
    height: 60rpx;
    text-align: center;
    line-height: 56rpx;
    border: 1rpx solid #3A3A3A;
    border-radius: 30rpx;
    background-color: #fff;
    color: #3A3A3A;
    font-size: 28rpx;
}
 
 
 
wxml
 
 <view class="touch-item {{item.isTouchMove ? ‘touch-move-active‘ : ‘‘}} mylist" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove" wx:for="{{items}}" wx:key="index">
                    <view class="list content" catchtap="details">
                        <view class="title">
                            <view class="shop">
                                <view class="shopping">{{item.name}}</view>
                                <view class="desc">{{item.huowu}}</view>
                            </view> 
                            <view class="zhuangtai">{{item.zhuangtai}}</view>
                        </view>
                        <view class="product">
                            <view class="pLeft">
                                <image  mode=‘aspectFill‘ src="/images/1.png" class="pImg"></image>
                            </view>
                            <view class="pRight">
                                <view class="time">下单时间:{{item.time}}</view>
                                <view class="price">总价:¥{{item.price}}</view>
                            </view>
                        </view>
                        <view class="operation">
                            <view class="anniu" wx:if="{{item.current == 1}}" >去支付</view>
                            <view class="anniu" wx:if="{{item.current == 2}}">确认收货</view>
                            <view class="anniu" wx:if="{{item.current == 3}}" bindtap="evaluate">评价</view>
                            <view class="anniu" wx:if="{{item.current == 4}}">退款进度</view>
                        </view>                
                    </view>
                    <view class="del" catchtap="del" data-index="{{index}}">删除</view>
                </view>

 

微信小程序列表左滑删除,删除按钮自适应高度,删除后列表归位,同时存在一个左滑元素,目前为止写过最舒服的左滑删除

标签:inf   src   pac   active   数字   ppi   translate   detail   自适应   

原文地址:https://www.cnblogs.com/lishuang2243/p/12660458.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!