uniapp实现搜索栏的方法:使用方法placeholder,代码为【
本教程操作环境:windows7系统、uni-app2.5.1版本,该方法适用于所有品牌电脑。
uniapp实现搜索栏的方法:
效果图:
完整代码:
export default {
data() {
return {
}
},
methods: {
}
}
.content1{
height: 150upx;
}
page{
background-color: #FFFFFF;
}
/* 搜索框 */
.search-ico, .search-ico-1{
width: 40upx;
height: 40upx;
}
.search-text{
font-size: 14px;
background-color: #FFFFFF;
height: 60upx;
width: 480upx;
}
.search-block{
display: flex;
flex-direction: row;
padding-left: 60upx;
position: relative;
top: -32upx;
}
.search-ico-wapper{
background-color: #FFFFFF;
display: flex;
flex-direction:column;
justify-content: center;
padding: 0upx 0upx 0upx 40upx;
border-bottom-left-radius:18px;
border-top-left-radius: 18px;
}
.search-ico-wapper1{
background-color: #FFFFFF;
display: flex;
flex-direction:column;
justify-content: center;
padding: 0upx 40upx 0upx 0upx;
border-bottom-right-radius:18px;
border-top-right-radius: 18px;
}
.shadow{
width: 638upx;
height: 60upx;
border-radius:18px;
-moz-box-shadow:0 0 10px #e6e6e6;
-webkit-box-shadow:0 0 10px #e6e6e6;
box-shadow:0 0 10px #e6e6e6;
position: relative;
top: -90upx;
left: 60upx;
}
相关免费学习推荐:编程视频