文章 - 微信小程序左滑出现操作按钮

项目中刚好需要这个需求，下面给大家介绍下实现方式，先看下效果图：

左滑的时候出现一个操作按钮

布局很重要：大概大家都想到，一个item里面有两个盒子，一个是放置正常内容的，一个是操作按钮的，

第一种方式：定位

放置正常内容的relative定位，放置操作按钮的是absolute定位，然后层级关系relative的层级比操作按钮的高，就可以了。

然后给relative的正常内容设置

-webkit-transition: all 0.2s;
transition: all 0.2s;
滑动的时候添加一个class

-webkit-transform: translateX(-150rpx);
transform: translateX(-150rpx);
这样有了动画效果

第二种方式：浮动，然后width：100%，overflow:hidden;然后滑动的时候margin-left:-100%;

下面介绍第一张方式的详细教程：

wxml：模板列表如下

主要的是看

添加了，一个自定义索引，一个touchstart、一个touchmove事件，还有一个动态的滑动class moveitem

data:{
    list:[],
}
如果你的数据是异步后填充的，可以这样
var list = res.data.list;//假设这个是接口返回的数据
 list.forEach(function($item) {
                            $item['isTouchMove'] = false   //默认是不显示那个操作按钮
   })
 touchstart(e) {
        //开始触摸时 重置所有删除
        this.data.articleList.forEach(function(v, i) {
            if (v.isTouchMove) //只操作为true的
                v.isTouchMove = false;
        })
        this.setData({
            startX: e.changedTouches[0].clientX,
            startY: e.changedTouches[0].clientY,
            list: this.data.list
        })
    },
    touchmove(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.list.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({
            list: that.data.list
        })
    },

到这里，基本就完成了
详情看这里：博客

微信小程序左滑出现操作按钮

评论 ( 0 )

最新评论

暂无评论

微信小程序左滑出现操作按钮

评论 ( 0 )

最新评论

暂无评论

欢迎您回来

创建账号

找回密码