【小程序】导航栏和内容页面联动效果实现

已于 2022-12-06 00:54:49 修改
阅读量943 收藏 1
点赞数 3
分类专栏： 小程序 文章标签： 小程序 微信小程序 前端
于 2022-12-02 00:29:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62159662/article/details/127890427
版权

💭💭

✨： 微信小程序导航栏和页面联动
 
💟：东非不开森的主页
 
💜: 因为很多东西来不及去做去看可是时间很快总是赶不上，所以要去成长呀💜💜
 
🌸: 如有错误或不足之处，希望可以指正，非常感谢😉
 

应用场景：页面和上方导航栏联动

  • 我们可以考虑使用轮播图
  • 在小程序中呢，不同机型内容高度不一样，所以我们需要动态获取
  • 然后这个高度动态的放在轮播图里面

 
为什么需要获取高度？

因为我们滑动的时候要在任意位置都可以滑动，而每种机型是不一样的，所以我们需要动态的获取机型的内容高度，并且动态展示

  • 这个高度可以在app.js中全局获取，那么无论那个页面都可以使用

在这里插入图片描述

  • 使用这个高度，添加到swiper上面

在这里插入图片描述

  • 轮播图部分

在这里插入图片描述
在这里插入图片描述

  • 导航栏部分

在这里插入图片描述

  • css部分

在这里插入图片描述

效果：
请添加图片描述

东非不开森
关注
专栏目录
微信小程序 - 实现导航栏和内容上下联动功能
sunshime的博客
04-02 2902
  今日给大家分享一下如何实现导航栏（nav）和内容部分上下联动（相关代码模块我已单独整理放到github上面了，欢迎前来start）。 一、效果图： github地址：https://github.com/sunshime/weChatSkill 二、实现过程：    主要是使用 scroll-view 实现导航栏部分，用 swiper 实现下面的内容部分，通过 swiper 的 curren...
