uni-app学习03 首页的搜索框

代码

<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>
		</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;
	}
}
</style>

效果

注意

• 大小设置和位置设置
• 弹性布局和居中设置等