city页面搜索城市切换之后再次点击city页面list组件的better-scroll就失效了应该怎么解决

Question

视频中用的是1.8.1版本的 不用加updated () {this.scroll.refresh()} 在电脑上是没问题的 在手机上就不能滑动了

Answer 1

花花公子2016 2021-04-09 19:52:27

导致问题的原因是keep-alive的缓存，我直接把keep-alive干掉了，用这个缓存机制增加了前端代码的复杂性，迭代不好维护，牺牲一点性能来换取代码的稳定。

Answer 2

Samrtiboy 2020-10-27 21:02:27

同学你好，我的解决方法是在首页中也绑定滚动事件就可以完美解决无法滚动的问题了，PC端，移动端均可以滚动，可以参考一下，代码如下：

布局按照better-scroll的要求来

<div ref="wrapper" class="list">
    <div>
      <HomeHeader></HomeHeader>
      <HomeSwiper :swiperList="swiperList"></HomeSwiper>
      <HomeIcons :iconList="iconList"></HomeIcons>
      <HomeRecommend :recommendList="recommendList"></HomeRecommend>
      <HomeWeekend :weekendList="weekendList"></HomeWeekend>
    </div>
  </div>

然后按照better-scroll的要求来写一下样式：

.list
  overflow hidden
  position absolute
  top 0
  left 0
  right 0
  bottom 0

最后在mounted生命周期函数中绑定滚动事件：

mounted () {
    this.lastCity = this.city
    this.scroll = new BetterScroll(this.$refs.wrapper, {
      click: true,
    })
    this.getHomeInfo()
  },

还要不能有下面这段代码否则无法正常滚动

updated () {
    this.scroll.refresh()
}

我之所以想到这样做，是因为我发现每次在首页出现滚动条的情况下再去城市列表页就无法正常滚动了，因此我就我想尝试一下给首页也绑定滚动事件结果发现解决了无法滚动的问题，当然我的做法不一定合理，欢迎同学一起讨论，我感觉better-scroll在使用上还是要谨慎使用。

• Dell #1

  这么详细，厉害。

• 春夏js #2

  首页加了list滚动代码，移动端（iPhone11） 首页还是滑不了