今天准备做一个小demo练练手 ，使用better-scroll 第一次加载页面以及刷新后滚动无法正常运行 页面渲染没有执行完成

废话就不多说了

看了一些资料，大致也有个判断，就是页面没有渲染完成，而better-scroll就已经创建完成 导致rightwrap 获取不到高度 找到官方文档

这是prop 接收的数据 后台返回的数据 会不会因为是axios请求同步后引发的问题？？？？？？？？？

最后实在没办法了 直接写一个定时器

<template>
    <div class="goods">
       <div class="foods">
           <div class="leftwrap" ref="leftwrap">
               <div class="leftcontent">
                   <div v-for="(item,i) of shop" :key="i" :class="{active:leftindex==i}" @click="select(i,$event)">{{item.name}}</div>
               </div>
           </div>
           <div class="rightwrap" ref="rightwrap">
               <div class="content">
                   <ul>
                       <li v-for="(item,i) of shop" :key="i" ref="li2">
                           <p>{{item.name}}</p>
                           <ul>
                               <li v-for="(food,i) of item.foods" :key="i" class="foodcard">
                                   <div><img :src="food.thumb" alt=""></div>
                                   <div class="footcardfont">
                                       <div>{{food.name}}</div>
                                       <div>￥{{food.price.toFixed(2)}}</div>
                                   </div>
                               </li>
                           </ul>
                       </li>
                   </ul>
               </div>
           </div>
       </div>
    </div>
</template>
<script>
import BScroll from '@better-scroll/core';
import { setTimeout } from 'timers';
export default {

    props:['shop'],
    data(){
        return {
            leftindex:0,
            listHeight: [],
            scrolly:0,
        }
    },
     created(){
        // scroll 运行！
      this.$nextTick(()=>{
          setTimeout(()=>{
              this._initscroll();
              this._height();
          },500)
      })
    },
    methods:{
        // 点击左边的
        select(i,e){
            this.leftindex=i;
        },
        // 创建一个滚动实例
        _initscroll(){
            this.navwrapScroll = new BScroll(this.$refs.rightwrap, {
                click: true,
            });
            this.rightbs=BScroll(this.$refs.rightwrap,{
                click:true,
                // protype 3级别 可以监听到任何滚动距离
                probeType:3,
            });


            this.rightbs.on('scroll',(position)=>{
                // this.rightbs.refresh();
                if(position.y<0){
                    // 取整取绝对值
                    this.scrolly=Math.abs(Math.round(position.y));
                    console.log(this.scrolly);
                }
            })
        },
        _height(){
            // 假如ref添加到v-for循环的点上，会返回一个数组
            let li2=this.$refs.li2
            // 拿到li documengt 类似
            let height=0;
            // 初始高度0
            this.listHeight.push(height)
            // for 得到的li数组
            for(var i=0;i<li2.length;i++){
                let item=li2[i];
                // 
                height+=item.clientHeight;
                this.listHeight.push(height)
            }
        },
    },

}
</script>
<style scoped>   
    .foods{
        display: flex;
        width: 100%;
    }
    .leftwrap{
        width: 20%;
        text-align: center;
        font-size: 15px;
        height: 300px;
        overflow: hidden;
    }
    .leftwrap .leftcontent div{
        padding: 10px;
    }
    .rightwrap{
        width: 80%;
        height: 400px;
        overflow: hidden;
    }
    .rightwrap p{
        font-size: 15px;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-weight: bold;
        padding: 4px;
        background-color: #e8e8e8;
        border-radius:4px;
        border: 1px solid #999999; 
    }
    .active{
        background-color: #e8e8e8;
        color: red;    
    }
   .foodcard{
       box-sizing: border-box; 
       width: 100%;
       padding: 10px;
       border: 1px solid  #e8e8e8;
       display: flex
   }
   .foodcard>div:first-child{
       width: 30%;
       flex: 0 0 30%;
   }
   .foodcard>div:first-child>img{
       width: 100%;
       height: 60px;
       border-radius:4px; 
   }
   .footcardfont{
       margin-left:10px;
   }
   .footcardfont>:first-child{
       font-size: 20px;
       font-weight:bold; 

   }
   .footcardfont>div:nth-child(2),.footcardfont>div:nth-child(3){
       margin-top:5px; 
   }
</style>

https://blog.csdn.net/sinat_39626276/article/details/79792790?utm_source=blogxgwz1

在渲染完数据之后，添加$nextTick(() => {//代码执行})作为数据渲染后的执行操作，就不会有这种问题了。