【uniapp】<scroll-view> scroll-into-view 滚动到元素偶尔失效问题

功能简要描述:
页面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)
      }
  }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容