vue開(kāi)發(fā)移動(dòng)端使用better-scroll時(shí)click事件失效的解決方案
最近使用vue學(xué)習(xí)開(kāi)發(fā)移動(dòng)端的項(xiàng)目，使用了better-scroll插件做滾動(dòng)。
在引入better-scroll的組件中使用@click事件的時(shí)候，點(diǎn)擊事件失效，v-on:click、v-bind:click、@click.native都不行，試了一下@touchstart是卻是可以的，發(fā)現(xiàn)better-scroll的配置中沒(méi)有設(shè)置click：true，設(shè)置過(guò)之后click事件成功。
后來(lái)在使用vuex的時(shí)候一直報(bào)
[vuex] unknown mutation type: changeCity
才發(fā)現(xiàn)在store文件中將mutations寫(xiě)在了state里面，被自己蠢哭了。。。
正確寫(xiě)法如下：
vue better-scroll的封裝以及使用
相信做一些移動(dòng)端項(xiàng)目，很多都用了better-scroll這個(gè)滾動(dòng)插件，它能讓我們頁(yè)面的滾動(dòng)變得不那么僵硬，同時(shí)也能讓我們實(shí)現(xiàn)一些錨點(diǎn)等功能更簡(jiǎn)單
注:這個(gè)插件只有當(dāng)你要滾動(dòng)的內(nèi)容高度大于你的父盒子的高度才行
首先就npm安裝這個(gè)插件了
npm i better-scroll --save
接著我們封裝一個(gè)Better組件，這樣在全局都能復(fù)用
<template>
<div class="wrapper" ref="wrapper" :style="{height:allHeight}">
<slot></slot>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
data() {
return {
allHeight:''
}
},
props:{
handleToScroll:{
type:Function,
default:function(){}
},
handleToTouchEnd:{
type:Function,
default:function(){}
}
},
methods: {
handleToScrolltop(y){
this.scroll.scrollTo(0,y)
}
},
mounted() {
var scroll = new BScroll(this.$refs.wrapper,{
tap:true,
probeType:1
})
this.scroll = scroll
scroll.on('scroll',(pos)=>{
this.handleToScroll(pos)
})
scroll.on('touchEnd',(pos)=>{
this.handleToTouchEnd(pos)
})
let dangqian = this.$refs.wrapper.offsetTop
let zongaodu = document.documentElement.clientHeight
let all = zongaodu-dangqian
this.allHeight = all +"px"
},
}
</script>
<style>
</style>
動(dòng)態(tài)綁定allHeight是為了讓父盒子的高度永遠(yuǎn)為它到頁(yè)面最底部的高度，通過(guò)計(jì)算出來(lái)，這樣更有利于實(shí)現(xiàn)
同時(shí)封裝兩個(gè)方法，一個(gè)scroll是下拉刷新方法，touchEnd則是下拉刷新之后觸發(fā)的函數(shù)，也有很多其他的方法，例如上拉加載更多等等，可以去官網(wǎng)文檔中查看
接下來(lái)全局注冊(cè)這個(gè)組件，在main.js中
import Scroller from './components/content/Scroller'
Vue.component('Scroller',Scroller)
在其他組件使用
比如我們想讓ul標(biāo)簽里面的內(nèi)容有滾動(dòng)效果,就可以這樣寫(xiě)
<Scroller> <ul> </ul> </Scroller>
想用封裝的方法，通過(guò)props通信即可
<Scroller :handleToScroll="handleToScroll" :handleToTouchEnd="handleToTouchEnd">
這樣頁(yè)面就有這個(gè)滾動(dòng)效果了，但是要注意，它會(huì)覆蓋我們很多的原生方法，但是他對(duì)應(yīng)的也有解決方法，用它內(nèi)部的屬性,我舉個(gè)例子，就比如頁(yè)面的錨點(diǎn)跳轉(zhuǎn)
我在封裝的組件里寫(xiě)了一個(gè)方法,就是讓y軸隨著移動(dòng)
methods: {
handleToScrolltop(y){
this.scroll.scrollTo(0,y)
}
},
怎么使用呢？
在要使用的頁(yè)面通過(guò)調(diào)用這個(gè)方法
handleToScrolltop(),括號(hào)里面放上對(duì)應(yīng)的offsetTop即可
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue使用z-tree處理大數(shù)量的數(shù)據(jù)以及生成樹(shù)狀結(jié)構(gòu)
這篇文章主要介紹了Vue使用z-tree處理大數(shù)量的數(shù)據(jù)以及生成樹(shù)狀結(jié)構(gòu)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
在Vue3中可以使用ref函數(shù)來(lái)創(chuàng)建一個(gè)響應(yīng)式的變量,通過(guò)將ref函數(shù)應(yīng)用于一個(gè)組件實(shí)例,我們可以獲取到該組件的實(shí)例對(duì)象,這篇文章主要給大家介紹了關(guān)于vue3?ref獲取組件實(shí)例的詳細(xì)圖文教程,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了ant?design?vue的form表單取值方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
Vue el-table表頭上引入組件不能實(shí)時(shí)傳參解決方法分析
這篇文章主要介紹了Vue el-table表頭上引入組件不能實(shí)時(shí)傳參解決方法，總的來(lái)說(shuō)這并不是一道難題，那為什么要拿出這道題介紹？拿出這道題真正想要傳達(dá)的是解題的思路，以及不斷優(yōu)化探尋最優(yōu)解的過(guò)程。希望通過(guò)這道題能給你帶來(lái)一種解題優(yōu)化的思路2022-11-11
Vue3監(jiān)聽(tīng)reactive對(duì)象中屬性變化的方法
在 Vue 3 中,如果你想監(jiān)聽(tīng) reactive 對(duì)象中的某個(gè)屬性發(fā)生的變化,你可以使用 watch 函數(shù)進(jìn)行監(jiān)聽(tīng),watch 函數(shù)允許你觀察 reactive 對(duì)象的某個(gè)屬性或者整個(gè)對(duì)象,所以本文給大家介紹了Vue3監(jiān)聽(tīng)reactive對(duì)象中屬性變化的方法,需要的朋友可以參考下2024-08-08
Vue開(kāi)發(fā)之watch監(jiān)聽(tīng)數(shù)組、對(duì)象、變量操作分析
這篇文章主要介紹了Vue開(kāi)發(fā)之watch監(jiān)聽(tīng)數(shù)組、對(duì)象、變量操作,結(jié)合實(shí)例形式分析了vue.js使用Watch針對(duì)數(shù)組、對(duì)象、變量監(jiān)聽(tīng)相關(guān)操作技巧,需要的朋友可以參考下2019-04-04
Vue.js監(jiān)聽(tīng)select2的值改變進(jìn)行查詢方式
這篇文章主要介紹了Vue.js監(jiān)聽(tīng)select2的值改變進(jìn)行查詢方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue中路由跳轉(zhuǎn)的多種方式(和$router下路由跳轉(zhuǎn)的那幾個(gè)方法的區(qū)別)
Vue.js是一款流行的前端JavaScript框架,它提供了多種方式來(lái)實(shí)現(xiàn)路由跳轉(zhuǎn),本文給大家分享vue中路由跳轉(zhuǎn)的幾種方式（和$router下路由跳轉(zhuǎn)的那幾個(gè)方法的區(qū)別）,感興趣的朋友一起看看吧2023-11-11
某些情況下,我們?nèi)匀恍枰苯釉L問(wèn)底層?DOM?元素,下面這篇文章主要給大家介紹了關(guān)于Vue3中操作dom的四種方式,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
vue如何在style標(biāo)簽中使用變量(數(shù)據(jù))詳解
在我們編寫(xiě)css樣式中是不能直接使用vue data中的變量的,下面這篇文章主要給大家介紹了關(guān)于vue如何在style標(biāo)簽中使用變量(數(shù)據(jù))的相關(guān)資料,需要的朋友可以參考下2022-09-09