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 相关文章推荐
javascript设计模式 封装和信息隐藏(上)
Jul 24 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
Jul 02 Javascript
ExtJs动态生成treepanel的Json格式
Jul 19 Javascript
Vue.js 60分钟快速入门教程
Mar 28 Javascript
JavaScript判断输入是否为数字类型的方法总结
Sep 28 Javascript
vue2.0的虚拟DOM渲染思路分析
Aug 09 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
Dec 24 Javascript
vue+axios实现post文件下载
Sep 25 Javascript
使用vuex存储用户信息到localStorage的实例
Nov 11 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 03 Javascript
JS Generator 函数的含义与用法实例总结
Apr 08 Javascript
JS脚本实现定时到网站上签到/签退功能
Apr 22 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
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
PHP登陆后跳转到登陆前页面实现思路及代码
2014/01/17 PHP
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
2009/05/21 Javascript
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
深入理解JSON数据源格式
2014/01/10 Javascript
javascript判断变量是否有值的方法
2015/04/20 Javascript
jQuery实现鼠标选文字发新浪微博的方法
2016/04/02 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
2017/11/07 Javascript
nodejs项目windows下开机自启动的方法
2017/11/22 NodeJs
Three.JS实现三维场景
2018/12/30 Javascript
Vue使用axios出现options请求方法
2019/05/30 Javascript
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
Python实现的数据结构与算法之双端队列详解
2015/04/22 Python
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
python根据京东商品url获取产品价格
2015/08/09 Python
python处理按钮消息的实例详解
2017/07/11 Python
Python中拆分字符串的操作方法
2019/07/23 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
python SVD压缩图像的实现代码
2019/11/05 Python
聊聊python中的异常嵌套
2020/09/01 Python
Python Spyder 调出缩进对齐线的操作
2021/02/26 Python
html5 touch事件实现页面上下滑动效果【附代码】
2016/03/10 HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
2016/07/26 HTML / CSS
Zavvi美国:英国娱乐之家
2017/03/19 全球购物
Emporio Armani腕表天猫官方旗舰店:乔治·阿玛尼为年轻人设计的副线品牌
2017/07/02 全球购物
第一范式(1NF)、第二范式(2NF)和第三范式(3NF)之间的区别是什么?
2016/04/28 面试题
新员工培训个人的自我评价
2013/10/09 职场文书
班组长安全职责
2014/01/05 职场文书
《广玉兰》教学反思
2014/04/14 职场文书
读书之星事迹材料
2014/05/12 职场文书
乡镇个人对照检查材料
2014/08/22 职场文书
商铺门面租房协议书
2014/10/21 职场文书
向女朋友道歉的话
2015/01/20 职场文书
侵犯商业秘密的律师函
2015/05/27 职场文书
MySQL数据库表约束讲解
2022/06/21 MySQL