better-scroll插件 api

Posted 2020-10-08 zhengyan_web

Vue中的better-scroll插件

在需要的文件中添加
import BScorll from \'better-scroll\';
引用的示例代码:
let scroll = new BScroll(Dom对象, {//options
  startX: 0,
  startY: 0
})

Vue获得Dom对象方法,
<div v-el:food-wrapper></div>//定义对象
this.$els.foodWrapper//获取对象

(Vue 更新数据时是异步的,所以在数据未加载完全之前,Bscroll无法获取目标内容的高度,所以会导致无法滚动的现象)

为了解决上面的问题,运用Vue的nextTick();
(简单说，因为DOM至少会在当前tick里面的代码全部执行完毕再更新。所以不可能做到在修改数据后并且DOM更新后再执行，要保证在DOM更新以后再执行某一块代码，就必须把这块代码放到下一次事件循环里面，比如setTimeout(fn, 0)，这样DOM更新后，就会立即执行这块代码。)

// DOM 还没有更新
Vue.nextTick(function () {
  // DOM 更新了
})

问题: 
PC页面时,点击不会被 better-scroll阻止事件,初始化,给 better-scroll派发事件,使移动端拥有点击事件,因此切换到PC端时,点击事件会被执行两次,

方法:在点击时,传 $event变量,Better-scroll插件中的 event事件和原生 js的 event有属性上得区别,Better-scroll插件派发的事件时event_constructed为true,原生点击事件是没有这个属性的,

selectMenu(index,event){
    if(!event._constructed){//如果不存在这个属性,则不执行下面的函数
        return;
    }
}

 

参数说明：

• startX: 0 开始的X轴位置
• startY: 0 开始的Y轴位置
• scrollY: true 滚动方向为 Y 轴
• scrollX: true 滚动方向为 X 轴
• click: true 是否派发click事件，通常判断浏览器派发的click还是betterscroll派发的click，可以用event._constructed，若是bs派发的则为true
• directionLockThreshold: 5
• momentum: true 当快速滑动时是否开启滑动惯性
• bounce: true 是否启用回弹动画效果
• selectedIndex: 0 wheel 为 true 时有效，表示被选中的 wheel 索引
• rotate: 25 wheel 为 true 时有效，表示被选中的 wheel 每一层的旋转角度
• wheel: false 该属性是给 picker 组件使用的，普通的列表滚动不需要配置
• snap: false 该属性是给 slider 组件使用的，普通的列表滚动不需要配置
• snapLoop: false 是否可以无缝循环轮播
• snapThreshold: 0.1 用手指滑动时页面可切换的阈值，大于这个阈值可以滑动的下一页
• snapSpeed: 400, 轮播图切换的动画时间
• swipeTime: 2500 swipe 持续时间
• bounceTime: 700 弹力动画持续的毫秒数
• adjustTime: 400 wheel 为 true 有用，调整停留位置的时间
• swipeBounceTime: 1200 swipe 回弹 时间
• deceleration: 0.001 滚动动量减速越大越快，建议不大于0.01
• momentumLimitTime: 300 符合惯性拖动的最大时间
• momentumLimitDistance: 15 符合惯性拖动的最小拖动距离
• resizePolling: 60 重新调整窗口大小时，重新计算better-scroll的时间间隔
• preventDefault: true 是否阻止默认事件
• preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ } 阻止默认事件
• HWCompositing: true 是否启用硬件加速
• useTransition: true 是否使用CSS3的Transition属性
• useTransform: true 是否使用CSS3的Transform属性
• probeType: 1 滚动的时候会派发scroll事件，会截流。2滚动的时候实时派发scroll事件，不会截流。 3除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件

Events 事件

let scroll = new BScroll(document.getElementById(\'wrapper\'),{
   probeType: 3
})

scroll.on(\'scroll\', (pos) => {
  console.log(pos.x + \'~\' + posx.y)
  ...
})

 

Events 列表

• beforeScrollStart 滚动开始之前触发
• scrollStart 滚动开始时触发
• scroll 滚动时触发
• scrollCancel 取消滚动时触发
• scrollEnd 滚动结束时触发
• flick
• refresh
• destroy 销毁better-scroll实例时触发

派发滚动

let scroll = new BScroll(document.getElementById(\'wrapper\'))
scroll.scrollTo(0, 500)
...


-----------------------------------

1、vue2 中如何使用 better-scroll

首先安装better-scroll，然后在配置文件中查看

"dependencies": {
    "vue": "^2.2.6",
    "vue-router": "^2.3.1",
    "vue-resource": "^1.3.3",
    "better-scroll": "^0.1.7"
  },

然后在要用的地方引用这个组件

import BScroll from \'better-scroll\';

接下来初始化这个组件，在methods 里面将这个写为一个方法

_initScroll () {
                this.shopBoxScroll = new BScroll(this.$refs.shopBox, {
                    // better-scroll 会将点击事件去掉，要在这里开启，同时点击在PC 会被执行两次，要在这里控制
                    click: true
                });
            }

然后在函数钩子里面调用这个方法，因为mvvm 框架的数据是一步的所以要在函数周期里面使用

created () {
            this.$nextTick(() => {
                this._initScroll();
            });
        },

在页面中要调用的地方

<div class="shop_box" ref="shopBox">

整体为：

<script>
    import starT from \'../star/star.vue\';
    import BScroll from \'better-scroll\';

    export default {
        props: {
            seller: {
                type: Object
            }
        },
        created () {
            this.$nextTick(() => {
                this._initScroll();
            });
            this.classMap = [\'min\', \'discount\', \'guarantee\', \'invoice\', \'special\'];
        },
        methods: {
            _initScroll () {
                this.shopBoxScroll = new BScroll(this.$refs.shopBox, {
                    // better-scroll 会将点击事件去掉，要在这里开启，同时点击在PC 会被执行两次，要在这里控制
                    click: true
                });
            }
        },
        components: {
            \'v-star\': starT
        }
    };
</script>

 

（总结）：1、在 vue2中如何获取dom 结构

在要获取的dom元素上添加  

ref="shopBox"
这样在 js 中

$refs.shopBox便可以获取dom 元素。
有时候经常汇报better-scroll 找不到孩子元素原因是：
html 中 ref="" 中间不要用空格尽量用驼峰命名

2、移动端经常会有这种场景

数据是横行滚动的，这个时候也是better-scroll 只不过这回改成横向滚动的就行

this.picScroll = new BScroll(this.$refs.pic_scroll, {
                            // better-scroll 会将点击事件去掉，要在这里开启，同时点击在PC 会被执行两次，要在这里控制
                            click: true,
                            scrollX: true,
                            eventPassthrough: \'vertical\'
                        });

 

3、动态DOM使用 better-scroll
　　在vue 中如果使用 v-show 控制一个dom的显示隐藏并且这个 dom 中要有 better-scroll 的效果，在v-show 控制显示的地方调用初始化better-scroll的函数便可以，
但是一定要放到this.$nextTick 里面，因为 vue 中 dom都是异步加载。

 // 筛选
            chooseScreenShop () {
                // tab 高两
                this.screenTabtHight = !this.screenTabtHight;
                // 去除其它高亮显示
                this.classification = false;
                this.sortHightLight = false;
                // 筛选
                if (this.screenTabtHight === true) {
                    this.screenShopList = true;
                    this.$nextTick(() => {
                        this._init();
                    });
                    // 其他的隐藏
                    this.sortShopList = false;
                    this.classificationBox = false;
                } else {
                    this.screenShopList = false;
                }
                this.dailog();
            },