uniapp强制刷新当前页面

Question

uniapp强制刷新当前页面

由于业务的需要，我需要点击全部的时候，初始化滚动x轴的位置；如图

我的方向是重新刷新页面（刷新当前组件里面的子组件），如下图；但使用this.$forceUpdate()，不生效，原因如下不赘述；
我的问题如何实现刷新页面同时也能刷新里面的子组件呢？

在uniapp中，调用this.$forceUpdate()可以迫使组件实例重新渲染，即强制刷新。但注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

Answer 1

不用刷新，设置下滚动条就行了。

<template>
  <div class="scroll-box">
    <div class="content"> <!-- 这里是你的滚动内容 -->
      <!-- ... -->
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    // 获取滚动盒子的 DOM 元素
    const scrollBox = this.$refs.scrollBox.$el;

    // 设置滚动盒子的X轴位置
    scrollBox.scrollLeft = 100;
  },
}
</script>

<style scoped>
.scroll-box {
  width: 200px;
  height: 100px;
  overflow-x: scroll;
}

.content {
  width: 1000px;
  height: 100%;
}
</style>