vue開發(fā)移動端使用better-scroll時click事件失效的解決方案
最近使用vue學習開發(fā)移動端的項目，使用了better-scroll插件做滾動。
在引入better-scroll的組件中使用@click事件的時候，點擊事件失效，v-on:click、v-bind:click、@click.native都不行，試了一下@touchstart是卻是可以的，發(fā)現(xiàn)better-scroll的配置中沒有設置click：true，設置過之后click事件成功。
后來在使用vuex的時候一直報
[vuex] unknown mutation type: changeCity
才發(fā)現(xiàn)在store文件中將mutations寫在了state里面，被自己蠢哭了。。。
正確寫法如下：
vue better-scroll的封裝以及使用
相信做一些移動端項目，很多都用了better-scroll這個滾動插件，它能讓我們頁面的滾動變得不那么僵硬，同時也能讓我們實現(xiàn)一些錨點等功能更簡單
注:這個插件只有當你要滾動的內(nèi)容高度大于你的父盒子的高度才行
首先就npm安裝這個插件了
npm i better-scroll --save
接著我們封裝一個Better組件，這樣在全局都能復用
<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>
動態(tài)綁定allHeight是為了讓父盒子的高度永遠為它到頁面最底部的高度，通過計算出來，這樣更有利于實現(xiàn)
同時封裝兩個方法，一個scroll是下拉刷新方法，touchEnd則是下拉刷新之后觸發(fā)的函數(shù)，也有很多其他的方法，例如上拉加載更多等等，可以去官網(wǎng)文檔中查看
接下來全局注冊這個組件，在main.js中
import Scroller from './components/content/Scroller'
Vue.component('Scroller',Scroller)
在其他組件使用
比如我們想讓ul標簽里面的內(nèi)容有滾動效果,就可以這樣寫
<Scroller> <ul> </ul> </Scroller>
想用封裝的方法，通過props通信即可
<Scroller :handleToScroll="handleToScroll" :handleToTouchEnd="handleToTouchEnd">
這樣頁面就有這個滾動效果了，但是要注意，它會覆蓋我們很多的原生方法，但是他對應的也有解決方法，用它內(nèi)部的屬性,我舉個例子，就比如頁面的錨點跳轉(zhuǎn)
我在封裝的組件里寫了一個方法,就是讓y軸隨著移動
methods: {
handleToScrolltop(y){
this.scroll.scrollTo(0,y)
}
},
怎么使用呢？
在要使用的頁面通過調(diào)用這個方法
handleToScrolltop(),括號里面放上對應的offsetTop即可
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
在使用Vue2開發(fā)移動端頁面的時候,需要做一個效果,實現(xiàn)的方案是背景漸變,但是想要實現(xiàn)這個效果就必須進行定位,我的背景高度需要在一個十分恰當?shù)奈恢?但是我的圖片會隨著移動端頁面的變化而發(fā)生高度的變化,為什么會變化？所以本文介紹了Vue中獲取圖片高度的方法2024-08-08
這篇文章主要介紹了vue3使用echarts并封裝echarts組件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
在日常開發(fā)中,Vue 項目中的表單布局和樣式優(yōu)化是一個重要的環(huán)節(jié),通過合理的布局與美觀的樣式設計,不僅可以提升用戶體驗,還能增加頁面的實用性和觀賞性,本文將總結幾個常見的表單和表格布局優(yōu)化的技巧,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了vue3如何獲取綁定頁面dom元素問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要給大家介紹了關于Vue項目中最新用到的一些實用小技巧，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-11-11
詳解Vue 2中的? initState 狀態(tài)初始化
這篇文章主要介紹了詳解Vue 2中的initState狀態(tài)初始化，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-08-08
本文主要介紹了Vue3實現(xiàn)選中對話框帶箭頭效果的方法,首先通過后臺獲取數(shù)據(jù)進行遍歷,利用ts代碼判斷選中下標與循環(huán)游標是否一致以改變樣式,感興趣的朋友一起看看吧2024-10-10
antd?vue中,如何在form表單中的自定義組件使用v-decorator
antd?vue中,在form表單中的自定義組件使用v-decorator問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了validator自定義驗證及易錯點，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-02-02
關于element?ui的菜單default-active默認選中的問題
這篇文章主要介紹了關于element?ui的菜單default-active默認選中的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05