uni-app学习04 添加横向滑动导航栏

导航栏

<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 class="item">推荐1</view>
			<view class="item">推荐2</view>
			<view class="item">推荐3</view>
			<view class="item">推荐4</view>
			<view class="item">推荐5</view>
			<view class="item">推荐6</view>
			<view class="item">推荐7</view>
			<view class="item">推荐8</view>
			<view class="item">推荐9</view>
			<view class="item">推荐10</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {}
};
</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 {
	white-space: nowrap;
	display: flex;
	color: #b5b5b5;
	.item{
		flex: 1;
		margin: 10rpx;
	}
	view{
		font-size: 30rpx;
	}
}
}
</style>

效果图