本人微信公众号：前端修炼之路，欢迎关注。
需要解决的问题
近几日一直在看怎样制作微信小程序的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中运行，这样做影响也不大。如果需要的话，可以从下面的代码中获取。
微信小程序 TabBar 图标生成
下载
微信小程序 TabBar 图标生成技能，使用 Python PIL 绘制简约几何图标（未选中灰、选中绿），自动写入 app.json 配置。适用于“生成 tabBar 图标”、“底部菜单栏图标”、“tab 图标”等指令。
我们先来看下代码：
<template>
<view>
<button>跳转到第二屏</button>
<swiper>
<swiper-item>
<view>
<image></image>
</view>
</swiper-item>
<swiper-item>
<view>
<image></image>
</view>
</swiper-item>
<swiper-item>
<view>
<image></image>
</view>
</swiper-item>
<swiper-item>
<view>
<image></image>
</view>
</swiper-item>
</swiper>
</view></template><script>
export default {
data() {
return {
item_id: 'slide2',
animate_0: 'animated swing',
animate_1: '',
animate_2: '',
animate_3: ''
}
},
onLoad() {
},
methods: {
changeSwiper(event){ // 清空除了当前swiper以外的所有动画
let current = event.detail.current; // 当前页下标
this.item_id = 'slide'+current; // 这里必须记录，否则只能跳转一次
switch (current){
case 0:
this['animate_1'] = this['animate_2'] = this['animate_3'] = '';
break;
case 1:
this['animate_0'] = this['animate_2'] = this['animate_3'] = '';
break;
case 2:
this['animate_0'] = this['animate_1'] = this['animate_3'] = '';
break;
case 3:
this['animate_0'] = this['animate_1'] = this['animate_2'] = '';
break;
}
},
changeFinish(event){ // swiper动画完成之后，给当前swiper添加动画效果
let current = event.detail.current;
switch(current){
case 0:
this['animate_0'] = 'animated swing';
break;
case 1:
this['animate_1'] = 'animated shake';
break;
case 2:
this['animate_2'] = 'animated tada';
break;
case 3:
this['animate_3'] = 'animated heartBeat';
break;
}
},
goChange(){
this.item_id = 'slide1';
}
}
}
</script><style>
@import '../../common/animate.css';
.content {
text-align: center;
.content-swiper{
height: 100vh;
image{
height: 200upx;
width: 200upx;
margin-top: 200upx;
}
}
}
</style>
-
首先
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.wxml-->
<view>
<button>跳转到</button>
<swiper>
<swiper-item>
<image></image>
</swiper-item>
<swiper-item>
<image></image>
</swiper-item>
<swiper-item>
<image></image>
</swiper-item>
</swiper></view>
//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协议打开。
其中生成了两个版本的代码，方便大家参考。
推荐教程：《微信小程序》
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
