vue中使用better-scroll初始化成功了就是没反应

WEB菜鸟
  • 276

贴上结构代码:hasVerticalScroll为true,scrollerHeight有值,如果我给class menu-wrapper和foods-wrapper设置overflow-y:auto;样式也是完全没问题的,打印better-scroll初始化也是没问题的...
补充:发现个奇怪的问题,我不管是vuex调用还是重新调用,不管在生命周期哪个阶段去执行调用函数this.initScroll(),打印都是给我undfined......mounted ()也是...

1.HTML:

<div class="goods">
    <!-- 分类列表,左侧边栏 -->
    <div class="menu-wrapper" ref="menuScroll">
      <ul>
        <li class="menu-item"></li>
      </ul>
    </div>
    <!-- 商品列表,右侧边栏 -->
    <div class="foods-wrapper" ref="foodScroll">
      <ul>
        <!-- 专场 -->
        <li class="container-list"></li>
        <!-- 具体分类 -->
        <li class="food-list" v-for="(item,index) in setGoods" :key="index">
          <h3 class="title">{{item.name}}</h3>
          <!-- 具体的商品列表 -->
          <ul>
            <li class="food-item"></li>
          </ul>
        </li>
      </ul>
     
    </div>
<div class="goods">

2.CSS结构代码,使用的Sass:

.goods{
    display: flex;
    position: absolute;
    top: 190px;
    bottom: 51px;
    overflow: hidden;
    width: 100%;
    
    // 左侧边栏
    .menu-wrapper{
      flex: 0 0 85px;
      background: #F4F4F4;
      // overflow-y: auto;
      .menu-item{
        padding: 19px 23px 9px 10px;
        border-bottom: 1px solid #E4E4E4;
        position: relative;
      }
     }
     
     // 右侧边栏
    .foods-wrapper{
      flex: 1;
      .container-list{
        padding: 11px 11px 0 11px;
        border-bottom: 1px solid #E4E4E4;
      }
      .food-list{
        padding: 11px;
        .title{
          height: 13px;
          font-size: 13px;
          background: url('../../assets/btn_yellow_highlighted@2x.png') no-repeat left center;
          background-size: 2px 10px;
          padding-left: 7px;
          margin-bottom: 12px;
        }
        .food-item{
          display: flex;
          margin-bottom: 25px;
          position: relative;
        }
      }
      
     }
     
 

3.JS代码:

<script>
  import BScroll from 'better-scroll'
  
  export default {
   name: "goods",
   data() {
    return {        
     seteContainers: {},
     setGoods: [],
    }
   },
   methods: {
    initScroll (){  //实例滚动
     new this.BScroll(this.$refs.menuScroll)
     new this.BScroll(this.$refs.foodScroll)
    }
   },
   created (){
    this.http.get('/api/goos').then(response => {
     if(response.data.code == 0){
      this.seteContainers = response.data.data.container_operation_source;
      this.setGoods = response.data.data.food_spu_tags;
       //执行滚动
       this.initScroll()
     }
    })
   }        
  }
</script>
    

4.打印的new this.BScroll(this.$refs.menuScroll):
图片描述

回复
阅读 2.6k
3 个回答

谢谢大家我找到问题所在了,代码中seteContainer()和setGood()数据函数都没有调用但拿到数据了这是因为computed()计算属性钩子函数自带监听功能它发现数据变化就自调用了而且它还有些特殊如果数据放在它里面的话其它的钩子函数是都没办法控制的,所以出现了以下问题initScroll()不管在哪个阶段调用还是异步调用啥的都是统一给了undfind,然后滚动插件就算初始化成功了也没执行,还是自己刚学vue理解不深刻,谢谢大大们.

可以试试在请求的回调里面在this.nextTick(function () { this.initScroll() })试试

宣传栏