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

better scroll 的页面结构为

     
        
      
                        
       
            
       
        
      
     
        第一层 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();            });        },

在页面中要调用的地方

整体为：

 

（总结）：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();            },

 

better-scroll 官网地址为：https://www.npmjs.com/package/better-scroll 在这里面有详细的解说