uniapp小程序之导航栏tab切换

手可摘棉花
1,942 阅读4分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。

嗨！大家好！我是手可摘棉花，一名前端开发，很开心在这里分享文章，期待着大家的点赞👍与关注➕。

简介

项目中常用的功能有很多，导航栏切换是其中一种，本文主要介绍一下uniapp小程序导航栏tab切换如何实现，导航栏标题少的时候，或超出宽度滑动滚动效果，导航栏点击切换内容。下面简单的给大家介绍一下怎么实现。

项目创建

  1. 首页打开HBuilder X，新建项目tab，然后点击运行微信开发者工具，跳转过去查看小程序展示效果，然后你会发现开发者工具那边会看到下图的报错。

01.png 解决方法(填写AppID重新运行就可以了)

02.png

项目创建列表如下

03.png

导航切换

小程序导航栏点击切换，主要实现的内容有，导航栏title滚动切换，内容多的时候可以水平滑动内容少的时候居中显示，自适应滑动效果，点击标题切换内容。下面是代码结束。

html代码如下：

<view class="tab">
		<view class="tab-hd">
			<view :class="{ 'tab-hd-status': true, selected: selected == 1 }" @tap="select(1)">热门</view>
			<view :class="{ 'tab-hd-status': true, selected: selected == 2 }" @tap="select(2)">新品</view>
			<view :class="{ 'tab-hd-status': true, selected: selected == 3 }" @tap="select(3)">资讯</view>
			<view :class="{ 'tab-hd-status': true, selected: selected == 4 }" @tap="select(4)">新闻</view>
			<view :class="{ 'tab-hd-status': true, selected: selected == 5 }" @tap="select(5)">博客</view>
		</view>
		<view class="tab-bd">
			<view class="new" v-if="selected==1">
				<navigator url="">
					<view class="title">
						4 月更文挑战 ，养成写作习惯，大奖等你来拿｜ 掘金 · 日新计划
					</view>
					<view class="time">
						2022-4-1
					</view>
					<view class="content">
						掘金更文挑战活动自 2021 年 6 月以来，已经举办了 4 期，累计 2500+ 掘友参与，创作了 7w+ 篇文章，近日更文挑战活动已经升级为「掘金 · 日新计划」
					</view>
				</navigator>
				<navigator url="">
					<view class="title">
						4 月更文挑战 ，养成写作习惯，大奖等你来拿｜ 掘金 · 日新计划
					</view>
					<view class="time">
						2022-4-1
					</view>
					<view class="content">
						掘金更文挑战活动自 2021 年 6 月以来，已经举办了 4 期，累计 2500+ 掘友参与，创作了 7w+ 篇文章，近日更文挑战活动已经升级为「掘金 · 日新计划」
					</view>
				</navigator>
			</view>
			<view class="new" v-if="selected==2">
				<navigator url="">
					<view class="title">
						css不规则不定宽高图片自适应object-fit使用跟传统区别
					</view>
					<view class="time">
						2022-4-2
					</view>
					<view class="content">
						本篇文章主要讲解object-fit实现图片的自适应,我们web或手机端布局的时候常遇到不规则图片的时候,如果限制宽度高度布局就会发现图片会变形，接下来我们来讲解一下用法。
					</view>
				</navigator>
			</view>
			<view class="new" v-if="selected==3">
				<navigator url="">
					<view class="title">
						uniapp开发小程序介绍
					</view>
					<view class="time">
						2022-4-3
					</view>
					<view class="content">
						今天来介绍uniapp开发小程序有哪些便捷的地方,一开始没用uniapp之前,写小程序的时候一直在微信开发者工具里面写,那时用跟之前web端开发h5开发的时候页面布局有区别的,标签不一样了,body的元素选择器请改为page，同样，div和ul和li等改为view、span和font改为text、a改为navigator、img改为image...标签明显少了很多,还有就是在里面布局的时候,效率有点低,比如你写view之后没办法快捷键的写,以前写div>ul>li*5>a直接快捷方式很快布局,这这里有点慢.
					</view>
				</navigator>
			</view>
			<view class="new" v-if="selected==4">
				<navigator url="">
					<view class="title">
						vue3 Composition API中的ref和reactive用法
					</view>
					<view class="time">
						2022-4-4
					</view>
					<view class="content">
						本篇文章主要讲解object-fit实现图片的自适应,我们web或手机端布局的时候常遇到不规则图片的时候,如果限制宽度高度布局就会发现图片会变形，接下来我们来讲解一下用法。
					</view>
				</navigator>
			</view>
			<view class="new" v-if="selected==5">
				<navigator url="">
					<view class="title">
						vue3使用组合API技巧
					</view>
					<view class="time">
						2022-4-5
					</view>
					<view class="content">
						本篇文章主要讲解object-fit实现图片的自适应,我们web或手机端布局的时候常遇到不规则图片的时候,如果限制宽度高度布局就会发现图片会变形，接下来我们来讲解一下用法。
					</view>
				</navigator>
			</view>
		</view>
	</view>

小程序的js代码：

export default {
	data() {
		return {
			selected: 1
		};
	},
	onLoad() {},
	methods: {
		//tab切换
		select(num) {
			this.selected = num;
		}
	}
};

样式代码：

<style lang="scss">
page{
	background: #f8f8f8;
}
.tab{
	.tab-hd {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		background: #fff;
		display: flex;
		flex-wrap: nowrap;
		overflow-y: scroll;
		// border-bottom: 1px solid #eee;
		margin-bottom: 24rpx;
		.tab-hd-status{
			flex: 1;
			flex-shrink: 0;
			flex-basis: 24%;
			text-align: center;
			font-size: 28rpx;
			&.selected{
				color: #ea5413;
				font-weight: bold;
				position: relative;
				&::after{
					content: "";
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
					margin: auto;
					width: 16%;
					// height: 4rpx;
					border-bottom: 4rpx solid #ea5413;
				}
			}
		}
	}
	.tab-bd{
		.new{
			navigator{
				padding: 24rpx;
				background: #fff;
				margin-bottom: 16rpx;
			}
			.title{
				font-size: 30rpx;
				margin-bottom: 16rpx;
				color: #333;
			}
			.time{
				font-size: 24rpx;
				color: #999;
				margin-bottom: 24rpx;
				text-align: right;
			}
			.content{
				font-size: 26rpx;
				color: #666;
				line-height: 40rpx;
				overflow : hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;    /* 数值代表显示几行 */
				-webkit-box-orient: vertical;
			}
		}
	}
}
</style>

tab的标题栏内容布局，主要用flex布局：display: flex;然后限制不换行显示用flex-wrap: nowrap;最后水平方向滚动显示overflow-y: scroll;这个是内容多的时候，内容少的时候就设置flex：1；这样如果内容少的时候自适应居中显示。如下：

04.png

如果没有设置flex：1；内容少的时候就会缩小，不会全局显示，页面效果也不美观。内容多的时候我用了flex-basis: 24%;导航标题的大小是24%就是最多显示4个导航，超出的时候就会隐藏，滑动就可以看到超出内容了。

实现的效果如下展示：

tab-gif.gif

总结

在本节中，主要要点是学会导航栏布局，标题内容少/超出内容的时候显示样式的布局。还有就是点击切换时候的效果的实现，还有内容只显示两行超出隐藏等，感谢大家的阅读，如果觉得有用可以点个赞，谢谢~☺☺

avatar
文章
阅读
粉丝