如何使用mpvue實現(xiàn)左側(cè)導(dǎo)航與右側(cè)內(nèi)容的聯(lián)動

這篇文章將為大家詳細(xì)講解有關(guān)如何使用mpvue實現(xiàn)左側(cè)導(dǎo)航與右側(cè)內(nèi)容的聯(lián)動，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

?效果圖如下：

（1）左側(cè)導(dǎo)航聯(lián)動右側(cè)內(nèi)容

實現(xiàn)：點擊左側(cè)導(dǎo)航，右側(cè)內(nèi)容滑到對應(yīng)的位置，并且導(dǎo)航上有current當(dāng)前樣式。

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滾動到對應(yīng)的id
 currentIndex: 0
 }
},
methods: {
 selectMenu(index) {
 this.contentId = `con_${index}`
 this.currentIndex = index
 }
}

（2）在左側(cè)導(dǎo)航聯(lián)動右側(cè)內(nèi)容的基礎(chǔ)上增加右側(cè)內(nèi)容聯(lián)動左側(cè)導(dǎo)航

實現(xiàn)：滑動右側(cè)內(nèi)容區(qū)域，給左側(cè)對應(yīng)導(dǎo)航增加current樣式，并且當(dāng)導(dǎo)航高度過長，會聯(lián)動其滾動

補充：contentHeight是右側(cè)內(nèi)容scroll-view的高度，同時也是左側(cè)導(dǎo)航scroll-view的高度，navItemHeight是導(dǎo)航ul下每一個item的高度，當(dāng)導(dǎo)航下ul的高度超過scroll-view的高度，并且this.currentIndex * this.navItemHeight  > this.contentHeight，導(dǎo)航才向上滾動。

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">
 </li>
 </ul>
</scroll-view>

js:

export default{
 data() {
 return {
 goods: [],
 contentId: '', // 每個food-list的id，scroll-into-view滾動到對應(yīng)的id
 navId: '', // 導(dǎo)航模塊對應(yīng)的id，用來聯(lián)動內(nèi)容區(qū)域
 currentIndex: 0,
 navulHeight: 0, // 導(dǎo)航里ul高度
 navItemHeight: 0, // 每個導(dǎo)航高度
 listHeight: [], // foods內(nèi)部塊的高度
 contentHeight: [], // 內(nèi)容區(qū)域scroll-view高度
 }
 },
 watch: {
 currentIndex() {
 console.log(this.currentIndex)
 if (this.contentHeight < this.navulHeight) {
 let h = this.currentIndex * this.navItemHeight
 if (h > this.contentHeight) {
  // 導(dǎo)航滑動
  this.navId = `nav_${this.currentIndex}`
 } else {
  this.navId = 'nav_0'
 }
 }
 }
 },
 methods: {
 selectMenu(index) {
 this.contentId = `con_${index}`
 this.navId = `nav_${index}`
 this.currentIndex = index
 },
 onScroll(e) {
 this.contentId = ''
 let scrollTop = e.target.scrollTop
 // console.log(scrollTop)
 let length = this.listHeight.length
 if (scrollTop >= this.listHeight[length - 1] - this.contentHeight) {
 return
 } else if (scrollTop > 0 && scrollTop < this.listHeight[0]) {
 this.currentIndex = 0
 }
 for (let i = 0; i < length; i++) {
 if (scrollTop >= this.listHeight[i - 1] && scrollTop < this.listHeight[i]) {
  this.currentIndex = i
 }
 }
 // console.log(this.currentIndex)
 },
 getFoodHeight() {
 var query = wx.createSelectorQuery()
 let h = 0
 query.selectAll('.food-list-hook').boundingClientRect((rects) => {
 // console.log(rects)
 rects.forEach((rect) => {
  h += rect.height
  this.listHeight.push(h)
 })
 // console.log(this.listHeight)
 })
 query.select('.foods-wrapper').boundingClientRect((rect) => {
 this.contentHeight = rect.height
 })
 query.select('.menu-ul').boundingClientRect((rect) => {
 this.navulHeight = rect.height
 })
 query.select('.menu-item').boundingClientRect((rect) => {
 this.navItemHeight = rect.height
 }).exec()
 }
 }，
 watch: {
 goods() {
 // 獲取模塊高度，即food-list
 setTimeout(() => {
 this.getFoodHeight()
 }, 60)
 }
 }
}

關(guān)于“如何使用mpvue實現(xiàn)左側(cè)導(dǎo)航與右側(cè)內(nèi)容的聯(lián)動”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。