轮播图

来源：互联网发布：linux串口登陆编辑：程序博客网时间：2024/06/05 05:35

1.定义轮播组件 slider.vue

1.1结构

<div class="slider" ref="slider"><div class="slider-group" ref="sliderGroup">      <div v-for="item in recommends"class="slider-item">         <a :href="item.linkUrl">           <img :src="item.picUrl" alt="">         </a>      </div> </div> <div class="dots"> </div> </div>.slider{width 100%overflow hiddenposition relative}.slider .slider-group{width 100%white-space nowrapheight 100%}.slider .slider-group .slider-item{float: leftbox-sizing: border-boxoverflow: hiddentext-align: center}.slider .slider-group .slider-item  a{display blockwidth 100%height 100%text-decoration noneoverflow hidden}.slider .slider-group .slider-item img{display blockwidth 100%height 100%}.slider .pic-dots{position absoluteheight 20pxline-height 20pxbottom 8pxleft 0right  0text-align center}.slider .pic-dot{display inline-blockwidth 16pxheight: 16pxborder-radius 50%margin-left 4pxbackground lightgraycolor white}.slider .pic-dots  .pic-active{display inline-blockwidth 16pxheight: 16pxborder-radius 50%margin-left 4pxbackground purplecolor white}

1.2参数

export default{props:{            // 循环        loop:{            type: Boolean,            default:true        },        // 自动轮播        autoPlay:{            type: Boolean,            default:true        },        // 时间间隔        interval:{            type: Number,            default:4000        },        // dataSource        recommends:{            type:Array,            default:[],        }    }}

2.使用home.vue

2.1引入

import Slider from '../slider/slider.vue'

2.2注册

export default{components:{Slider}}

2.3使用

// :recommends向组件传递数据 v-if网络加载完成渲染数据<slider :recommends="recommends" v-if="recommends.length"></slider>

定义数据源

//全局变量data(){ return {    recommends:[]  }  }//网络数据赋值全局变量getRecommend().then((res) => {   alert(res)   if(res.code === 0){      this.recommends = res.data.slider;    }})

3.BScroll使用

3.1安装

"dependencies": {  "better-scroll": "^0.1.15"},

3.2引用
```
import BScroll from 'better-scroll'
```

3.3初始化

_initSlider(){       this.slider = new BScroll(this.$refs.slider,{            scrollX:true,            scrollY:false,            momentum:false,            snap:true,            snapLoop:true,            snapThreshold:0.3,            snapSpeed:400,            click:true         });}

3.4事件监听

this.slider.on('scrollEnd',()=>{  let pageIndex = this.slider.getCurrentPage().pageX  this.currentIndex = pageIndexn-1})

3.5自动轮播

  mounted(){     setTimeout(()=>{       if (this.autoPlay){           this._paly()       }     },20)  },    _paly() {      let pageIndex = this.currentIndex + 1;      if (this.loop){          pageIndex = pageIndex + 1      }      this.timer = setTimeout(()=>{        this.slider.goToPage(pageIndex,0,2000)      }, 2000)    }          //slider滚动图片结束的事件       this.slider.on('scrollEnd',() =>{           let pageIndexn = this.slider.getCurrentPage().pageX;           this.currentIndex = pageIndexn-1;           if(this.autoPlay){             //销毁计时器             clearTimeout(this.timer)           }           this._paly();       })

4指示器

    <div class="pic-dots">      <span class="pic-dot" v-for="(item,index) in dots" :class="{'pic-active': currentIndex === index}">        {{index+1}}      </span>    </div>

阅读全文

0 0