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".myselfposition absolutewidth 100top 0left 0right 0bottom 45pxoverflow hidden.myHeaderheight 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-wrapperposition absolutewidth 100%top 42pxleft 0right 0bottom 45pxoverflow hiddenz-index 30</style>

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

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