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

你可能感兴趣的:(vue前端)