如何使用better-scroll

[yaogengzhu]

结构方面存在一个bug

如何使用上拉刷新的功能。使用better-scroll插件就可以解决一切问题。

mounted(){
    this.axios.get('/api/movieOnInfoList?cityId=10').then( res =>{
      // console.log(res.status)
      // 作出判断数据是否获取成功 
      if (res.status) {
        this.movieList = res.data.data.movieList
      }
    })

// this.$nextTick()  作用：$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM
    this.$nextTick(() =>{
      // console.log('pk')
      new BScroll(this.$refs.wrapper,{})
    } )
  }

对于better-scoll 可以有很多配置 。

但是本项目存在一个bug，结构的问题，暂时不使用这个插件了

[yaogengzhu]

bug已经修复。

修复bug 之后，我们将better-scroll抽离成组件，并且注册为全局组件。代码如下：

<template>
    <div class="box1" ref="box1">
        <slot></slot>
    </div>
</template>

<script>
//  引入better-scroll  
import BScroll from 'better-scroll'
export default {
    name:"scroller",
    data(){
        return {

        }
    },
    mounted(){
        // 实例化better-scroll 
        new BScroll(this.$refs.box1)
    }
}
</script>

<style scoped>
    .box1{
        height: 100%;
    }
</style>

注册全局组件

// 注册一个全局组件 
import scroller from  #'@/components/scroller'
Vue.component('scroller',scroller)

使用方式！！！

  <scroller>
      <ul>
        <li v-if="flag" style="text-align:center">{{ msg }}</li>
        <li class="box" v-for="item in movieList" :key="item.id" @tap="change">
          <div class="img">
            <img :src="item.img | imgFormat('128.180')" alt>
          </div>
          <div class="info">
            <h2>
              {{ item.nm }}
              <img src="@/assets/max.png" v-if="item.version" alt>
            </h2>
            <p>
              影评：
              <span>{{ item.sc !==0?item.sc:'暂无评分' }}</span>
            </p>
            <p>主演: {{ item.star }}</p>
            <p>{{ item.showInfo }}</p>
          </div>
          <div class="buy">
            <button>购买</button>
          </div>
        </li>
      </ul>
    </scroller>

将要滚动的区域包裹起来～