Solution to click event failure when using better-scroll on vue mobile development

Recently I used vue to learn to develop mobile projects and used the better-scroll plug-in for scrolling.

When using the @click event in the component introduced into better-scroll, the click event fails. v-on:click, v-bind:click, and @click.native all work. However, I tried @touchstart and it works. I found that click: true is not set in the configuration of better-scroll. After setting it, the click event succeeds.

Later, when using vuex, I kept reporting

[vuex] unknown mutation type: changeCity

I just realized that I wrote mutations in the state in the store file, and I was so stupid that I cried. . .

The correct way to write it is as follows:

Encapsulation and use of vue better-scroll

I believe that many mobile projects use the better-scroll plug-in, which can make the scrolling of our pages less rigid and also make it easier for us to implement some functions such as anchors.

Note: This plugin only works if the height of the content you want to scroll is greater than the height of your parent box

First, install this plugin with npm

npm i better-scroll --save

Next, we encapsulate a Better component so that it can be reused globally

<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>   

Dynamic binding of allHeight is to make the height of the parent box always the height from the bottom of the page, which is more conducive to implementation through calculation.

Two methods are encapsulated at the same time. One is scroll, which is a pull-down refresh method, and touchEnd is a function triggered after the pull-down refresh. There are also many other methods, such as pull-up to load more, etc. You can check it in the official website document

Next, register this component globally in main.js

import Scroller from './components/content/Scroller'
Vue.component('Scroller',Scroller)

Use in other components

For example, if we want the content in the ul tag to have a scrolling effect, we can write it like this

 <Scroller>
 <ul>
 </ul>
</Scroller>

If you want to use encapsulation, you can communicate through props

<Scroller :handleToScroll="handleToScroll" :handleToTouchEnd="handleToTouchEnd">

In this way, the page will have this scrolling effect, but please note that it will cover many of our native methods, but there is also a corresponding solution, using its internal properties. For example, the anchor point jump of the page

I wrote a method in the encapsulated component to make the y-axis move with

  methods: {
     handleToScrolltop(y){
       this.scroll.scrollTo(0,y)
     }
   },

How to use it?

By calling this method on the page you want to use

handleToScrolltop(), put the corresponding offsetTop in the brackets

The above is my personal experience. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.