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