项目中刚好需要这个需求, 下面给大家介绍下实现方式, 先看下效果图:
左滑的时候出现一个操作按钮
布局很重要: 大概大家都想到, 一个 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
- })
- },
到这里, 基本就完成了
来源: http://www.qdfuns.com/article/20013/66431b9a180863383443330453d8c849.html