小程序导航栏与内容区上下联动的实现

前言

之所以把这个功能写出来，是经常看到小伙伴问类似的问题，在这里就详细讲解下整个实现过程，虽然没涉及到什么难点，但希望可以帮助到对这方面还有困惑的朋友。

使用框架及技术

mpvue官方文档

小程序官方文档

源码地址

https://gitee.com/roberthuang123/miniCase.git

实现步骤

<template><div class="nav"><scroll-view scroll-x class="tab" :scroll-left="scrollLeft" v-if="getSrcFlag"><div class="tab-item" v-for="(item, index) in tabList" :key="index" :class="currentTab===index?'active':''" @tap="switchNav(index)">{{item}}</div></scroll-view><swiper class="swiper":current="currentTab"@change="switchTab":style="{height:winHeight+'rpx'}"><block v-for="(item, index) in swiperList" :key="index"><swiper-item class="item"><scroll-view class="item-box" scroll-y><div class="box-content" v-for="(itemSecond, indexSecond) in contentList" :key="indexSecond"><image :src="itemSecond.img" class="content-l"/><div class="content-m"><h3 class="name">{{itemSecond.name}}</h3><p class="type">{{itemSecond.type}}</p><p class="desc">{{itemSecond.desc}}</p></div><button class="btn" @tap="hint">问TA</button></div></scroll-view></swiper-item></block></swiper><div class="loading-container" v-if="!getSrcFlag"><loading></loading></div></div>
</template><script>
import tools from 'common/js/tools'
import Loading from 'components/loading'
export default {name: 'NavBar',data () {return {winHeight: '',currentTab: 0,scrollLeft: 0,tabList: ['健康', '情感', '职场', '育儿', '纠纷', '青葱', '全部', '其他'],swiperList: [0, 1, 2, 3, 4, 5, 6, 7],contentList: [{img: '../../static/images/man.png',name: '欢颜',type: '知名情感博主',desc: '134个回答，2234人听过'}, {img: '../../static/images/man.png',name: '欢颜',type: '知名情感博主',desc: '134个回答，2234人听过'}, {img: '../../static/images/man.png',name: '欢颜',type: '知名情感博主',desc: '134个回答，2234人听过'}, {img: '../../static/images/man.png',name: '欢颜',type: '知名情感博主',desc: '134个回答，2234人听过'}, {img: '../../static/images/man.png',name: '欢颜',type: '知名情感博主',desc: '134个回答，2234人听过'}, {img: '../../static/images/man.png',name: '欢颜',type: '知名情感博主',desc: '134个回答，2234人听过'}, {img: '../../static/images/man.png',name: '欢颜',type: '知名情感博主',desc: '134个回答，2234人听过'}, {img: '../../static/images/man.png',name: '欢颜',type: '知名情感博主',desc: '134个回答，2234人听过'}, {img: '../../static/images/man.png',name: '欢颜',type: '知名情感博主',desc: '134个回答，2234人听过'}, {img: '../../static/images/man.png',name: '欢颜',type: '知名情感博主',desc: '134个回答，2234人听过'}, {img: '../../static/images/man.png',name: '欢颜',type: '知名情感博主',desc: '134个回答，2234人听过'}],getSrcFlag: false}},components: {Loading},onLoad () {const that = thiswx.getSystemInfo({success (res) {let clientHeight = res.windowHeightlet clientWidth = res.windowWidthlet rpxR = 750 / clientWidthlet calc = clientHeight * rpxR - 160that.winHeight = calc + 80console.log(res, calc, that.winHeight)that.getSrcFlag = true}})},methods: {switchTab (e) {const that = thisthat.currentTab = e.mp.detail.currentthat.checkTab()},switchNav (index) {const that = thisthat.currentTab = indexthat.checkTab()},checkTab () {const that = thisif (that.currentTab > 3) {that.scrollLeft = 300} else {that.scrollLeft = 0}},hint () {tools.showToast('对案例有任何疑问欢迎在相关文章给我留言~')}}
}
</script>

顶部导航

使用小程序scroll-view组件实现顶部导航，注意设置两个属性：

scroll-x
scroll-left

通过事件switchNav(index)来改变currentTab，动态添加class名，当currentTab>3时将scrollLeft设为300px。

内容区

使用小程序swiper组件实现内容区可左右滚动，通过swiper的change事件获取currentTab值

通过读取设备可使用宽高计算出内容区高度：

单个内容区需要上下滚动，依然借助scroll-view组件，设置scroll-y属性实现。

小程序导航栏与内容区上下联动的实现相关推荐

微信小程序导航栏或菜单栏吸顶效果简单实现
微信小程序导航栏或菜单栏吸顶效果简单实现思路: 1.获取导航栏初始位置距顶部的距离s1(通过获取页面标签方法) 2.监听页面的滑动,获取滑动距离s2(使用onPageScroll) 3.当s2> ...
如何去掉微信小程序导航栏，以及禁止页面滑动
如何去掉微信小程序导航栏,以及禁止页面滑动 1.微信小程序要去掉微信自带的导航栏,只需要在app.json中加上 "navigationStyle": "custom&q ...
微信小程序导航栏高度。分析手机状态栏高度、微信小程序胶囊高度等。
//获取系统信息的概念 console.log(uni.getSystemInfoSync()); let res = uni.getSystemInfoSync() //胶囊按钮的信息 consol ...
小程序导航栏文字更改
小程序导航栏文字更改在json文件中,对 navigationBarTitleText 进行更改. 如下: {"backgroundTextStyle": "light ...
小程序导航栏标题对齐问题
小程序导航栏标题,安卓是左对齐,ios是居中,暂时没法设置转载于:https://www.cnblogs.com/jcydd/p/10768003.html
微信小程序导航栏制作
导航栏制作微信小程序不同于H5,制作导航栏不方便,尤其是对于一个初学者来看:以为微信小程序中的Js与H5中的差不多,其实不然,以下就是我在学习微信小程序中制作的小程序导航栏. 页面代码 <vi ...
微信小程序导航栏怎么写
微信小程序写到到导航栏还是非常简单得,就算没有三大框架的基础,也是非常容易理解`的. 接下来我们看看他是如何操作的: 以电商页面中常见的导航为例,会了这一种,就是会了很多种,到时根据具体需求改动即可: ...
小程序导航栏颜色设置
导航栏的设置在实际的开发过程中,窗口页面的颜色是多样的,小程序默认的导航栏颜色不能满足我们的开发需求,需要自己去设置,刚好,小程序官方文档里提供了解决方法. 在app.json中可以配置全局(默认) ...
[小黄书小程序]导航栏和标题栏界面
我们前面几章已经将小黄书的后台基础框架给搭建好了.后台的小黄书相关的业务逻辑,会在往后根据客户端的业务需求来进行实现. 今天起我们会开始小黄书小程序的实现. 我们先看下小红书应用的主界面. 这一篇文章 ...