• 官方地址 ：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

<div class="wrapper" ref="bscroll">
  <ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>
  <!-- 这里可以放一些其它的 DOM，但不会影响滚动 -->
</div>

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

<li v-for="(item, i) in items" :class="{active:i==n}" @click="Change(item,i)">
   {{item.value}}
</li>

js

<script>
    export default {
        name: "login",
        data(){
            return {
                items: [{
                    name: '1',
                    value: '用户',
                }, {
                    name: '2',
                    value: '商家'
                }],
                n:0
            }
        },
        methods: {
            radioChange:function (item,i) {
                  this.n=i;         //控制选项与数据同步
            }
        }
    }
</script>

css

.active{}

多选

html

<ul class="box">
    <li v-for="c,index of cities"
    :class="{checked:c.bOn}"
    @click="checkbox(index)">{{c.city}}</li>
</ul>

js

<script>
    export default {
        name: "login",
        data(){
            return {
                cities : [
                {city:"北京",bOn:false},
                {city:"上海",bOn:false},
                {city:"重庆",bOn:false},
                {city:"广州",bOn:false},
                {city:"西安",bOn:false}
                ]
            }
        },
        methods: {
            radioChange:function (item,i) {
                  this.n=i;         //控制选项与数据同步
            }
        }
    }
</script>

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