手機瀏覽器下better-scroll中click事件,連結無效的問題
阿新 • • 發佈:2019-01-07
現在大多數vuejs . 專案都使用better-scroll
但是大多數出現一個問題,就是在大的div裡面的a 連結或者click事件都不用了
這是 html 部分
<div ref="wrapper" class="list-wrapper">
<div class="setting-list" ref="setting" >
<div class="setting-list-li" v-for="(value,key) in theme">
<router-link :to="`/theme/${value.c_type}`" @click.native="change" class="item">
</router-link>
</div>
</div>
</div>
這是js部分
import BScroll from 'better-scroll'
export default {
mounted () {
this.$nextTick(function () {
setTimeout(() => {
const options = {
scrollY: false , // 因為scrollY預設為true,其實可以省略
scrollX: true,
mouseWheel: true,
click: true,
taps: true
}
this.scroll = new BScroll(this.$refs.wrapper, options)
}, 20)
})
}
}
因為 better-scroll 會阻止原生的 click 事件,我們可以設定 tap 為 true,它會在區域被點選的時候派發一個 tap 事件