有待解决的问题，今天南京小程序开发安优网络来分析最近几天，我一直在研究如何制作微信小程序的滑动旋转贴图。因为我需要同时生成小程序代码和H5版本代码。如果我编写两组代码，效率会很低，所以我选择uni-app。
uni-app基本组件滑动器中直接支持轮播动画。
如何添加在滑动animate.css动画中流行的CSS3 。
（2）如果在添加旋转贴图后滑动动画，如何确保动画的下一个屏幕不会自动播放？
（3）如何实现旋转图的无限循环。
（4）如何实现？当用户单击一个按钮时，他可以跳到指定的按钮。swiper-item介质。那就是跳到指定的屏幕。
_Small程序和H5版本的代码将生成一个标题，在H5版本中需要隐藏导航栏。
以下是我制作思路的全过程，仅供参考。另外，代码是uni-appDevelopment，因此在小程序和H5中进行测试不是问题。另外，为方便起见，Small program发展学生的理解并提供Small program版本代码和uni-app代码以供参考。
代码实现
Anmate。CSS常用于H5开发中。当然，在Weichat中受支持，因为Weichat会限制上载的applet的大小，因此在这里我使用一个非常简化的小程序。animate.css其中许多已被删除。-webkit-animationCSS3开头。因为我们只需要在小程序和H5中运行，这不会产生太大影响。如有必要，可以从以下代码中获取它。
让我们首先看一下代码：
<template>
<view class="content">
<button type="primary"@tap="goChange"> jump to screen 2 </button>
<swiper class="content-swiper" :vertical="true" :indicator-dots="true" :autoplay="false" :interval="3000" :duration="1000" @change="changeSwiper" @animationfinish="changeFinish" :current-item-id="item_id" circular="true">
<swiper-item item-id="slide0">
<view class="swiper-item">
<image :class="animate_0"></image>
</view>
</swiper-item>
<swiper-item item-id="slide1">
<view class="swiper-item">
<image :class="animate_1"></image>
</view>
</swiper-item>
<swiper-item item-id="slide2">
<view class="swiper-item">
<image :class="animate_2"></image>
</view>
</swiper-item>
<swiper-item item-id="slide3">
<view class="swiper-item">
<image :class="animate_3"></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: {
ChangeeSwiper (event) {// Clear all animations except the current swiper
Let current = event. detail. current; // current page subscript
This. item_id ='slide'+ current; // This must be recorded here, otherwise it can only be jumped once.
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;
}
},
After the change Finish (event) {// swiper animation is completed, add animation effects to the current 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 lang="scss">
@import '../../common/animate.css';
.content {
text-align: center;
.content-swiper{
height: 100vh;
image{
height: 200upx;
width: 200upx;
margin-top: 200upx;
}
}
}
</style>
第一uni-app支持萨斯。简版直接在CSS中引入animate.css。问题1。
然后，通过查看文档，您可以看到circular此参数使类似的H5页面可以使用swiper。JS loop函数的参数。我跌倒了。uni-app并且Wechat applet在文件中描述的坑中。因为我一直在寻找它。loop（循环）这个参数，我什至认为无法实现这个无限循环的功能。原始Small program此参数称为circular（圆形）。O（）o 问题3
因为我想在这里实现垂直屏幕的滑动效果，所以将这些参数vertical设置为true。
在“ uni-app通过change事件传递”中，您可以收听广播屏幕中的所有更改。在这种情况下，我记录了当前屏幕的下标。current。然后非当前屏幕将取消所有CSS3动画。最后animationfinish一个事件当swiper滑动动画结束后，将CSS3动画添加到当前屏幕的元素中。问题2。
stay uni-app其中之一是current-item-id代表当前滑块的参数item-id。我在阅读文档很长时间之前才了解它。最初需要swiper-item在中指定item-id。然后当用户单击事件以触发时，将绑定修改为current-item-id上面的值即可。当它被初始化指定我的代码item-id通过slide2在该屏幕上。问题4
最后一个问题uni-app隐藏H5导航栏。仅需要由“ 是” pages.json设置。titleNViewfalse
微信小部件代码
<!--index.wxml-->
<view class="container">
<button bindtap='goChange'> jump to </button>
<swiper vertical="true" circular="true" current="{{currentId}}" indicator-dots="true" bindchange="changeSwiper" bindanimationfinish="changeFinish">
<swiper-item>
<image src='../../static/uni.png' class='animated {{animate_0}}'></image>
</swiper-item>
<swiper-item>
<image src='../../static/uni.png' class='animated {{animate_1}}'></image>
</swiper-item>
<swiper-item>
<image src='../../static/uni.png' class='animated {{animate_2}}'></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页面。应当注意，不支持将本地文件协议部署到网站服务器。生成了两个版本的代码供您参考。
本文地址：
http://www.njanyou.cn/web/2751.html
Tag：
专业服务：
南京网站制作,
南京网站制作公司,
南京网站建设公司
联系电话：025-65016872
上一篇：
南京网站建设分享为您的企业选择合适的营销公司的4个技巧
下一篇：
南京网站建设是如何用SEO写作
