作者:嘿可爱无罪 | 来源:互联网 | 2020-09-15 04:38
近几日一直在看怎样制作微信小程序的swiper轮播图,因为我既需要生成小程序的代码,也需要生成H5版代码,如果编写两套效率会比较低下,所以选择了uni-app。
本人微信公众号:前端修炼之路,欢迎关注。
需要解决的问题近几日一直在看怎样制作微信小程序的swiper轮播图。因为我既需要生成小程序的代码,也需要生成H5版代码,如果编写两套效率会比较低下,所以选择了uni-app。
uni-app
已经在基础组件swiper中已经直接支持了轮播动画。
我主要需要解决的是以下几个问题:
- ①在swiper中怎样添加css3流行的
animate.css
动画。 - ②添加好后如果滑动了轮播图,怎样能保证下一屏的动画不自动播放。
- ③怎样能实现轮播图的无限循环播放。
- ④怎样能实现,当用户点击一个按钮之后,可以跳转到指定的
swiper-item
中。也就是跳转到指定的屏。 - ⑤小程序和H5版的代码会生成一个头部,在H5版中需要隐藏掉导航栏。
以下就是我整个制作的思路过程,仅供参考。另外,代码是uni-app
开发,所以在小程序中和H5中测试都没有问题。另外为了方便小程序
开发同学了解,会提供小程序
版代码和uni-app
代码供参考。
代码实现在H5开发中经常使用的就是animate.css。在微信中自然是支持的,因为微信会对上传的小程序有大小限制,所以这里我使用了一个极简化的animate.css
,其中删掉了很多-webkit-animation
开头的css3。因为我们只需要在小程序和H5中运行,这样做影响也不大。如果需要的话,可以从下面的代码中获取。
我们先来看下代码:
- 首先
uni-app
支持sass。在css中直接引入了简洁版animate.css
。问题① - 之后通过查看文档,发现
circular
这个参数可以实现类似H5页面使用swiper.jsloop
参数的功能。这里我掉到了uni-app
和微信小程序
文档描述的坑中。因为一直在找loop
(循环)这个参数,我甚至都以为实现不了这个无限循环的功能了呢。原来小程序
中这个参数叫做circular
(圆形)。o(╯□╰)o 问题③ - 因为我这里要实现一个竖屏的滑动效果,所以将参数
vertical
设置为true
。 - 在
uni-app
中,通过change
事件,可以监听每一个轮播屏的改变。在这个事件中,我记录的当前屏的下标current
。然后将非当前屏的全部css3动画取消掉。最后在animationfinish
事件中,当swiper
滑动动画结束后,给当前屏的元素添加css3动画。问题② - 在
uni-app
中有个current-item-id
参数,代表当前所在滑块的 item-id
。这个文档我看了好久,才明白。原来是需要在swiper-item
中指定上item-id
。然后当用户点击事件触发时,修改绑定到current-item-id
上的值即可。我的代码初始化时指定到了item-id
为slide2
这一屏上。问题④ - 最后一个问题时
uni-app
中隐藏掉H5导航栏。只需要在pages.json
中设置titleNView
为false
即可。
微信小程序代码
//index.js
const app = getApp()
Page({
data: {
currentId: 0,
animate_0: 'swing',
animate_1: '',
animate_2: ''
},
onLoad: function() {
},
goChange: function() {
this.setData({
currentId: 2
});
},
changeSwiper: function(event) {
let current = event.detail.current;
switch (current) {
case 0:
this.setData({
animate_1: '',
animate_2: ''
});
break;
case 1:
this.setData({
animate_0: '',
animate_2: ''
});
break;
case 2:
this.setData({
animate_0: '',
animate_1: ''
});
break;
}
},
changeFinish: function(event) {
let current = event.detail.current;
switch (current) {
case 0:
this.setData({
animate_0: 'swing',
});
break;
case 1:
this.setData({
animate_1: 'shake',
});
break;
case 2:
this.setData({
animate_2: 'tada',
});
break;
}
}
})
我将代码托管到了腾讯云开发者平台,需要的话可以参考。在代码目录unpackage/dist/build/h5
中,就是生成好的H5版页面。需要注意的是,要部署到web服务器使用,不支持本地file协议打开。
其中生成了两个版本的代码,方便大家参考。
推荐教程:《微信小程序》
以上就是小程序swiper轮播CSS3动画及跳转到指定swiper-item的使用的详细内容,更多请关注 第一PHP社区 其它相关文章!