better-scroll的使用方法

Posted 2020-09-21 haonanElva

移动端经常会用页面高度超过了手机屏幕的高度，但是有没有滚动条的出现这时候就用 better-scroll 这个插件， iscroll 是常用的但是这个组件没有人在维护了，导致很多的问题没有办法解决。

better scroll 的页面结构为

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

            </div>

        </div>
</div>        

第一层 div:
    高度固定比如是手机屏幕的高度，overflow-y:hidden;
第二层 div:
    高度不固定，只设置宽度 100%。
第三层 div: 
    数据部分，肯能有很多很多

 

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>

 

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

在要获取的dom元素上添加  

ref="shopBox"
这样在 js 中

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