搜索框&搜索按钮
输入框用Input实现，但是给input组件加边框用boder是没有用的，需要在外面加一个view，给view设置border
搜索框自带输入提示词是给input组件设置placeholder="XXX"
微信小程序的按钮不能自定义图片，所以给image设置点击事件来实现搜索按钮
搜索框和搜索按钮是在同一个view里面的，为了让二者并排，给此view设置布局，display: flex;
图片的大小需要给image标签设置样式，给其所在的容器设置大小没用，图片大小不会变的。
.wxml
<view class='container1'>
<view class="inputView" >
<input placeholder="爆浆芝士奶酪海绵蛋糕" auto-focus='true' class='input'/>
</view>
<view class="imageView">
<image src='/images/search.png' class='image'></image>
</view>
</view>
.wxss
.container1{
width: 100%;
margin-top: 0;
padding: 0;
height: 44px;
/* background-color: #FFCB57; */
display: flex;
}
.inputView{
border: px solid0 #000;
border-radius: 6px;
margin-left: 15px;
margin-top: 3px;
margin-bottom: 3px;
background-color: #F5F7F9;
width: 76%;
/* background-color: #EDD3ED;*/
}
.input{
margin-left: 30px;
padding-left: 10px;
height: 40px;
font-family: Arial, Helvetica, sans-serif;
}
.imageView{
margin-left: 4px;
width: 20%;
/* background-color: #C8EFD4; */
}
.image{
width: 44px;
height: 44px;
}
|
