Vue 之 Better-scroll 实现列表滚动效果

实现列表滚动的效果

1、下载 better-scroll

“better-scroll”: “^1.11.1”
npm install

2、 在.vue组件列表里面调用 ，不用在main.js页面中进行use()使用

<script>
    import BScroll from 'better-scroll';

        created(){
             axios.get('/api/goods').then((res) => {
                if(res.data.errno===ERR_OK){
                    this.goods = res.data.data;
                    this.$nextTick(()=>{ // this.$nextTick 是一个异步函数，为了确保 DOM 已经渲染
                        this. _initScroll();
                    });
                }
            }),
          this.classMap=['decrease','discount','special','invoice','guarantee'];
        },
        methods:{
            _initScroll(){
                this.menuScroll=new BScroll(this.$refs.menuWrapper,{});

                this.foodsScroll=new BScroll(this.$refs.foodsWrapper,{});
            }
        }

</script>

this.$nextTick( () => {} ): 是一个异步函数，为了确保 DOM 已经渲染完成

---

 <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>   

重点： ref=”menuWrapper”
调用： this.$refs.menuWrapper
注意： 两者都要用驼峰格式写

---

<template>
  <div class="myself" ref="listWrapperL">
    <div>//一定要加这个div,不然BScroll实现不了滚动
        <div class="myHeader"> //这是滚动体部分，外层一定要有两个div
            <div class="title">
              <span class="text">我的</span>
        </div>
        </div>
    </div>-----------------------------------------------------------
  </div>
</template>

div ref=”listWrapperL” ： 绑定BScroll,实例化

ref=”listWrapperL”下面一定要嵌套一个div：不然BScroll实现不了滚动

div class=”myHeader”:滚动体部分，外层一定要有两个div

---

import BScroll from 'better-scroll';

 mounted(){
            this.$nextTick(()=>{
                if (!this.scroll) {
                    this.scroll=new BScroll(this.$refs.listWrapperL, {
                        click: true
                    });
                }else{
                    this.scroll.refresh(); //不能滚动，就重新刷新一下
                }
            })
    },

---

<style  lang="stylus" rel="stylesheet/stylus">
    @import "../../common/stylus/mixin.styl"
  .myself
    position absolute
    width 100
    top 0
    left 0
    right 0
    bottom 45px
    overflow hidden
    .myHeader
      height 126px

</style>

重点部分：
一定要写上绝对定位，写死div大小；

即一定要在滚动体“样式部分”加上这些代码：才能实现滚动

position absolute
width 100
top 0
left 0
right 0

源码如下：

<template>
  <div class="ordered">
      <div class="vHeader">
        <div class="vHeader-left">订单</div>
        <div class="vHeader-right">帮买帮送</div>
      </div>
      <div class="list-wrapper" ref="listWrapperL">
        <ul>
         <li v-for="(item,index) in ordersed" :key="index" class="item">
            <div class="order-wrapper">
              <div class="img-wrapper">
                <img width="60" height="60" :src="item.avatar" alt="">
              </div>
              <div class="content">
                <div class="left-wrapper">
                  <div class="title">{{item.name}}</div>
                  <div class="time">{{item.orderTime}}</div>
                  <div class="name">{{item.food}}</div>
                </div>
                <div class="right-wrapper">
                  <span class="order">{{item.ordered}}</span>
                  <div class="price">{{item.price}}</div>
                </div>
              </div>
            </div>
            <div class="again-wrapper">
              <div class="again">再来一单</div>
            </div>
         </li>
        </ul>
      </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import BScroll from 'better-scroll';

  export default {
    data(){
      return{
        ordersed:{}
      }
    },
    created () {
      this.getOrdered() 
    },
    methods: {
      getOrdered () {
        axios.get('/api/ordersed').then((res) => {
            this.ordersed= res.data.data;
            this.$nextTick(()=>{
              this.listScroll=new BScroll(this.$refs.listWrapperL,{
                  click:true
              });
            });
        })
      }
    }
  }
</script>

<style  lang="stylus" rel="stylesheet/stylus">
  .ordered
    .list-wrapper
      position absolute
      width 100%
      top 42px
      left 0
      right 0
      bottom 45px
      overflow hidden
      z-index 30


</style>

参考一：https://blog.csdn.net/qq_40204835/article/details/79497576

参考二：黄轶 https://zhuanlan.zhihu.com/p/27407024