前言
最近在項(xiàng)目開發(fā)中著洼，遇到一個(gè)令人頭疼的問題。當(dāng)一個(gè)容器能左右滑動(dòng)時(shí)宛瞄，手指在該容器上做上下滑動(dòng)的手勢(shì)頁面不會(huì)上下滾動(dòng)（在容器外圍上下滑動(dòng)是可以的逊拍，所以排除頁面的scroll問題），并且這個(gè)問題只會(huì)在ios上出現(xiàn)驰唬，安卓沒有顶岸。
通過查資料發(fā)現(xiàn)腔彰，原生的IOS scroll有這個(gè)問題，所以就使用了本文所講的better-srcoll來解決辖佣。下面來講講如何使用better-scroll來實(shí)現(xiàn)左右和上下滾動(dòng)霹抛。
環(huán)境準(zhǔn)備
- 安裝better-scroll
npm install --save better-scroll
2.引入better-scroll
import BScroll from "better-scroll"
實(shí)現(xiàn)左右滾動(dòng)
使用BScroll實(shí)例化之前必需要等待DOM渲染完成。
產(chǎn)生左右滾動(dòng)的條件是子盒子內(nèi)的寬度必須要大于父盒子的寬度卷谈，所以我們?cè)谟胋etter-scroll時(shí)杯拐，必須要先得到滾動(dòng)區(qū)域的尺寸和父盒子的尺寸，來計(jì)算出是否能滾動(dòng)世蔗。
下面是一個(gè)小demo
- html
<template>
<div ref="content" class="content"> // 父盒子--滾動(dòng)區(qū)域
<ul ref="child" class="child"> // 子盒子-內(nèi)容區(qū)域
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</template>
（1）class為content的div的父盒子端逼，在此區(qū)域內(nèi)滾動(dòng)，需要通過ref拿到DOM污淋。
（2）ul元素是子盒子顶滩，包含若干個(gè)li元素，可以通過li元素的寬度動(dòng)態(tài)進(jìn)行計(jì)算寸爆，也可以通過ref獲取dom
- css
<style lang="stylus" scoped>
.content{
touch-action: none
padding 15px
ul{
li{
width 90px
height 90px
display inline-block
background #eee
line-height 90px
text-align center
}
}
}
</style>
給li標(biāo)簽90px的寬度，確保子盒的寬度大于父盒子的寬度
3.使用better-scroll
import BScroll from 'better-scroll'
export default {
mounted () {
this.$nextTick(() => {
this.leftToRightScroll()
})
},
methods: {
leftToRightScroll () {
let liList = document.querySelectorAll('li')
let width = liList.length * liList[0].offsetWidth // 動(dòng)態(tài)計(jì)算出內(nèi)容區(qū)域的大小
this.$refs.child.style.width = width + 'px' // 修改子盒子區(qū)域的寬度
this.$nextTick(() => {
// 確保DOM已渲染
if (!this.scroll) {
this.scroll = new BScroll(this.$refs.content, {
startX: 0,
click: true,
scrollX: true,
scrollY: false,
eventPassthrough: 'vertical',
})
} else {
this.scroll.refresh() // dom發(fā)生改變會(huì)刷新
}
})
},
},
}
(1) 首先拿到所有的li元素的寬度赁豆，賦值給ul元素
(2) 生成BScroll實(shí)例仅醇，其中this.$refs.content就是父盒子的DOM，在此區(qū)域內(nèi)滾動(dòng)魔种。
-
效果圖
左右滾動(dòng)
實(shí)現(xiàn)上下滾動(dòng)
- html
<template>
<div ref="content" class="content"> // 父盒子--滾動(dòng)區(qū)域
<ul ref="child" class="child"> // 子盒子-內(nèi)容區(qū)域
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</template>
- css
<style lang="stylus" scoped>
.content{
margin-top 200px
height 200px
overflow hidden
touch-action: none
padding 15px
ul{
li{
width 90px
height 50px
background #eee
line-height 90px
text-align center
}
}
}
</style>
需要給父元素一個(gè)固定的高度析二，并且overflow屬性為hidden
- 使用better-scroll
mounted () {
this.$nextTick(() => {
let contentDom = this.$refs.content
this.scroll = new BScroll(contentDom, {})
})
},
4.效果圖
解決better-scroll連續(xù)兩次觸發(fā)點(diǎn)擊事件
使用better-scroll后可能會(huì)出現(xiàn)點(diǎn)擊事件發(fā)生兩次的情況，這時(shí)只需要在配置參數(shù)
this.scroll = new BScroll(this.$refs.content, {
startX: 0,
click: true, // 改為false
scrollX: true,
scrollY: false,
eventPassthrough: 'vertical',
})
click改為false就可以了务嫡。
想要了解更多參數(shù)及其使用方法請(qǐng)前往：better-scroll文檔地址
