mpvue实现左侧导航与右侧内容的联动

本文实例为大家分享了mpvue左侧导航与右侧内容联动的具体代码，供大家参考，具体内容如下

效果图如下：

（1）左侧导航联动右侧内容

实现：点击左侧导航，右侧内容滑到对应的位置，并且导航上有current当前样式。

mpvue用的还是微信小程序提供的组件scroll-view，它里面有一个属性scroll-into-view，值为某子元素的id，滚动到该元素。

template:

<scroll-view class="menu-wrapper" scroll-y>
 <ul>
 <li class="menu-item"
 v-for="(item,index) in goods"
 :class="index===currentIndex ? 'current' : ''"
 :key="index"
 @tap="selectMenu(index)">
  {{item.name}}
 </li>
 </ul>
</scroll-view>
<scroll-view scroll-y
  :scroll-into-view="contentId"
  scroll-with-animation="true"
  class="foods-wrapper">
 <ul>
 <li v-for="(item,i) in goods"
 :id="'con_'+i"
 class="food-list food-list-hook" :key="i">
 </li>
 </ul>
<scroll-view>

js:

data() {
 return {
 goods: [],
 contentId: '', // 每个food-list的id，scroll-into-view滚动到对应的id
 currentIndex: 0
 }
},
methods: {
 selectMenu(index) {
 this.contentId = `con_${index}`
 this.currentIndex = index
 }
}

（2）在左侧导航联动右侧内容的基础上增加右侧内容联动左侧导航

实现：滑动右侧内容区域，给左侧对应导航增加current样式，并且当导航高度过长，会联动其滚动

补充：contentHeight是右侧内容scroll-view的高度，同时也是左侧导航scroll-view的高度，navItemHeight是导航ul下每一个item的高度，当导航下ul的高度超过scroll-view的高度，并且this.currentIndex * this.navItemHeight  > this.contentHeight，导航才向上滚动。

tempate:

<scroll-view class="menu-wrapper"
  :scroll-into-view="navId"
  scroll-with-animation="true"
  scroll-y>
 <ul class="menu-ul">
 <li class="menu-item"
 v-for="(item,index) in goods"
 :id="'nav_'+index"
 :class="index===currentIndex ? 'current' : ''"
 :key="index"
 @tap="selectMenu(index)">
  {{item.name}}
 </li>
 </ul>
</scroll-view>
<scroll-view scroll-y
  @scroll="onScroll"
  :scroll-into-view="contentId"
  scroll-with-animation="true"
  class="foods-wrapper">
 <ul>
 <li v-for="(item,i) in goods"
 :id="'con_'+i"
 class="food-list food-list-hook" :key="i">								 
 1/2    1 2 下一页 尾页