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


Posted in Javascript onOctober 21, 2019

本文实例为大家分享了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">
 </li>
 </ul>
</scroll-view>

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)
 }
 }
}

更多教程点击《Vue.js前端组件学习教程》,欢迎大家学习阅读。

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery tools系列 expose 学习
Sep 06 Javascript
window.ActiveXObject使用说明
Nov 08 Javascript
jquery validate poshytip 自定义样式
Nov 26 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
Mar 15 Javascript
jQuery中show与hide方法用法示例
Sep 16 Javascript
JavaScript调试的多个必备小Tips
Jan 15 Javascript
Vue的百度地图插件尝试使用
Sep 06 Javascript
JS+Canvas绘制动态时钟效果
Nov 10 Javascript
vue 1.0 结合animate.css定义动画效果
Jul 11 Javascript
微信小程序滑动选择器的实现代码
Aug 10 Javascript
js中怎么判断两个字符串相等的实例
Jan 17 Javascript
浅析Vue 中的 render 函数
Feb 28 Javascript
vue项目中常见问题及解决方案(推荐)
Oct 21 #Javascript
vue.js实现左边导航切换右边内容
Oct 21 #Javascript
vue+element树组件 实现树懒加载的过程详解
Oct 21 #Javascript
JavaScript函数IIFE使用详解
Oct 21 #Javascript
vue实现侧边栏导航效果
Oct 21 #Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
Oct 21 #Javascript
vue-cli基础配置及webpack配置修改的完整步骤
Oct 20 #Javascript
You might like
PHP安装问题
2006/10/09 PHP
配置PHP使之能同时支持GIF和JPEG
2006/10/09 PHP
增强的 JavaScript 的 trim 函数的代码
2007/08/13 Javascript
jQuery之过滤元素操作小结
2013/11/30 Javascript
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
jQuery的css()方法用法实例
2014/12/24 Javascript
jquery实现简单的无缝滚动
2015/04/15 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
BootStrap Fileinput初始化时的一些参数
2016/12/30 Javascript
javascript常用经典算法详解
2017/01/11 Javascript
Node.js  事件循环详解及实例
2017/08/06 Javascript
详解npm 配置项registry修改为淘宝镜像
2018/09/07 Javascript
基于JS判断对象是否是数组
2020/01/10 Javascript
Python中关于字符串对象的一些基础知识
2015/04/08 Python
Python2与Python3的区别实例总结
2019/04/17 Python
Python实现桌面翻译工具【新手必学】
2020/02/12 Python
如何基于Python pygame实现动画跑马灯
2020/11/18 Python
如何用python实现一个HTTP连接池
2021/01/14 Python
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
2016/01/20 HTML / CSS
JBL英国官网:JBL UK
2018/07/04 全球购物
求职简历中个人的自我评价
2013/12/25 职场文书
信息学院毕业生自荐信范文
2014/03/04 职场文书
乡镇爱国卫生月活动总结
2014/06/25 职场文书
学校工作推荐信范文
2014/07/11 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书
实习介绍信模板
2015/01/30 职场文书
幼师求职自荐信
2015/03/26 职场文书
计划生育工作总结2015
2015/04/03 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
经营场所使用证明
2015/06/19 职场文书
创业计划书之干洗店
2019/09/10 职场文书
还在手动盖楼抽奖?教你用Python实现自动评论盖楼抽奖(一)
2021/06/07 Python
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
2021/11/27 Vue.js
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL