vue better-scroll 的使用

短命女 2022-05-19 04:58 117阅读 0赞

# 1、下载 #

npm install better-scroll --save

# 2、引入  #

import BScroll from 'better-scroll'

# 3、使用 #

/*
                    文档地址 ： https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/
    
                    probeType:   滚动过程中会派发事件  0：不派发  1 :会截流  2 ：实时派发 3：不仅在屏幕滑动的过程中，而且在 momentum 滚动动画运行过程中实时派发 scroll 事件
                    startY : 纵轴方向初始化位置
                    startX : 横轴方向初始化位置
                    scrollX : true   开启横向滚动  默认值: false
                    scrollY : true   开启纵向滚动 默认值: true
                    freeScroll : true 同时开户横纵向
                    click : true  内容里是否要点击事件   默认值: false
                    dblclick : true   是否要双击事件   默认值: false
                */
                let config = {
                        probeType : 1,
                        click : true,
                    }
                    this.scroll = new BScroll(this.$refs.wrapper,config);
    
    
                    // 滚动监听
                    this.scroll.on('scroll', pos => {
                        this.$emit('listenScroll');
                    })
    
                // 手指放开后
                this.scroll.on('touchEnd', (pos) => {
                    if (pos.y > 50) {
                         // 下拉加载数据
                            
                    }
                    if (pos.y < (this.scroll.maxScrollY - 50)) {
                         //上拉加载数据
                            
                    }
                })
    
                //滚动停止后
                this.scroll.on('scrollEnd', (pos) => {
                    if (pos.y < (this.scroll.maxScrollY + 50) && !this.isLoading) {
                        //到底部自动加载数据
                        
                    }
                })
    
                // 开始滚动前判断
                if (this.beforeScroll) {
                    this.scroll.on('beforeScrollStart', () => {
                        this.$emit('beforeScroll')
                    })
                }

# 4、html #

# 5、css 要注意的地方是 wrapper 要有固定的高度，，见很多人都给了定位，如果不行就加个定位吧 #