微信小程序分类-左侧导航与右侧内容联动
热门推荐
zhouhangzooo的博客
03-24 1万+
左侧导航与右侧内容联动一、首先是点击左侧导航，我们右侧内容需要滑动至相应的位置。 思路是：点击左侧某一项，获取该元素的id，也就是左侧view的id，然后动态传到右侧内容的scroll-into-view，scroll-into-view的值为某个子元素的id， 这里的子元素说的是右侧的view，我们将左侧view的id和右侧view的id设置为同一个值时，这样当左侧id发生变化时，scroll...
微信小程序实现导航栏和内容上下联动功能代码
10-15
主要介绍了微信小程序实现导航栏和内容上下联动功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
小程序导航栏与内容区上下联动的实现
宝贝QY的博客
10-22 4497
小程序导航栏与内容区联动实现方法
vue实现导航栏吸顶效果 + 与内容联动
sfyjknvcx的博客
12-31 7774
大家好，我是南宫。今天写一篇博客来整理下最近刚解决的一个问题，那就是导航栏跟内容联动的问题。 简单说一下我想要的效果：写了一个宽度为屏幕100%的div，居中的部分是一个导航栏，水平排列，默认位于banner下，如果页面滚到了banner下面，要让导航栏固定顶部。如果页面滚到了下方对应的内容，那就高亮对应的tab标记。如果点击了tab，那就要让页面滚到对应的内容，并且让该tab高亮。 （效果是动态的，我随便截取一个场景来展示吧，比如我点击“应用场景”的时候，页面滚动到了对应的内容区域，并且对应的tab高
小程序滚动组件，左边导航栏与右边内容联动效果实现
厦门在乎科技
10-09 1522
一 ：点击分类内容区域对应滚动 动态绑定navActive的值，来决定哪个分类被选中，选中类则为active,否则为空，将选中样式写到active里。 然后为点左边右边跳到相应商品，这里主要用到的锚点，小程序在scroll-view里提供了一个scroll-into-view <scroll-view scroll-y="true" style='height:{{conHeight}}rpx;' scroll-into-view="{{contentActive}}" scroll-with-
小程序scroll-view滚动组件，左边导航栏与右边内容联动效果实现
guairena的博客
05-24 4407
效果 左侧为年份，右侧为该年对应的月份，点击左侧2020年，则右侧的2020年灰色区域的标题滚动到最顶部；滚动右侧区域当2020年滚动到顶部时，左侧选中2020年高亮显示。 思路 使用scroll-view组件分别包裹左侧及右侧内容，点击左侧年份时，给其动态设置样式并让右侧区域滚动到指定位置；通过给右侧的scroll-view标签绑定scroll-into-view属性，值为某子元素id，根据id滚动到该元素。给右侧每一年份区域设置id值，左侧点击事件携带该点击项的id值，并将该值动态绑定给scroll.
导航栏联动效果（ HorizontalScrollView+ViewPager）
01-05
以HorizontalScrollView与Viewpager实现分页滑动，类似淘宝分页滑动效果，其中头部局可以自定义
vue.js Intersection Observer api 实现双向联动
qq_37309987的博客
09-22 1321
解决方案：使用 js 提供的 intersectionObserver api 实现，此 api 可观察目标元素与其祖先元素或顶级文档视口交叉状态，通过交叉状态来实现双向联动。描述：移动端侧边栏导航和右侧内容双向联动，用户点击左侧侧边栏导航，右侧内容能快速定位到内容区域，右侧内容在滚动时，左侧导航会高亮显示当前内容所对应的导航。问题难点：右侧内容滚动时，左侧导航能定位到当前内容对应的导航。1、侧边栏导航子组件 sideBar.vue。2、内容区域子组件 content.vue。
微信小程序导航条配置图片背景
RealizeInnerSelf丶
08-23 6500
文章目录微信小程序导航条配置图片背景全部页面替换就首页特殊，其他页面纯色导航条（沿用微信那套）相关代码如果你觉得写的不错或者帮到你了，记得给我点个赞哟~ 微信小程序导航条配置图片背景 需要实现通栏背景的效果（导航那里还有背景图片） 全部页面替换 如果自定义导航栏，会存在需要考虑的问题 如果有上一页，就返回上一页，否则直接返回首页（首页），图标也要跟着换 标题取配置里的（如果可以的话，否则就用组件传参，去掉配置里的，以免造成误解） 背景图片拼接（首页的时候） 就首页特殊，其他页面纯色导航条（
Html 导航和内容联动效果
小诏
07-11 251
【代码】Html 导航和内容联动效果。
uni-app【微信小程序】顶部tab栏与页面内容联动
最新发布
qq_43015778的博客
03-15 1212
uniapp 微信小程序 点击tab切换下面的页面信息；滑动下面的页面信息tab也进行切换。
小程序自定义导航栏
labu1_mei的博客
12-24 815
微信小程序自定义导航栏
微信小程序的底部菜单栏实现和界面顶部显示
橙子的博客
04-19 2324
准备工作： 阿里图标库https://www.iconfont.cn/collections/detail?cid=29 在这个网站上下载一些自己要用到的图标，比如人员头像，home主页等一些常用的图标，直接点击下载保存到本地，修改一下命名。 回到项目里，新建一个images文件夹，将刚刚下载好的图标放在文件夹底下备用，将上述起好名字的图标 保存到 小程序 项目目录中 新创建的 images 文件夹中，准备工作就做好了。 一、底部菜单栏实现 1、效果图展示 2、代码展示 在根目录中
微信小程序：（动态获取数据）实现三级联动
weixin_43717273的博客
05-23 4468
前两天用小程序做项目，需要从数据库里取数据来实现三级联动 wxml里使用组件： <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}" ...
微信小程序开发 — 顶部导航栏
weixin_45115446的博客
06-01 527
微信小城序开发顶部导航栏
微信小程序滑动切换导航，导航栏跟随顶部tab导航滚动
厦门在乎科技
09-06 5764
前言 很多App都有这种设计，例如淘宝、爱奇艺、今日头条、知乎等都有用到，大部分的App都会用到这种设计，非常主流。 tab导航栏使用<scroll-view>标签，内容使用<swiper>，不多说，直接上代码，为了更真实展示实例的使用，我直接就配置了服务器来取数据进行渲染。 index.wxml <view class="container"> <!-- tab导航栏 --> <!-- scroll-left属性可以控制滚动条
微信小程序scroll-view滑动点击跟随导航
xinnianchen的博客
07-29 440
【代码】【无标题】
微信小程序左边导航栏与右边内容联动效果实现
06-09
要实现微信小程序左边导航栏与右边内容联动效果，可以使用组件和事件的方式来实现。 1. 首先，在wxml文件中添加左侧导航栏组件，如`scroll-view`组件。 2. 在js文件中定义数据，保存导航栏和内容的信息，如： ``` data: { navList: [{id: 1, name: '导航1'}, {id: 2, name: '导航2'}, {id: 3, name: '导航3'}], currentNavId: 1 } ``` `navList`保存导航栏的信息，`currentNavId`保存当前选中的导航栏id。 3. 在wxml文件中添加右侧内容的组件，如`view`组件，并绑定一个`scroll-into-view`的属性，将其值绑定到当前选中的导航栏id，实现联动效果。 ``` <view scroll-into-view="{{ 'nav' + currentNavId }}"></view> ``` 4. 在左侧导航栏组件中，添加`bindtap`事件，当点击某一个导航栏时，将当前导航栏id保存到`currentNavId`中，并触发`scroll-into-view`事件，实现联动效果。 ``` <scroll-view scroll-y="true"> <view wx:for="{{ navList }}" wx:key="{{ item.id }}" bindtap="changeNav" id="{{ 'nav' + item.id }}">{{ item.name }}</view> </scroll-view> ``` ``` changeNav: function (e) { const navId = e.currentTarget.id.replace('nav', ''); this.setData({ currentNavId: navId }); } ``` 这样，就可以实现微信小程序左侧导航栏与右侧内容联动的效果了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

东非不开森

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值