uni-app学习06 滑动导航栏的数据渲染和导航栏点击高亮

滑动导航栏的数据渲染

代码

<view class="item":class="{active:index==activeIndex}" v-for="(item,index) in navList":key="item.sid">
				{{item.name}}
			</view>

定义item类，通过active属性的值index控制item是否被激活；在style标签中定义.item.active的样式，从而区别item类的激活状态和未激活状态。

全部代码：

<!-- home.vue -->
<template>
	<view>
		<!-- 搜索框 -->
		<view class="myHeader">
			<image src="../../static/images/search.png" class="search_icon" mode=""></image>
			<view class="search"><input type="text" name="" id="" placeholder="请输入搜索内容:" /></view>
			<view class="btn">搜索</view>
		</view>
		<!-- 导航栏 -->
		<scroll-view class="myNav" scroll-x="true" enable-flex>
			<!-- 遍历渲染视图view -->
			<!-- Vue指令:v-for 基于源数据多次渲染元素或模板块 -->
			<view class="item":class="{active:activeIndex == -1}">推荐</view>
			<view class="item":class="{active:index==activeIndex}" v-for="(item,index) in navList":key="item.sid">
				{{item.name}}
			</view>
		</scroll-view>
		<view class="goods" name="goods" id="goods">
			<ul>
				<li>商品1</li>
				<li>商品2</li>
				<li>商品3</li>
				<li>商品4</li>
				<li>商品5</li>
				<li>商品6</li>
			</ul>
		</view>
	</view>
</template>

<script>
	import base from '@/utils/base.js';
	import request from '@/utils/request.js';
	export default {
		data() {
			return {
				// 循环项：-1
				navList:[],//滑动导航区域容器
				activeIndex:-1,//高亮的变量标识
			};
		},
		// 生命周期
		created() {
			this.getIndexData()
		},
		methods: {
			// 请求首页的动态数据信息
			// async 关键字写在函数名之前（相当于一个标识），
			// 让普通函数具有异步的行为特征，
			// 但是整体上代码却是同步执行的。
			async getIndexData(){
				// let用来声明变量。用法类似于var，但是所声明的变量，
				// 只在let命令所在的代码块内有效。
				let res = await request(base.host+base.indexData)
				console.log('首页动态数据---',res);
				this.navList = res.data;
				console.log(this.navList);
			}
		}
	};
</script>

<style lang="scss" scoped>
//顶部搜索框
.myHeader {
	// 弹性布局
	display: flex;
	// 属性定义元素边框与元素内容之间的空间
	padding: 10rpx;
	// 调整search_icon的大小
	.search_icon {
		//px是像素，固定大小；rpx是响应式像素，可以根据屏幕宽度自适应
		width: 60rpx;
		height: 60rpx;
		// 边框，上下为0，左右为10rpx
		margin: 0 10rpx;
	}
	.search {
		border: 1px solid #595959;
		// 为元素添加圆角边框,数值表示圆角的水平半径
		border-radius: 10px;
		flex: 1;
		padding-left: 5rpx;
		display: flex;
	}
	.btn {
		width: 90rpx;
		text-align: center;
	}
}
.myNav {
	height: 50rpx;
	white-space: nowrap;
	display: flex;
	background-color: #fff;
	border-bottom: #e5e5e5;
	color: #000000;
	.item{
		flex: 1;
		margin: 10rpx;
		color: #9b9b9b;
	}
	.item.active{
		color: #4caf50;
		text-decoration: underline;
	}
	// 字体大小应当在App.vue中设置，全局统一使用
	// view{
	// 	font-size: 30rpx;
	// }
.goods{
	display: flex;
	
}
	
}
</style>

效果

导航栏点击高亮

全部代码

<!-- home.vue -->
<template>
	<view>
		<!-- 搜索框 -->
		<view class="myHeader">
			<image src="../../static/images/search.png" class="search_icon" mode=""></image>
			<view class="search"><input type="text" name="" id="" placeholder="请输入搜索内容:" /></view>
			<view class="btn">搜索</view>
		</view>
		<!-- 导航栏 -->
		<scroll-view class="myNav" scroll-x="true" enable-flex>
			<!-- 遍历渲染视图view -->
			<!-- Vue指令:v-for 基于源数据多次渲染元素或模板块 -->
			<view class="item":class="{active:activeIndex == -1}" @click="changeIndex(-1)">推荐</view>
			<view class="item"
				:class="{active:index==activeIndex}" 
				v-for="(item,index) in navList":key="item.sid"
				@click="changeIndex(index)">{{item.name}}</view>
				<!-- @click="function" 意为发生点击事件时，执行函数 -->
		</scroll-view>
	</view>
</template>

<script>
	import base from '@/utils/base.js';
	import request from '@/utils/request.js';
	export default {
		data() {
			return {
				// 循环项：-1
				navList:[],//滑动导航区域容器
				activeIndex:-1,//高亮的变量标识
			};
		},
		// 生命周期
		created() {
			this.getIndexData()
		},
		methods: {
			// 请求首页的动态数据信息
			// async 关键字写在函数名之前（相当于一个标识），
			// 让普通函数具有异步的行为特征，
			// 但是整体上代码却是同步执行的。
			async getIndexData(){
				// let用来声明变量。用法类似于var，但是所声明的变量，
				// 只在let命令所在的代码块内有效。
				let res = await request(base.host+base.indexData)
				console.log('首页动态数据---',res);
				this.navList = res.data;
				console.log(this.navList);
			},
			// 点击导航高亮
			changeIndex(index){
				this.activeIndex=index
			}
			
		}
	};
</script>

<style lang="scss" scoped>
//顶部搜索框
.myHeader {
	// 弹性布局
	display: flex;
	// 属性定义元素边框与元素内容之间的空间
	padding: 10rpx;
	// 调整search_icon的大小
	.search_icon {
		//px是像素，固定大小；rpx是响应式像素，可以根据屏幕宽度自适应
		width: 60rpx;
		height: 60rpx;
		// 边框，上下为0，左右为10rpx
		margin: 0 10rpx;
	}
	.search {
		border: 1px solid #595959;
		// 为元素添加圆角边框,数值表示圆角的水平半径
		border-radius: 10px;
		flex: 1;
		padding-left: 5rpx;
		display: flex;
	}
	.btn {
		width: 90rpx;
		text-align: center;
	}
}
.myNav {
	height: 50rpx;
	white-space: nowrap;
	display: flex;
	background-color: #fff;
	border-bottom: #e5e5e5;
	color: #000000;
	.item{
		flex: 1;
		margin: 10rpx;
		color: #9b9b9b;
	}
	.item.active{
		color: #4caf50;
		text-decoration: underline;
	}
	// 字体大小应当在App.vue中设置，全局统一使用
	// view{
	// 	font-size: 30rpx;
	// }
.goods{
	display: flex;
	
}
	
}
</style>

效果