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!!