better-scroll 上下拉加载

• 官方地址 ：https://ustbhuangyi.github.io/better-scroll/#/zh

安装

NPM

better-scroll 托管在 Npm 上，执行如下命令安装：

npm install better-scroll --save

接下来就可以在代码中引入了，webpack 等构建工具都支持从 node_modules 里引入代码：

import BScroll from 'better-scroll'

如果是 ES5 的语法，如下：

var BScroll = require('better-scroll')

vue-ui（可视化界面安装-基于vue-cli3）

image

应运（列表滚动）

html

  

    
...
    
...
    ...
  
  

script（上下拉）

import BScroll from 'better-scroll'
    export default {
        name: "scroll",
        data(){
            return {
                list: []      //列表数据
            }
        },
        //进入页面初始化
        mounted() {            
            setTimeout(()=>{
                this.initScroll();
            },20)
        },
        methods: {
            getData:function () {
                //此次用来加载数据（对应加载不同page下数据）
                 this.page=this.page+1;
                /*发送请求*/
            },
            initScroll(){
                if(!this.$refs.bscroll){
                    return ;
                }
                this.scroll = new BScroll(this.$refs.bscroll,{
                    click:true,
                    scrollbar:true,
                    //上拉
                    pullUpLoad: {             
                        threshold: 50
                    }
                    /*
                    //下拉
                     pullDownRefresh:{
                        threshold:50,
                        stop:20
                    }
                    */
                });
                //上拉
                this.scroll.on('pullingUp',()=>{
                    this.getData();
                })
                 /*
                //下拉
                this.scroll.on('pullingDown',()=>{
                this.getData();
                })
                 */
            },
        },
        watch:{
            list:{
                handler:function(){
                    this.$nextTick(()=>{
                        if(this.scroll) {
                            //上拉
                            this.scroll.finishPullUp(); 
                            /* 
                            //下拉
                            this.scroll.finishPullDown();
                            */
                            this.scroll.refresh();
                        }
                    })
                },
                deep:true
            }
        },
        computed: {}
    }

css

.wrapper{
    width: 100%;
    overflow: hidden;
    position: absolute;
    top:0;
    bottom:0;
}
.sk-bag-scroll{
    width: 100%;
    height: auto;
}
.bag-item{
    width: 100%;
    display: flex;
}

单选

html

   {{item.value}}

js

css

.active{}

多选

html

    
{{c.city}}

js

css

body{margin:0;}
.box{ margin:150px 150px;}
ul{
    padding:0; 
    list-style:none;
}
li{
    width:50px; height:30px; display:inline-block;
    text-align:center; line-height:30px;
    cursor:pointer;margin-left:5px;
}
li:before{ 
    display:inline-block; width:10px; height:10px; 
    line-height:10px; content:""; border:1px #000 solid; 
    margin-right:2px; transition:all 0.3s linear;
}   
li.checked:before{ 
    background-color:#0CF; 
    border:1px #fff solid;
}
li.checked{color:#0CF;}

借鉴网址：https://blog.csdn.net/Number7421/article/details/81002729