美文网首页微信小程序开发微信小程序开发
【小程序】高仿微信的左滑删除效果

【小程序】高仿微信的左滑删除效果

作者: Fernweh_Nancy | 来源:发表于2019-06-07 16:35 被阅读12次

    前言

    在小程序中,实现类似微信左滑删除的效果,有些人可能会想到在view里用到touchstart,touchmove,touchend结合实现的。但这个有缺点,特别是在ios真机上,左滑时页面会上下滑动,用户体验emmm...或许需要增加disableScroll:true,但这个页面会被禁止滚动,或许里面再嵌scroll-view就可以实现的。但我要说的不是这个方案,小程序出了更佳的一个组件,就是movable-view,很好用,提供动画的过渡,提供滑动触发的x轴,可以用这个x轴作为判断的,比较方便~

    【小程序】高仿微信的左滑删除效果

    xml

    <template>
        <block wx:for="{{dataList}}" wx:key="index">
            <movable-area class="area">
                <movable-view class="item"
                    damping="100" 
                    direction="horizontal" 
                    x="{{item.swipeX}}" 
                    data-index="{{index}}" 
                    @change="swipeChange({{index}})" 
                    out-of-bounds="true" 
                    animation="true" 
                    @touchend="swipeEnd({{index}})" 
                    @touchstart="swipeStart({{index}})"
                >
                    <view class="item-left">{{item.name}}</view>
                    <view class="item-right" @tap.stop="delete({{index}})">删除</view>
                </movable-view>
                <view class="line"></view>
            </movable-area> 
        </block>
    </template>
    
    • Tip:movable,movaview必须设置宽和高的值,否则默认值(10px)
    • Tip: movable必须要比movaview大点的,只是要容下内容和删除的容器的宽度

    js

    <script>
    import wepy from 'wepy';
    
    export default class swipeLeft extends wepy.page{
        config={
            navigationBarTitleText:'左滑删除',
        }
    
        data={
            dataList:[
                {name:'无可奈何花落去'},
                {name:'庄生晓梦迷蝴蝶'},
                {name:'天涯何处无芳草'},
                {name:'此情可待成追忆'},
                {name:'人面不知何处'},
                {name:'心悦君兮君不知'}
            ],
            currentX:0,
            currentIndex:-1,
        }
    
        setShowDel(index,moveX){
            this.dataList[index].swipeX=moveX;
        }
    
        methods={
    
            //滑动开始的触发事件
            swipeStart(index){
                this.currentIndex=index;
                this.dataList.forEach((item,i)=>{
                    if(index!=i){
                        item.swipeX=0;
                    }
                })
            },
    
            //滑动结束的触发事件
            swipeEnd(index){
                let swipeX=this.dataList[index].swipeX;
                if(this.currentX<-10 && (swipeX===0 || !swipeX)){
                    this.setShowDel(index,-120);
                    return;
                }
    
                if(this.currentX>-55 && swipeX===-120){
                    this.setShowDel(index,0);
                    return;
                }
            },
    
    
            //监听滑动过程触发的事件
            swipeChange(...e){
                if(this.currentIndex===e[0]){
                    this.currentX=e[1].detail.x;
                }
            }
        }
    
    }
    </script>
    

    wxss

    <style lang="less">
    
    .area{
        width: 750rpx;
        position: relative;
        height: 150rpx;
        .line{
            position: absolute;
            width: 690rpx;
            height: 1px;
            background: #ededed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            z-index: -1;
        }
        .item{
            width: 900rpx;
            height: 150rpx;
            display: flex;
            align-items: center;
            .item-left{
                width: 750rpx;
                margin-left: 30rpx;
            }
            .item-right{
                width: 140rpx;
                height: 150rpx;
                background: #ED6F20;
                color: #fff;
                line-height: 150rpx;
                text-align: center;
                border-radius: 0 10rpx 10rpx 0;
            }
        }
    }
    </style>
    

    相关文章

      网友评论

        本文标题:【小程序】高仿微信的左滑删除效果

        本文链接:https://www.haomeiwen.com/subject/yuwmxctx.html