better-scroll的使用方法，动态创建dom使用better-scroll

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

better scroll 的页面结构为

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

            

        
        

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

在页面中要调用的地方

class="shop_box" ref="shopBox">

整体为：

 

（总结）：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
在这里面有详细的解说

转载于:https://www.cnblogs.com/haonanZhang/p/6958258.html