项目中刚好需要这个需求,下面给大家介绍下实现方式,先看下效果图:
左滑的时候出现一个操作按钮
布局很重要:大概大家都想到,一个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
js
到这里,基本就完成了
详情看这里:博客
评论 (0 )
最新评论
暂无评论
赶紧努力消灭 0 回复