设置 scroll-into-view 无效-526互联

1、校验scroll-into-view的赋值是否和view的id一致，因为id一般包含变量，很容易和预期的值不一样

2、数值改变才会触发滚动。比如scroll-into-view的值是'id-40-view'，我们手动滚动到其他位置，然后想滚动回来，就再次给它赋'id-40-view'，是不会触发滚动的，因为它的值没有改变。所以要及时清空scroll-into-view的值，再给它赋新值的时候才会触发滚动

<template>
  <u-popup :show="show" :safeAreaInsetBottom="false" :closeable="true" round="24rpx" mode="bottom"
    @click="handleClickClose">
    <view class="content-view">
      <scroll-view scroll-y style="height: 100%;" :scroll-into-view="scrollIntoView">
        <view class="scroll-view">
          <view :id="'id-' + index + '-view'" v-for="(item, index) in list" :key="index">
            {{ index + 1 }}
          </view>
        </view>
      </scroll-view>
    </view>
  </u-popup>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      show: false,
      scrollIntoView: '', // 值改变才会触发
    }
  },
  watch: {
    visible (val) {
      this.show = val
      if (val) {
        this.$nextTick(() => {
          // 确保赋值和 view 的 id 一致
          this.scrollIntoView = `id-${Math.max(this.currentNumber - 1, 0)}-view`
        })
      }
    }
  },
  methods: {
    handleClickClose (val) {
      this.show = false
      this.scrollIntoView = '' // 清空数值
      this.$emit('update:visible', val)
    },
  },
}
</script>

<style lang="scss" scoped>
.pop-catalogue {
  background-color: #F7F9FC;

  .content-view {
    height: 968rpx;

    .scroll-view {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }

    .item-view {
      width: 72rpx;
      height: 72rpx;
      border-radius: 12rpx;
      color: #9EA5BB;
      font-size: 26rpx;
    }
  }
}
</style>