小程序卡片左右滑动怎么实现?

时间：2023-07-01 14:05 阅读数：117 人阅读分类：知识百科

　　小程序卡片左右滑动怎么实现?有些微信小程序开发者为了小程序卡片有更好的体验，会选择去开发小程序卡片左右滑动功能哦。那么小程序卡片左右滑动怎么实现呢?以下就是具体的方法介绍了哦。

　　小程序卡片左右滑动是很常见的功能，但是小程序出来不久，很多特效还没有成熟案例，只能原生重写，所以今天为大家带来小程序卡片左右滑动特效制作方法。

　　小程序卡片左右滑动效果图如下：

　　wxm微信小程序代码：

　　搭建上下两层界面

　　写一段css3的右移动画样式 .c-state1

　　wxss:

　　点击小程序按钮，添加样式.c-state1

　　再点击，移除样式.c-state1

　　滑动且屏幕缩小

　　wxss：

　　wxml代码和特效一相同

　　c-state2与.c-state1唯一不同在于scale值

　　小程序js代码：

　　代码很简单，就是通过open值控制view对类的选取

　　与特效二不同在于，不仅可以点击按钮触发侧滑，还可以拖动主界面触发侧滑特效

　　js代码：

　　tap_drag中判断手势是从左到右，或者从右向左

　　tap_end表示手势抬起，如果是从左到右，则触发从左到右的滑动

　　tap_end表示手势抬起，如果是从右到左，则触发从右到左的滑动

　　此特效会随着手势滑动而滑动;如果松手时候不到屏宽的20%，那么会自动还原;如果松手时候超过20%，那么会向右滑动。

　　JS代码：

　　这句是关键，很好理解，就是用js控制浅蓝色屏幕translateX的值，这样手势不断左右滑动，屏幕也就跟着手势慢慢滑动了。

　　拖动屏幕不足屏宽20%，还原默认状态;超过20%，滑动到最右侧。

　　小于20%，让translateX(0px)则屏幕还原;大于20%，tanslateX(75%)则屏幕右移到屏幕的75%处。

　　小程序卡片左右滑动怎么实现?以上就是小编整理的小程序卡片左右滑动的开发方法了哦，各位亲们可以去试试看，希望大家都能成功的实现小程序卡片左右滑动效果哦，请多多的关注微小乔。