微信小程序界面设计_Vue的轮播图组件完成方法

日期:2021-01-08 类型:科技新闻 

关键词:小程序 活动,微信小程序demo,微信小程序游戏开发价格,手机小程序怎么做,视频播放微信小程序

Vue的轮播图组件实现方法       下面小编就为大家分享一篇Vue的轮播图组件实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

今天在上慕课老师fishenal的vue实战课程的时候,有一个轮播图组件实现,在跟着做的时候,自己也踩了一些坑。此外,在原课程案例的基础上,我加入了不同方向的滑动功能。

本文章采用Vue结合Css3来实现轮播图。

首先要了解的是Vue的动画原理。在vue中,如果我们要给元素设置动画效果,则需要使用一个 transition name="targetClassName" /transition 将相应的元素包裹住,如下:

 transition name="imgShouldMove" 
 img v-if="shouldShow" src="/1.jpg" 
 /transition 

之后,便可以在.imgShoudMove中设置动画属性了,如下:

.imgShouldMove-enter{ 
 transition: all 0.5s; 
.imgShouldMove-enter-active{ 
 transform:translateX(900px); 
} 

注意在HTML中,这里 img 有一个v-if="shoudShow"属性。shouldShow这个属性是在data(){}中设置的,当shouldShow从false-- true时(即img从无到突然出现时),Vue动画原理将动画分为了 shouldShouldMove-enter 和 imgShouldMove-enter-active 两个阶段。

我本人对其的理解为,其中 shouldShouldMove-enter 表示动画开始的初始状态, imgShouldMove-enter-active 这表示动画的终止状态。而动画的触发则是通过if-show引起的。

如下图

了解了这些之后,我就可以开始着手实现轮播图组件了。

首先是HTML代码:

 template 
 div @mouseenter="clearInv()" @mouseleave="runInterval()" 
 div 
 a :href="pics[currentIndex].href" rel="external nofollow" 
 transition v-bind:name="'carousel-trans-' + direction + '-old'" 
 !-- isShow: false - true
 取反后: true - false(从显示到消失) -- 
 img v-if="!isShow" :src="pics[currentIndex].src" 
 /transition 
 transition v-bind:name="'carousel-trans-' + direction " 
 !-- isShow: false - true -- 
 !-- 从消失到显示 -- 
 img v-if="isShow" :src="pics[currentIndex].src" 
 /transition 
 /div 
 h2 {{pics[currentIndex].title}} /h2 
 li v-for="(item, index) in pics" @click="goto(index)" : {{index + 1}} /li 
 /ul 
 div @click="goto(prevIndex)" i  /i /div 
 div @click="goto(nextIndex)" i  /i /div 
 /div 
 /template 

Script代码:

 script 
export default {
 pro凡科抠图:{
 pics:{
 type:Array,
 default:[]
 timeDelta:{
 type:Number,
 default:2000
 data () {
 return {
 currentIndex:0,
 isShow:true,
 direction:'toleft'
 computed:{
 prevIndex(){
 this.direction = 'toleft'
 if (this.currentIndex = 0) {
 return this.pics.length - 1
 return this.currentIndex - 1
 nextIndex(){
 this.direction = 'toright'
 if (this.currentIndex = this.pics.length - 1) {
 return 0
 return this.currentIndex + 1
 methods:{
 goto(index){
 this.isShow = false
 setTimeout(()= {
 this.isShow = true
 this.currentIndex = index
 },10)
 runInterval(){
 this.direction = 'toright'
 this.timer = setInterval(()= {
 this.goto(this.nextIndex)
 },this.timeDelta)
 clearInv(){
 clearInterval(this.timer)
 mounted(){
 this.runInterval()
 /script 

与动画相关的css代码如下

.carousel-trans-toright-enter-active,.carousel-trans-toright-old-leave-active{ 
 transition:all 0.5s; 
.carousel-trans-toright-enter{ 
 transform:translateX(940px); //新图片从右侧940px进入 
.carousel-trans-toright-old-leave-active{ 
 transform:translateX(-940px); //老图片向左侧940px出去 
.carousel-trans-toleft-enter-active,.carousel-trans-toleft-old-leave-active{ 
 transition:all 0.5s; 
.carousel-trans-toleft-enter{ 
 transform:translateX(-940px); //新图片从右侧940px进入 
.carousel-trans-toleft-old-leave-active{ 
 transform:translateX(940px); //老图片向左侧940px出去 
} 

---------------以下为解释说明-------------

注意:对于 img 需要放在 box 里面, box 需要设置为position:relative; 而 img 必须设置为position:absolute; 这步非常非常重要,否则每次莫名其妙的总是只有一张图片显示。

在每次切换的时候,都要触发goto()方法,将this.isShow先置false,10毫秒后,this.isShow置true。这时,html中的 transition 被触发,它与css相结合触发动画效果,持续时间为css属性中的transition所定的0.5s。

在向前、向后切换的时候,使用到了计算属性,在div.prevBtn以及div.nextBtn上,我们作了点击事件绑定,触发方法goto(),而传入的正是计算属性prevIndex, @click="goto(prevIndex)"

计算属性的设定方法如下:

computed:{ 
 prevIndex(){ 
 //经过一番计算过程得出result 
 return result //这个值即 template 中的prevIndex 
 }, 

每隔2秒自动滑动时,我们向left滑动,在data中,设定了变量 direction ,它的值要么为字符串'toleft',要么为'toright'。

我们在计算属性中对 this.direction 进行了设置,并在 template 中对相应的name进行了字符串拼接,如下

 transition v-bind:name="'carousel-trans-' + direction " 

在vue中,除了class和style可以传入对象、数组,其他的属性绑定必须进行字符串拼接。

以上这篇Vue的轮播图组件实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持凡科。