Vueではbetter-scrollを使用して、輪播図コンポーネントを実現します。

better-scrollは何ですか？
better-scrollは、モバイル端末（PCに対応しています）の様々なスクロールシーンのニーズを重点的に解決するプラグインです。その核心は参考にするiscrollの実現で、そのAPIの設計は基本的にiscrollに互換して、iscrollの基礎の上でまたいくつかfeatureを拡張して、いくつかの性能の最適化をしました。
better-scrollは元のJSに基づいて実現され、いかなる枠組みにも依存しない。コンパイルしたコードのサイズは63 kbで、圧縮後は35 kbで、gzip後は9 kbしかなく、非常に軽いJS libです。
今日私たちはそれを利用して横スクロールを実現します。デモは以下の通りです
まず需要を整理します。

は、非同期要求されたピクチャデータに基づいて、ローミング図を示すことができる。

は、自動的に再生するか、循環的に再生するか、自動再生間隔を制御することができる。

は、現在の再生ページを提示することができる。

 
Mockデータ
デモですので、ネットで何枚かの写真を探してjson形式に書きました。データはアナログインタフェースのデータに使います。ここではmock.jsを使いました。Axios設置方法は以下の通りです。npm install mockjsnpm install --save axios vue-axiosaxiosの使用方法は多くなく、mockデータを簡単に説明します。mockフォルダの下に、jsonフォルダを新規作成し、jsonデータファイルを配置します。新規index.jsエクスポートインターフェースを作成します。axiosを使ってインターフェースを要請することができます。

[
	"https://img3.mukewang.com/szimg/5df8852609e0762d12000676-360-202.png",
 "https://img1.mukewang.com/szimg/5d9c62fb0907ccf012000676-360-202.png",
 "https://img3.mukewang.com/5aeecb1d0001e5ea06000338-360-202.jpg"
]

const Mock = require('mockjs')

Mock.mock('/slider', 'get', require('./json/slider.json'))

基礎部品：sleder.vue
ルーニーマップコンポーネントを抽象化して、isLoop、isAutoPlay、interval属性制御ルーレット図を受信する。mountedメソッドから順番を呼び出すと、考えが分かります。

set Slider Width（）では、先に取得してから表示層とピクチャ小包層の高さを設定する。

initDotts()は、画像によってレイヤー要素の個数に合わせて配列を設けて円を置く。

init Slider()は、better-scrollを初期化する。

atoPlay（）設定自動再生。

<template>
 <div class="slider-apply" ref="slider"> <!--     -->
 <div class="slider-group" ref="group"> <!--         -->
 <slot></slot>   <!--          -->
 </div>
 <div class="dots">   <!--      -->
 <div class="dot" v-for="(item, index) in dots" :key="index" :class="currentIndex===index?'active':''"></div>
 </div>
 </div>
</template>

<script type='text/ecmascript-6'>
import BScroll from 'better-scroll'
export default {
 data () {
 return {
 dots: [],
 currentIndex: 0 /*       */
 }
 },
 props: {
 isLoop: { /*      */
 type: Boolean,
 default: true
 },
 isAutoPlay: { /*      */
 type: Boolean,
 default: true
 },
 interval: { /*      */
 type: Number,
 default: 2000
 }
 },
 mounted () { /* mounted  dom   ，20ms     */
 setTimeout(() => {
 this.setSliderWidth()
 this.initDots()
 this.initSlider()
 if (this.isAutoPlay) {
 this.autoPlay()
 }
 }, 20)
 },
 methods: {
 setSliderWidth () { /*        ，        */
 const clientWidth = this.$refs.slider.clientWidth
 let sliderWidth = 0
 this.children = this.$refs.group.children
 for (let i = 0; i < this.children.length; i++) {
 this.children[i].style.width = clientWidth + 'px'
 sliderWidth += clientWidth
 }
 if (this.isLoop) { /*                */
 sliderWidth += clientWidth * 2
 }
 this.$refs.group.style.width = sliderWidth + 'px' /*         */
 },
 initDots () {
 this.dots = new Array(this.children.length)
 },
 initSlider () {
 this.slider = new BScroll(this.$refs.slider, {
 scrollX: true, /*      */
 scrollY: false,
 snap: { /*        */
  loop: this.isLoop,
  threshold: 0.3,
  speed: 400
 }
 })
 this.slider.on('scrollEnd', () => {
 const pageIndex = this.slider.getCurrentPage().pageX /*        ，       */
 this.currentIndex = pageIndex
 if (this.isAutoPlay) {
  clearTimeout(this.timer) /*         ，         */
  this.autoPlay()
 }
 })
 },
 autoPlay () {
 this.timer = setTimeout(() => {
 this.slider.next(400)
 }, this.interval)
 }
 },
 destroyed () { /*         */
 clearTimeout(this.timer)
 }
}
</script>

<style lang="stylus" scoped>
.slider-apply
 position relative  //  dots    
 height 200px
 width 100%   // slider-apply            
 overflow hidden  //       
 border-radius 5px
 .dots
 position absolute
 bottom 10px
 left 50%
 transform translate(-50%, 0) //   
 display flex
 .dot
 margin 0 10px
 height 7px
 width 7px
 background #fff
 border-radius 50%
 .active   //   dot  
 width 15px
 border-radius 50% 5px
</style>

応用コンポーネント：sleder-apple.vue
alider-apple.vueの使い方によって、自分のプロジェクトに適用できます。

<template>
 <div class="slider-wrapper">
 <Slider v-if="showSlider"> <!-- showSlider            ，  better-scroll        -->
 <div v-for="item in imageList" :key="item" class="slider-item">
 <img :src="item" class="img">
 </div>
 </Slider>
 </div>
</template>

<script type='text/ecmascript-6'>
import Slider from 'base/slider'
export default {
 data () {
 return {
 imageList: [], //     
 showSlider: false //   slider   
 }
 },
 created () {
 this.getImages() //     
 },
 methods: {
 getImages () {
 this.axios.get('/slider').then((res) => {
 this.imageList = res.data
 this.showSlider = true
 }).catch((err) => {
 console.log(err)
 })
 }
 },
 components: {
 Slider
 }
}
</script>

<style lang="stylus" scoped>

.slider-wrapper
 margin 0 auto
 height 200px //          
 width 500px //          ，      
 background #000
 border-radius 5px
 .slider-item
 float left //       
 width 100%
 overflow hidden
 text-align center
 .img
 height 200px
 width 100%

</style>

上記の手順がよく読めなかったら、私のgithubの中からソースコードhttps://github.com/Gesj-yean/vue-demo-collectionを見つけられます。
締め括りをつける
ここで、Vueの中でbetter-scrollを使って、輪播図のコンポーネントを実現する文章を紹介します。これに関連して、もっと多いのはvue輪播図のコンポーネントの内容です。私達の以前の文章を検索してください。または、下記の関連記事を引き続きご覧ください。これからもよろしくお願いします。