猿记录

一个记录、分享的博客

您的位置:主页 > 微信小程序 >

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

2018-08-06 16:53:08 作者:yxl 次阅读 微信小程序

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

TIMͼƬ20180806165405.png

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

布局很重要:大概大家都想到,一个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:模板列表如下

     <view  data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove" class="article-item" wx:for="{{articleList}}" wx:key="unique" >
           <navigator url="../detail/detail?id={{item.id}}" hover-class="none" class="article-item-inner border-item {{item.isTouchMove ? 'moveitem':''}}" >
                 <view class="img-link">
                    <image src="{{item.images}}" class="article-img"/>
                 </view >
                    <view class="r-cont">
                   <text class="code">{{item.code}}</text>
                    <text class="size">{{item.size}}</text>
                     <text class="number">数量:{{item.number}}</text>
                </view>
           </navigator>
           <view class="hd-box">
                <text class="m-btn" data-id="{{item.id}}" bindtap="bgyp">标记已配</text>
           </view>
        </view >

主要的是看 

data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove"   {{item.isTouchMove ? 'moveitem':''}}

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

js

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
        })
    },

到这里,基本就完成了


凡本站注明“本站”或“投稿”的所有文章,版权均属于本站或投稿人,未经本站授权不得转载、摘编或利用其它方式使用上述作品。

编辑:yxl 关键词: 微信小程序
0

网友评论