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

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

效果图如下：

(1)左侧导航联动右侧内容

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

没朋友用的还是微信小程序提供的组件滚动视图，它里面有一个属性滚动到视图中，值为某子元素的id，滚动到该元素。

模板：

scroll-view class=' menu-wrapper ' scroll-y ul Li class=' menu-item ' v-for='(item，index)' in goods ' : class=' index===CurrentDex '？当前' : ' ' ' :键=' index ' @ tap=' select menu(index)' { { item。name } }/Li/ul/scroll-view scroll-view scroll-y : croll-to-view=' content id ' scroll-with-animation=' true ' class=' foods-wrapper ' ul Li v-for='(item，I)in goods ' : id=' con _ ' I ' class=' food-list food-list-hook ' 3:k

data() { return { goods: []，contentId: ' '，//每个食物清单的id，滚动到视图滚动到对应的id CurrentEx : { 0 }，方法： {选择菜单(索引){ this。内容id=` con _ $ { index } ` this。currentindex=index } }(2)在左侧导航联动右侧内容的基础上增加右侧内容联动左侧导航

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

补充：内容高度是右侧内容滚动视图的高度，同时也是左侧导航滚动视图的高度，导航高度是导航保险商实验所下每一个项目的高度，当导航下保险商实验所的高度超过滚动视图的高度，并且这个。这个。这是navitemheight。内容高度，导航才向上滚动。

tempate:

scroll-view class=' menu-wrapper ' : scroll-in-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 '？当前' : ' ' ' :键=' index ' @ tap=' select menu(index)' { { item。name } }/Li/ul/scroll-view scroll-view scroll-y @ scroll=' on croll ' : croll-to-view=' content id ' scroll-with-animation=' true ' class=' foods-wrapper ' ul Li v-for='(item，I)in goods ' : id=' con _ ' I ' class=' food-list food-list

导出默认{ data() { return { goods: []，contentId: ' '，//每个食物清单的id，滚动到视图滚动到对应的id navId: ' '，//导航模块对应的id，用来联动内容区域currentIndex: 0，navulHeight: 0，//导航里保险商实验所高度navItemHeight: 0，//每个导航高度listHeight: []，//foods内部块的高度contentHeight: []，//内容区域滚动视图高度} }，watch : { CurrentDex(){ console。日志(这个。currentIndex)if(this。内容高度这个。navullheight){ 0让h=这个。currentIndex *这个。如果(h)这个。内容高度){//导航滑动这个。navid=` nav _ $ { this。CurrentDex } ` } else { this。navid=' nav _ 0 ' } } } }，methods : { select menu(index){ this。内容id=` con _ $ { index } ` this。navid=` nav _ $ { index } ` this。currentindex=index }，在滚动(e)上{ this。内容id=' '让滚动顶部=e . target。滚动顶部//控制台。log(滚动顶部)让长度=这个。列表高度。长度if(滚动顶部=这个。列出高度[长度-1]-这个。内容高度){ return } else if(滚动顶部0滚动顶部1 .一、长度；I){ if(滚动顶部=这个。列表高度[I-1]滚动到此顶部。列表高度[I]){这个。current index=I } }//控制台。日志(这个。currentindex)}，getFoodHeight(){ var query=wx。createselectorquery()让h=0查询.选择所有' .食物清单挂钩)。boundingClientRect((rects)={//console。对数矩形。foreach((rect)={ h=rect。这个高度。列表高度。push(h)})//控制台。日志(这个。列表高度)})查询。选择(' .食物-包装纸')。boundingClientRect((rect)={ this。内容高度=矩形。高度})查询。选择(' .菜单-ul ').boundingClientRect((rect)={ this。navulheight=rect。高度})查询。选择(' .菜单项')。boundingClientRect((rect)={ this。navitemheight=rect。高度}).exec() } }，watch: { goods() { //获取模块高度，即食物列表setTimeout(()={ this。getfoodheight()}，60) } }更多教程点击《Vue.js前端组件学习教程》 ,欢迎大家学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。