第一步:
通常來講輪播圖都是基礎的組件你須要把它的這個組建用在你想要的組件當中,因此輪播圖咱們通常按照子組件來書寫它npm
因此特徵:1.slot,這樣的話父組件包裹的dom就會被安裝在這個插槽當中了 2.props設置你想要的輪播狀態
e.g. <script> export default{ props:{ loop:{ type:Boolean, default:true }, autoPlay:{ type:Boolean, default:true } interval:{ type:Number, default:本身設置自動輪播時間 } } } </script>
由於咱們要橫向滾動因此咱們須要使用better-scroll
初始化better-scroll
要在mounted裏初始化
methods裏調用方法
better-scroll裏含有一個屬性叫作sliderGroup,能夠直接在你想要使用輪播圖子組件的地方寫上ref=‘sliderGroup’方便調用
這樣子就能夠使用this.$refs.sliderGroup.children去肯定你scroll中的的元素的個數dom
第二步:
那麼父組件,哪裏想要使用它,哪裏寫上這個子組件的標籤名
而後在子組件的標籤名單中嵌入你想要讓子組件slot渲染的dom
能夠使用v-for= ‘名字’來嵌入想要渲染的內容對象,這個對象能夠是你想要從別人那爬來的數據,也能夠是你本身設置的圖片
你還能夠在裏面添加使得能夠點擊圖片跳轉連接ide
記住須要在data當中書寫return對象,return的對象是你想要渲染在dom中的內容,或者是你想要本身添加的圖片oop
e.g. data(){ return : 名字 type; } 或者 data() { return{ sliders:[你要加的圖片連接]; } }
記住若是你使用了swiper或者better-scroll這種別人已經寫好的庫,要npm加上他們而且在對應組件中import他們this