zoukankan      html  css  js  c++  java
  • better scroll在vue2移动端中点击事件触发两次

    注意:

      better-scroll会将点击事件去掉,如果滚动部分需要有点击事件,需要在参数里加上click:true。

      同时,在PC上或某些手机端,由于未成功将touchend事件move掉,点击事件会执行两次。

      better-scroll派发的event事件和原生js的event有属性上的区别,其中有一个属性为event._constructed。better-scroll派发的事件中event._constructed为true,原生点击事件中没有这个属性。

    如果在better-scroll滚动的页面,有click点击事件,需要判断

    此时在点击事件中,我也已经判断了event._constructed, 在移动端还是会点击两次

      methods: {
        toggleFavorite(event) {
          // console.log(event._constructed, window.location.search);
          if (!event._constructed) {
            return;
          }
    
          // console.log('qqq')
          this.favorite = !this.favorite;

    解决办法,需要查看创建better-scroll的逻辑,明白了,此时判断是否已经创建过scroll, 创建过后需要刷新scroll即可,不然创建多次scroll,会有多次点击

        _initScroll() {
          this.sellerScroll = new BSscroll(".seller", {
            click: true
          });
    
        },

    解决后

     _initScroll() {
          // console.log("aaa");
          // 判断是否有创建scroll
          if (!this.sellerScroll) {
            this.sellerScroll = new BSscroll(".seller", {
              click: true
            });
          } else {
            this.sellerScroll.refresh();
          }
        },
      watch: {
        // 监视数据,创建scroll
        sellers() {
          this.$nextTick(() => {
            this._initScroll();
       
          });
        }
      },
  • 相关阅读:
    babel的使用以及安装配置
    常见的浏览器兼容性问题与解决方案——CSS篇
    ES6入门——变量的解构赋值
    ES6入门——let和const命令
    第一个移动端项目
    向Github提交更改的代码
    MySQL安装配置
    HTTP 状态消息
    HTMl基础
    Shell 常用的命令
  • 原文地址:https://www.cnblogs.com/fsg6/p/14375689.html
Copyright © 2011-2022 走看看