插件:better-scroll 及在vue项目中的使用

1、简介

作用：是一款解决移动端各种滚动场景需求的插件。可以很好的和 Vue 配合使用。

相对于原始的滚动，better-scroll在移动端页面上拉或者下拉刷新时能够带来较好的体验

 如下面的两个页面，“正在热映”使用better-scroll插件，在上拉或者下拉的时候显得要灵活一点，体验感更好，“即将上映”没有使用该插件，在上下拉动的时候就比较生硬。

2、滚动原理

纵向滚动条：当容器内部内容区域的高度大于外部容器的高度时，出现纵向滚动条

横向滚动条：当容器内部内容区域的宽度大于外部容器的宽度时，出现横向滚动条

外部容器设置：overflow:auto，或者overflow:scroll，且内部内容的高或者宽超出外部容器的高或者宽，就会出现纵向或者横向滚动条，我们可以通过滚动的方式，看到容器内部的内容。如下面的图中外部的容器高度低于内部的内容区域，在外部容器上就会出现滚动条，通过滚动可以查看content内容。

3、使用

安装：

npm install better-scroll -save

 引入：

import BScroll from 'better-scroll'

例子：在练手一个vue项目时的组件代码，展示效果如“1、简介”中动图所示

<template>
   <div class="movie_body" ref="movie_body">
        <ul>
            <li v-for="item in movieList" :key="item.id" >
                <div class="pic_show"   @tap="handleToDetail"><img :src="item.img | setWH('128.180')"></div>
                <div class="info_list">
                    <h2>{{item.nm}}</h2>
                    <p>观众评 <span class="grade">{{item.sc}}</span></p>
                    <p>主演: {{item.star}}</p>
                    <p>{{item.showInfo}}</p>
                </div>
                <div class="btn_mall">
                    购票
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
import BScroll from 'better-scroll';
export default {
    name:'NowPlaying',
    data(){
        return {
            movieList:[]
        }
    },
    mounted(){
        this.$axios.get("/ajax/movieOnInfoList").then(res => {
            var movieList = res.data.movieList;
            this.movieList = movieList;
            // 为了保证数据完全渲染完成之后成功使用better-scroll，vue提供了$nextTick()方法，
            // 保证数据赋值完成之后，界面在渲染完毕之后触发方法中的回调函数，
            // 即可以进行new BScroll()操作
            this.$nextTick(() => {
                var scroll = new BScroll(this.$refs.movie_body , {
                    tap : 'tap', // 对应使用到标签中@tap="handleToDetail"
                    probeType : 1,  // 需要进行配置的参数可以百度 按需填写
                });
            });

        }).catch(e => {
            console.log("失败"+e);
        })
    },
    methods : {
        handleToDetail(){
            console.log("handleToDetail");
        }
    }
}

</script>

<style scoped>
#content .movie_body{ flex:1; overflow: auto;}
.movie_body ul{ margin:0 12px;}
.movie_body ul li{ margin-top:12px; display: flex; align-items:center; border-bottom: 1px #e6e6e6 solid; padding-bottom: 10px;}
.movie_body .pic_show{ width:64px; height: 90px;}
.movie_body .pic_show img{ width:100%;}
.movie_body .info_list { margin-left: 10px; flex:1; position: relative;}
.movie_body .info_list h2{ font-size: 17px; line-height: 24px; width:150px; overflow: hidden; white-space: nowrap; text-overflow:ellipsis;}
.movie_body .info_list p{ font-size: 13px; color:#666; line-height: 22px; width:200px; overflow: hidden; white-space: nowrap; text-overflow:ellipsis;}
.movie_body .info_list .grade{ font-weight: 700; color: #faaf00; font-size: 15px;}
.movie_body .info_list img{ width:50px; position: absolute; right:10px; top: 5px;}
.movie_body .btn_mall , .movie_body .btn_pre{ width:47px; height:27px; line-height: 28px; text-align: center; background-color: #f03d37; color: #fff; border-radius: 4px; font-size: 12px; cursor: pointer;}
.movie_body .btn_pre{ background-color: #3c9fe6;}
</style>

代码说明：

外部容器movie_body

内部内容区域即ul标签部分

<div class="movie_body" ref="movie_body">

<ul>....</ul>

</div>

下载完第三方插件之后在script标签中引入better-scroll

<script>

import BScroll from 'better-scroll';

</script>

使用

var scroll = new BScroll(this.$refs.movie_body , {

                     click : ture, 

                     tap : 'tap',    // 移动端的触屏点击事件 对应标签中：@tap="handleToDetail"

                    probeType : 1,   // 需要进行配置的参数可以百度 按需填写

});

样式部分，外部容器设置overflow: auto;

 .movie_body{flex:1; overflow: auto;}

.movie_body ul{ margin:0 12px;}

注意点：

• 在vue中使用better-scroll要保证容器的高度小于内容的高度
• 还要保证等待数据渲染完成之后再触发better-scroll提供的一些功能，可以使用延迟定时器setTimeout()延迟，或者使用this.$nextTick()方法，等待DOM渲染完后再执行滑动操作。
• 内容要保证都在一个标签内，不能有多个并行的包含内容的标签，否则滑动可能会失效

<div class="wrapper"> 
    <div>
        内容...
    </div>
    <div>
        内容...
    </div>
</div>


// 应该这样
<div class="wrapper"> 
    <div>
        <div>
            内容...
        </div>
        <div>
            内容...
        </div>
    <div>
</div>