如何使用mpvue实现左侧导航与右侧内容的联动
这篇文章将为大家详细讲解有关如何使用mpvue实现左侧导航与右侧内容的联动,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
成都创新互联公司专注为客户提供全方位的互联网综合服务,包含不限于成都网站制作、网站设计、外贸网站建设、曲沃网络推广、成都微信小程序、曲沃网络营销、曲沃企业策划、曲沃品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;成都创新互联公司为所有大学生创业者提供曲沃建站搭建服务,24小时服务热线:18982081108,官方网址:www.cdcxhl.com
效果图如下:
(1)左侧导航联动右侧内容
实现:点击左侧导航,右侧内容滑到对应的位置,并且导航上有current当前样式。
mpvue用的还是微信小程序提供的组件scroll-view,它里面有一个属性scroll-into-view,值为某子元素的id,滚动到该元素。
template:
- {{item.name}}
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:
- {{item.name}}
js:
export default{ data() { return { goods: [], contentId: '', // 每个food-list的id,scroll-into-view滚动到对应的id navId: '', // 导航模块对应的id,用来联动内容区域 currentIndex: 0, navulHeight: 0, // 导航里ul高度 navItemHeight: 0, // 每个导航高度 listHeight: [], // foods内部块的高度 contentHeight: [], // 内容区域scroll-view高度 } }, watch: { currentIndex() { console.log(this.currentIndex) if (this.contentHeight < this.navulHeight) { let h = this.currentIndex * this.navItemHeight if (h > this.contentHeight) { // 导航滑动 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) } } }
关于“如何使用mpvue实现左侧导航与右侧内容的联动”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
文章题目:如何使用mpvue实现左侧导航与右侧内容的联动
当前路径:http://pwwzsj.com/article/pioejj.html