【uniapp】 scroll-int

功能简要描述： 页面UI.png

分类页面，左面是分类名称列表，右边是分类名称+分类下商品
点击分类名称后，定位到商品列表的分类名称位置

template代码块(简化)

<!-- 分类名称列表 -->
<view style='width:100vw;display:flex'>
  <scroll-view style='height:100vh;width:20%' :scroll-y="true">
      <view>
            <view @click='intoDom(item.id)' v-for(item,index) in list :key='index'>分类名称</view>
      </view>
  </scroll-view>
  <!-- 商品列表 -->
  <scroll-view  style='height:100vh;width:80%'  :scroll-y="true" :scroll-into-view="intoId">
      <view>
            <view v-for(item,index) in list :key='index'>
                  <view :id="'dom_'+item.id" >分类名称</view>
                  <view v-for(subItem,subIndex) in item.subList :key='subIndex'>商品名称</view>
            </view>
            ...更多数据（略）
      </view>
  </scroll-view>
</view>

script代码块（出现BUG代码）

export default {
  data() {
     return {
        intoId: "",// 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
        list: [{
          typename: "分类1",
          id: 1,
          subList: [{
            itemname: "商品1",
            id: "1001"
          }]
        }]
     }
  },
  methods: {
      // 点击左边分类名称，定位到商品分类块位置
      intoDom(id){
          this.intoId = `dom_${id}`
      }
  }
}

修改后script代码

export default {
  data() {
     return {
        intoId: "",// 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
        list: [{
          typename: "分类1",
          id: 1,
          subList: [{
            itemname: "商品1",
            id: "1001"
          }]
        }]
     }
  },
  methods: {
      // 点击左边分类名称，定位到商品分类块位置
      intoDom(id){
          // 先设置一个错误的ID
          this.intoId = `dom_${id}_xxx`
          // 然后再设置正确的滚动ID
          setTimeout(()=>{
            this.intoId = `dom_${id}`
          },100)
      }
  }
}