加上updated(){ this.scroll && this.scroll.refresh() } better-scroll 还是 滚动不了

Question

当前城市

北京

热门城市

{{item.name}}

{{key}}

{{innerItem.name}}

Answer 1

Dell 2022-09-12 13:23:08

看下外层是否有包裹 keep-alive, 如果有，updated 要改成 activated

• 提问者 蒋漂亮 #1

  <template>
    <div class="list" ref="wrapper">
      <div class="">
        <div class="area">
          <div class="title border-topbottom">当前城市</div>
          <div class="button-list">
            <div class="button-wrapper">
              <div class="button">北京</div>
            </div>
          </div>
        </div>
        <div class="area">
          <div class="title border-topbottom">热门城市</div>
          <div class="button-list">
            <div class="button-wrapper" v-for="item of hot" :key="item.id">
              <div class="button">{{item.name}}</div>
            </div>
          </div>
        </div>
        <div class="area" v-for="(item, key) of cities" :key="key">
          <div class="title border-topbottom">{{key}}</div>
          <div class="item-list">
            <div class="item border-bottom" v-for="innerItem of item" :key="innerItem.id">{{innerItem.name}}</div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import Bscroll from 'better-scroll'
  export default {
    name: "CityList",
    props: {
      hot: Array,
      cities: Object
    },
    mounted () {
      this.scroll = new Bscroll(this.$refs.wrapper)
    },
    update () {
      this.scroll && this.scroll.refresh();
    }
  };
  </script>

• 提问者 蒋漂亮 #2

  <style lang="stylus" scoped>
  @import '~styles/varibles.styl';
  
  .border-topbottom {
    &:before {
      border-color: #ccc;
    }
  
    &:after {
      border-color: #ccc;
    }
  }
  .border-bottom {
    &:before {
      border-color: #ccc;
    }
  }
  .list
    overflow hidden
    position: absolute
    top:1.58rem
    left: 0
    right: 0
    bottom: 0
    .title {
      line-height: 0.54rem;
      background: #eee;
      padding-left: 0.2rem;
      color: #666;
      font-size: 0.26rem;
    }
  
    .button-list {
      padding: 0.1rem 0.6rem 0.1rem 0.1rem;
      overflow: hidden;
  
      .button-wrapper {
        width: 33.33%;
        float: left;
  
        .button {
          text-align: center;
          margin: 0.1rem;
          padding: 0.1rem 0;
          border: 0.02rem solid #ccc;
          border-radius: 0.06rem;
        }
      }
    }
    .item-list
      .item
        line-height: .76rem
        padding-left: .2rem
  </style>

Answer 2

Dell 2022-09-12 13:20:16

把代码贴上来看一下，keep-alive 去掉没有

• 提问者 蒋漂亮 #1

  代码贴上了，没加keep-alive

• Dell 回复 提问者 蒋漂亮 #2

  是 js 那块的代码