I. Use of better-scroll

1, installation

npm install better-scroll -S

2, use

<template>
  <div class="goods">
    <div class="menu-wrapper" ref="menuWrapper">
      <ul>
        <li v-for="(item,index) in goods" :key="index" class="menu-item">
          <span class="text border-1px">
            <span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>
            {{item.name}}
          </span>
        </li>
      </ul>
    </div>
    <div class="foods-wrapper" ref="foodsWrapper">
      <ul>
        <li v-for="(item,index) in goods" :key="index" class="food-list">
          <h1 class="title">{{item.name}}</h1>
              <div class="icon">
                <img :src="item.icon" alt />
              </div>
              <div class="content">
                <h2 class="name">{{item.name}}</h2>
                <p class="desc">{{item.description}}</p>
                <div class="extra">
                  <span class="count">Monthly sale{{item.sellCount}}share</span>
                  <span>Favorable rate{{item.rating}}%</span>
                </div>
                <div class="price">
                  <span class="now">￥{{item.price}}</span>
                  <span v-show="item.oldPrice" class="old">￥{{item.oldPrice}}</span>
                </div>
              </div> 
         </li>
      </ul>
    </div>
  </div>
</template>
<script>
import BScroll from "better-scroll";
const ERR_OK = 0;
export default {
  data() {
    return {
      goods: {}
    };
  },
  created() {
    this.classMap = ["decrease", "discount", "special", "invoice", "guarantee"];
    this.$http.get("/api/goods").then(res => {
      console.log(res);
      let result = res.data;
      if (result.errno == ERR_OK) {
        this.goods = result.data;
        this.$nextTick(() => {  //To initialize the scroll after the data request succeeds
          this._initScroll();
        });
      }
    });
  },
  methods: {
    //  Initialize scroll
    _initScroll() {
      console.log("this.$refs.foodsWrapper--->", this.$refs.foodsWrapper);
      console.log("this.$refs.menuWrapper--->", this.$refs.menuWrapper);
      this.meunScroll = new BScroll(this.$refs.menuWrapper, {});
      this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {});
    }
  }
};
</script>
<style lang="stylus" scoped>
@import '../../common/stylus/mixin'
@import '../../common/stylus/app'
</style>

II. Notes

1. To initialize the scroll after the data request returns, we need to put the encapsulated scroll method into the $nextTick call

2. In order to achieve scrolling pages or content sections, there can only be one tag (not more than one tag side by side). For example:

3. When better-scroll does not work, check to see if transition s appear in the following figure. If not, the element is not retrieved.

If so, print out the initialization results first to see if the following three fields are valid: HasVertical Scroll is true, scroller Height and wrapper Height are greater than 0, when HasVertical Scroll is false, and scroller Height and wrapper Height are both greater than 0, which means that you have successfully initialized, but there is not enough data to slide. Phenomenon (you can put multi-point data to verify)