better-scroll 和v-show导致不能滚动的bug

我是一个页面多个子组件,每个子组件都有一个BScroll,通过v-show判断显示子组件



 

导致后面两个子组件不能滚动
原因是 v-show=false 时 display为none 子组件没有高度导致内部的scroll没有高度,所以不能滚动
解决:判断v-show=true时主动刷新scroll

function tabsClickAction(index) {
      state.pageIndex = index;
      if (index == 1) {
        healthRecords.value.refreshPage();
      }
      if (index == 2) {
        historicalOrder.value.refreshPage();
      }
      console.log(state.pageIndex);
    }

子组件内部方法

function refreshPage() {
    scroll.value.refresh();
}

你可能感兴趣的:(better-scroll 和v-show导致不能滚动的bug)