vue2.0使用better-scroll

我的项目中有几个页面都有分页list，要上拉后加载数据，所以我就把这个插件单独封装了组件，如下图：

首先，明确这个组件需要传入的参数：
1，初始化的数据，也就是第一次进入页面就加载的数据，分页里page=1时
2，分页数据请求接口，
3，是否切换了list上面的select筛选条件(我的项目需求，不需要这可以不要)，
4，上面select切换后选中项的id(我的项目需求，不需要这可以不要)，
ok，基本需求明确，开始写组件，这里先说明四个参数名称：

初始化list数组：scrollList、
请求接口：scrollApiUrl、
是否切换select：changeSelectPage、(传这个参数是因为切换select后page页数要等于1)
select选中项：cityId

先看在父组件home.vue的引入吧，先心知肚明：

<template>
    <div class="home">
        <!-- select 我用的组件库是有赞的Vant-ui -->
        <van-cell 
        title="报警类型" 
        is-link 
        :value="city" 
        @click="showPicker = true"
        title-style="font-size: 15px"
        value-class="cellStyle"
        />
        <van-popup v-model="showPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            @cancel="showPicker = false"
            @confirm="onConfirm"
          />
        </van-popup>
        <div class="tableWrap">
            <table cellpadding="0" cellspacing="0" width="100%">
                <th>
                    <td>表号</td>
                    <td>余额</td>
                    <td>告警</td>
                    <td>通断</td>
                </th>
            </table>
        </div>
        <!-- 滚动组件 传入四个个参数：初始化list数组scrollList、请求接口scrollApiUrl、changeSelectPage，select选中项cityId-->
        <ScrollList 
          :scrollList='scrollList' 
          :scrollApiUrl='scrollApiUrl' 
          :changeSelectPage='changeSelectPage' 
          :cityId='cityId'>
        </ScrollList>
    </div>
</template>

<script>
import ScrollList from '../pages/chatScoll'   // 引入子组件
export default {
  name: 'home',
  data () {
    return {
        city: '',
        showPicker: false,
        columns: [],
        cityId: '',
        changeSelectPage: true,
        scrollList: [],
        scrollApiUrl: '/xxx/ssss',   // 后台接口
    }
  },
  components: {
        ScrollList
  },
  mounted () {
      this.getStationList()
      this.getStationInfo()
  },
  methods: {
    // 获取select list
    getStationList () {
         this.$get('/xxx/qqqq').then(res => {
             this.columns = res
             this.city = res[0].text
             this.cityId = res[0].value
             this.getStationInfo()
         })
    },
    // 获取数据源
    getStationInfo () {
         this.$get(this.scrollApiUrl, {stationId : this.cityId, page: 1, rows: 15}).then(res => {
             this.scrollList = []
             this.scrollList = res.rows
         })
    },
    // 切换select
    onConfirm(info) {
      this.city = info.text;
      this.showPicker = false;
      this.cityId = info.value
      // 切换select时 子组件页数page = 1
      this.changeSelectPage = !this.changeSelectPage
      this.getStationInfo()
    },
  }
}
</script>

<style scoped lang='less'>
.home{
    .tableWrap{
        padding: 0 15px;
        margin-top: 10px;
        table{
            th{
                background: rgba(148, 77, 241, .7);
                height: 30px;
                line-height: 30px;
                td{
                    display: inline-block;
                    min-width: 25%;
                    text-align: center;
                    float: left;
                    font-weight: normal;
                    color: #fff;
                }
            }
        }
    }
}
.cellStyle{
  color: rgb(12, 163, 143);
  font-size: 12px;
}
.van-icon{
  font-size: 14px;
}
</style>

下面是子组件chatScoll.vue的内容：

<template>
    <div class="chatScroll custTalk">
        <!-- better-scroll滚动组件 此组件对容器高度有要求，看style-->
        <div class="wrapper" ref="wrapper">
            <ul class="content chatList" ref="cont">
                <li v-for="(item, index) in scrollList" :key="index">
                    <!-- {{item}} -->
                    <span>假数据</span>
                    <span>www</span>
                    <span>lala</span>
                    <span>www</span>
                </li>
                <li>
                    <p>
                        {{scrollTips}}
                        <!-- <van-loading type="spinner" color="#eeeeee" /> -->
                    </p>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import Bscroll from "better-scroll";
export default {
  data () {
    return {
        myScroll: '',
        scrollTips: '使劲加载中...',   // 上拉时list下方的提示
        pages: 1,        // 当前页数
        pullOff: true,   // 上拉加载锁，防止数据没回来用户多次请求
    }
  },
  props: ['scrollList', 'scrollApiUrl', 'changeSelectPage', 'cityId'],   // 接收传入的四个参数
  mounted () {
  		// 初始化better-scroll，并选择使用上拉加载的方式
        //this.$nextTick(() => {        
                this.myScroll = new Bscroll(this.$refs.wrapper, {
                    scrollX: false,
                    scrollY: true,
                    pullUpLoad: {   // 上拉加载
                        threshold: 30, // 上拉距离超过30px触发事件
                    }
                });
        //})
        //scroll上拉加载 更多 
        this.myScroll.on('pullingUp', () => {
            console.log('上拉加载了')
            if (this.scrollList.length != 0 && this.scrollList.length > 15) {
                // 上拉锁
                if (this.pullOff) {
                    this.pages++
                }
                this.$get(this.scrollApiUrl, {page: this.pages, rows: 15, selectId: cityId}).then(res => {
                    this.pullOff = false
                    if (this.pages*15 > res.total) {
                        this.scrollTips = '- 还看，真没啦 -'
                    } else {
                        this.scrollTips = '使劲加载中...'
                        res.forEach(item => {
                            this.scrollList.push(item)
                        })
                        this.pullOff = true
                    }
                })
            } else {
                this.scrollTips = '- 还看，真没啦 -'
            }
           
            this.myScroll.finishPullUp(); // 事情做完，需要调用此方法告诉 better-scroll 数据已加载，否则下拉事件只会执行一次
        })
  },
  watch: {
  	  // 监听父组件select是否切换
      changeSelectPage: 'changeSelect'
  },
  methods: {
      // 父组件select若是切换则让page=1
      changeSelect (curVal, oldVal) {
          this.pages = 1
      }
  }

}
</script>

<style lang="less" scoped>
.chatScroll {
    height: 75%;
    width: 100%;
    .wrapper{    // 最外层组件必须指定一个高度
        width: 100%;
        overflow: hidden;
        border-bottom: 1px solid #eee;
        margin-top: 10px;
        height: 100%;
        .content{   // 这个容器高度 > .wrapper的高度时才会滚动
            font-size: 30px;
            position: relative;    
            padding: 0 15px;
            li{
                margin-top: 10px;
                height: 30px;
                line-height: 30px;
                font-size: 12px;
                background: rgba(102, 77, 241, 0.3);
                &>span{
                    display: inline-block;
                    float: left;
                    width: 25%;
                    text-align: center;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    color: #006569;
                }
                &:last-of-type{
                    background: transparent;
                    text-align: center;
                    color: rgb(219, 218, 218);
                }
            }
        }
    }
}
</style>

滚动原理如下图：

最后，放一个效果图：

做人，最重要的是开心嘛，der