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

原创 JerryMark 随笔 小程序 110阅读 15 天前 举报

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

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

布局很重要:大概大家都想到,一个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 回复