码迷,mamicode.com
首页 > 其他好文 > 详细

better-scroll横向滚动、纵向滚动

时间:2020-05-31 11:31:00      阅读:116      评论:0      收藏:0      [点我收藏+]

标签:center   inittab   method   tle   rtx   add   ini   star   key   

// 在vue中使用

<div ref="tab" class="tab">
<ul ref="tabWrapper" class="tab_content">
<li v-for="(item, index) in posterList" ref="tabitem" :key="item.id" class="tab_item" @click="gotoBillList(item, index)">
<div :style="[{‘background‘:`url(${item.image}) no-repeat top center`},{‘background-size‘: ‘cover‘}]" class="imgBg"/>
<!-- <div class="imgTitle">{{ item.title }}</div> -->
</li>
</ul>
</div>
 
//js部分
import BScroll from ‘better-scroll‘
 
created() {
this.$nextTick(() => {
this.InitTabScroll()
})
},
methods: {
InitTabScroll() {
// 两个0.3表示左右padding,动态计算子元素tabWrapper的宽度
const width = 0.28 + 0.28 + 2.6 * this.posterList.length + (this.posterList.length - 1) * 0.2
// for (let i = 0; i < this.itemList.length; i++) {
// width += this.$refs.tabitem[0].getBoundingClientRect().width // getBoundingClientRect() 返回元素的大小及其相对于视口的位置
// }
this.$refs.tabWrapper.style.width = width + ‘rem‘
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()
}
})
},

better-scroll横向滚动、纵向滚动

标签:center   inittab   method   tle   rtx   add   ini   star   key   

原文地址:https://www.cnblogs.com/glfan/p/12996504.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!