uni-app中标签元素绑定的id属性被追加随机数导致scroll-into-view失效，如id="edd00d78--today"使得scroll-into-view="today"无法定位

在 uni-app 中，某些情况下（尤其是在小程序环境中），框架可能会为元素的 id 属性自动追加随机数，以确保 id 的唯一性。这会导致你在使用 scroll-into-view 时无法正确定位到目标元素，因为 scroll-into-view 的值与实际的 id 不匹配。

解决方案

1. 使用 ref 替代 id

在 uni-app 中，推荐使用 ref 来获取元素，而不是依赖 id。你可以通过 this.$refs 来访问元素，并手动调用滚动方法。

<template>
  <view>
    <scroll-view :scroll-into-view="scrollIntoViewId" scroll-y>
      <view ref="today">Today</view>
      <view ref="tomorrow">Tomorrow</view>
    </scroll-view>
    <button @click="scrollToToday">Scroll to Today</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      scrollIntoViewId: ''
    };
  },
  methods: {
    scrollToToday() {
      this.scrollIntoViewId = 'today';
      // 或者直接操作 DOM
      // this.$refs.today.scrollIntoView();
    }
  }
};
</script>

2. 动态生成 id

如果你仍然需要使用 id，可以动态生成 id，并在 scroll-into-view 中使用相同的值。

<template>
  <view>
    <scroll-view :scroll-into-view="scrollIntoViewId" scroll-y>
      <view :id="todayId">Today</view>
      <view :id="tomorrowId">Tomorrow</view>
    </scroll-view>
    <button @click="scrollToToday">Scroll to Today</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      todayId: 'today',
      tomorrowId: 'tomorrow',
      scrollIntoViewId: ''
    };
  },
  methods: {
    scrollToToday() {
      this.scrollIntoViewId = this.todayId;
    }
  }
};
</script>

3. 使用 uni.createSelectorQuery

如果你需要更精确地控制滚动行为，可以使用 uni.createSelectorQuery 来获取元素的位置，并手动设置滚动位置。

<template>
  <view>
    <scroll-view ref="scrollView" scroll-y>
      <view id="today">Today</view>
      <view id="tomorrow">Tomorrow</view>
    </scroll-view>
    <button @click="scrollToToday">Scroll to Today</button>
  </view>
</template>

<script>
export default {
  methods: {
    scrollToToday() {
      const query = uni.createSelectorQuery().in(this);
      query.select('#today').boundingClientRect(data => {
        if (data) {
          this.$refs.scrollView.scrollTop = data.top;
        }
      }).exec();
    }
  }
};
</script>