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

原创 JerryMark 随笔 js 377阅读 2018-07-06 15:56:36 举报

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

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

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

到这里,基本就完成了
详情看这里:博客

评论 ( 8 )
最新评论
JerryMark 7F 2018-07-15 10:01:08 8F

是的

lawrence 6F 2018-07-13 00:05:05 7F

会自动把html打包成apk么?

JerryMark 5F 2018-07-12 22:34:23 6F

你用mui hbuild开发就可以

lawrence 4F 2018-07-12 20:09:20 5F

打包成apk么?

JerryMark 3F 2018-07-12 17:56:27 4F

是app 浏览器打开

lawrence 2F 2018-07-12 16:40:07 3F

不是app?要用浏览器打开?

JerryMark 1F 2018-07-12 11:44:52 2F

web

lawrence 2018-07-12 07:47:39 1F

楼主是webapp,还是混合框架?