vue + better-scroll 封裝成元件，橫向滾動

項目需要，需要個橫向滾動條，封裝成元件，資訊從父頁面傳遞，搞了一下午，貼代碼：

元件為last-play:

< template > < div > < svg class= "icon" aria-hidden= "true" slot= "icon" > < use xlink:href= "#icon-zuijinlaifang" ></ use > </ svg > < span >最近在玩 </ span > < div class= "tab" ref= "tab" > < div class= "tab_content" ref= "tabcontent" > < game_block class= "tab_item" v-for="( item, index) in lastGameList" ref= "tabitem" :gameinfo = 'item' > </ game_block > </ div > </ div >

< foot-guide ></ foot-guide > </ div > </ template >

< script > import { mapState } from "vuex"; import footGuide from 'src/components/footGuide'; import BScroll from 'better-scroll'; import game_block from 'src/components/gameBlock'; export default { name: 'last_play', data() { return { selected: 'game', activeIndex: 'game', }; }, components: { footGuide, game_block }, created () { this. $nextTick(() =>{ this. InitTabScroll(); }); //必須等dom元素挂載完下一幀才能管道$refs }, props: [ "lastGameList"], methods: { goSpecial( index){ console. log( 'jump to index:'+ index); }, InitTabScroll(){ console. log( this. lastGameList); let width= this. lastGameList. length * 80; this. $refs. tabcontent. style. width= width+ 'px'; console. log( width); this. $nextTick(() =>{ if (! this. scroll) { this. scroll= new BScroll( this. $refs. tab, { startX: 0, click: true, scrollX: true, scrollY: false, eventPassthrough: 'vertical' }) } else{ this. scroll. refresh(); } }); } }

} </ script >

< style lang= "scss" > .tab{ display: inline-block; width: 100%; height: 130px; overflow: hidden; } .tab_content{ text-align: 'center'; height: 130px; } .tab_item{ display: inline-block;

} .icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; margin-left: 10px; margin-right: 10px; } span{ font-size: 0.4rem; } </ style >

其中game_block 是封裝的另一個元件，lastGameList 是父頁面到子元件傳遞的資料

父頁面引用：

         < div style= "lastPlaydiv " >              < last_play :lastGameList = 'gameinfo' ></ last_play >          </ div >

有個坑就是：lastGameList 必須是數組，不能是json!!