uni-app学习03 首页的搜索框
【代码】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>
效果
注意
- 大小设置和位置设置
- 弹性布局和居中设置等
更多推荐
已为社区贡献2条内容
所有评论(0)