vue - 浅谈better-scroll的使用及注意事项

心已赠人 2021-10-01 02:32 283阅读 0赞

### 一、better-scroll的使用 ###

##### 1、安装 #####

npm install better-scroll -S

##### 2、使用 #####

<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">月售{
       {item.sellCount}}份</span>
                      <span>好评率{
       {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(() => {  //要在数据请求成功之后再初始化滚动
              this._initScroll();
            });
          }
        });
      },
      methods: {
        //  初始化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>

### 二、注意事项 ###

##### 1、要在数据请求回来之后再初始化滚动，因此，我们需要将封装好的滚动方法放到$nextTick中调用![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70] #####

##### 2、要实现滚动的页面或者内容部分中，一个只能存在一个跟标签（不能多个标签并列），例如： #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 2]

##### 3、当better-scroll不起作用时，先查看是否有下图transition出现，如果没有，则表示没有获取到元素 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][20190812181359614.png]  
![在这里插入图片描述][20190812181312214.png]

##### 如果有，则先打印出初始化的结果，查看以下三个字段是否有值，即hasVerticalScroll是否为true，scrollerHeight和wrapperHeight的值是否大于0，当hasVerticalScroll为false，而scrollerHeight和wrapperHeight的值都大于0，这时说明你已经初始化成功了，只是数据不够多，才会出现滑不动的现象（你可以放多点数据上去验证） #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 6]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70]: /images/20210812/10aab980df02467d80558fe820e1c4d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 1]: /images/20210812/380cc5dab3c14815b609ebc35bf2d430.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 2]: /images/20210812/b53e22cc764a471b94e8b1aab0edd5d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 3]: /images/20210812/268e95e9be4d40f4b055ab0df904b77b.png
[20190812181359614.png]: /images/20210812/81020d2cafd847d38743d1dcd43750e2.png
[20190812181312214.png]: /images/20210812/938845e56a56439eaa0d362b926b2fd8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 4]: /images/20210812/aada5695b2d64995951dae88f1a2f0d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 5]: /images/20210812/3564816835fa441e824aaf4f6181495d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 6]: /images/20210812/4b1e5039c30b4477ad070db95b41b99f.png