輪播圖組件

<template>
    <div class="slider" ref="slider">
        <div class="slider-group" ref="sliderGroup">
    //這裏的<slot></slot>插槽表示裏面的內容可以由引用這個輪播圖組件的推薦組件來插入  只需要在<slider></slider>標簽裏面插入內容就可以把slot標簽替換掉
            <slot></slot>
        </div>
        <
 
div class="dots">
           
        </div>
    </div>
</template>

推薦頁面組件

<template>
    <div class="recommend">
        <div class="recommend-content">
            <!-- 因為我們的recommend是通過異步拿到的 可能會有延時 但是如果不加上v-if的話 我們可能在沒有拿到數據的情況下就
                把插槽插入進去了 那麽slider.vue裏面的mounted()也就執行了
            
 
-->
            <div class="slider-wrapper" v-if="recommend.length">
                <slider>
                    <!-- 填寫插槽 -->
                    <div v-for="(item,index) in recommend" :key="index">
                        <a :href="item.linkUrl">
                            <img :src="item.picUrl">
                        </a>
                    </div>
                </slider>
            </div>
            <div class="recommend-list">
                <h1 class="list-title">熱門歌單推薦</h1>
                <ul></ul>
            </div>
        </div>
    </div>
</template>
<script>

    import Slider from 
 
‘../../base/slider/slider.vue‘
    import {getRecommend} from ‘../../api/recommend.js‘
    import { ERR_OK } from ‘../../api/config.js‘

export default {
    data(){//為了將實例裏面的輪播圖數據與dom相關  要有一個data()方法
        return {
            recommend:[]
        }

    },
    created(){//一般在這個生命鉤子裏面加載數據
        this._getRecommend()
    },
    methods:{
        _getRecommend(){
            getRecommend().then((res)=>{//這個res就是我們抓取到的數據對象 因為getRecommend()方法返回的是一個promise對象  如果promise對象裏面執行resolve()成功了 那麽就會執行then裏面的方法
                if(res.code===ERR_OK){
                    // console.log(res.data.slider)
                    this.recommend=res.data.slider
                }
            })

            }
        },
    components:{
　　　　 //註冊輪播圖組件
        Slider
    }
}
</script>

輪播圖組件

<script>

 

//引入better-scroll插件
import BScroll from ‘better-scroll‘

//引入的這個方法是判斷元素有沒有傳入該方法的類名  如果有的話就直接返回 如果沒有的話就加上該類名 在輪播圖組件中  添加的類名是.slider-item 這個類名的作用是讓輪播圖浮動 在一行顯示    
import {addClass} from ‘../../common/js/dom.js‘

export default {
    data(){
        return {
           dots:[],//頁面上的小點  將實例裏面的dots數據與dom相關 需要有data方法  

            //定義當前是第幾頁
            currentPageIndex:0    
        }
    },
    props:{
        loop:{
            type:Boolean,
            default:true
        },
        autoPlsy:{
            type:Boolean,
            default:true
        },
        interval:{//設置輪播時間間隔
            type:Number,
            default:4000
        }
    },

    //什麽時候初始化better-scroll呢？
    //如果better-scroll插件有問題可能是渲染時間（如數據還沒加載完頁面就渲染了）或者頁面高度和寬度不對
    //所以我們要在mouted()中調用獲取輪播圖

    mounted(){

        //知識點：通常我們要保證dom成功渲染的時候可以加個延時 
        //可以用this.nextstick()
        //也可以用setTineout()

        setTimeout(()=>{//可以延遲20ms 因為一般瀏覽器加載需要17ms
            this._setSliderWidth(); //設置輪播圖的寬高等數據

            // 這裏要在前面渲染好  不然後面獲取到的小圓點的數量就是已經經過better-scroll插件復制過的數目

            this._initDots();
            this._initSlider();
            
        },20)

        //因為上面有個插槽slot在recommend.vue中插入數據 能夠在slider.vue組件中渲染出來
        //因為我們mouted()裏面的方法是異步的 所以可能在操作dom的時候還沒有渲染出來  瀏覽器就操作了
        //所以我們在這裏加個延時 就可避免此問題

        //我們還要思考一個問題：就是我們mounted()的時候 slot裏面的元素有沒有 在推薦組件裏面判斷一下v-if="recommend.length"即可
    
},
    methods:{
        _setSliderWidth(){
       
        //獲取頁面的dom元素的方法  this.$refs.名字

            this.children=this.$refs.sliderGroup.children
            let width=0
            let sliderWidth=this.$refs.slider.clientWidth
            console.log(‘sliderWidth‘,sliderWidth);//375
            for(let i=0;i<this.children.length;i++){
                let child=this.children[i];
                //給每一個dom元素添加類名為slider-item
                addClass(child,‘slider-item‘)

                //設置每一個child的寬度  每個child的寬度就等於總容器的寬度
                child.style.width=sliderWidth+‘px‘

                //總的圖片的寬度 這裏後面一定不能加上‘px‘了  否則就是字符串的相加了
                //就拿不到正確的數值了
                width+=sliderWidth
    
                // console.log(‘width‘,width)
                 
            }

            if(this.loop){//如果要做到無縫滾動的話 其實是在兩側加上了兩張圖片的寬度
                        //所以總的寬度就等於width+=2*sliderWidth  因為這裏是用
                        //let 聲明的child  考慮到作用域問題  所以在{}用2倍的sliderWidth比較合適
                        //sliderWidth就等於每張圖片的寬度

                width+=2*sliderWidth;
               
            }

            this.$refs.sliderGroup.style.width=width+‘px‘
            // console.log(this.$refs.sliderGroup)
            console.log(‘width....‘,width)
            
        },
        //初始化輪播圖
        _initSlider(){
            this.slider=new BScroll(this.$refs.slider,{
               scrollX:true,
               scrollY:false,
               momentum:false,
               snap: {
                    loop: this.loop,
                    threshold: 0.3,
                    speed: 400
               }
            })
        },

        //初始化dots
        _initDots(){
            this.dots=new Array(this.$refs.sliderGroup.children.length)
        }
    }
}
</script>

Vue實現音樂播放器（七）：輪播圖組件（二）