功能简要描述：
![]()
页面UI.png
页面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)
}
}
}
