VUE 组件重新渲染（组件重载）无缝滚动切换重新从顶部开始播放

 

1.使用 v-if

v-if可以实现 true (加载)和false(卸载)

// html 
 <vue-seamless-scroll ref="myseemless" v-if="isShow" :data="[curActiveData]" :class-                        
        option="classOption" class="seamless-warp" style="height:100%;">
          <ul class="listData">
            <span class="title" v-html="curActiveData.gameRules"></span>
            
          </ul>
</vue-seamless-scroll>

// js
data() {
	return {
		isShow: true,
	}
}
method: {
    // 切换
    checkedChange(index){
      this.isShow = false
      this.activeIndex = index
      this.curActiveData = this.listData[index] || {}
      // 建议加上 nextTick 微任务 
	  // 否则在同一事件内同时将tableShow设置false和true有可能导致组件渲染失败
      this.$nextTick(function(){
        // 加载,重新渲染无缝滚动组件
        this.isShow = true
      })
      
    },
}