⼩程序--搜索框样式总结
⾸先配置app.json⽂件
配置相应路径：编译后⽣成相应⽂件夹、及⽂件夹内的4个⽂件，⼀个⽂件夹即⼀个页⾯。；
所有的js⽅法都是⽤bindtap（点击事件）调⽤的。例：搜索（点击搜索调⽤a⽅法）
Input⽂本框的属性：hidden="{{对应js⾥data中的内容}}。例：hidden="{{!inputShowed}}（ input中的内容不显⽰） hidden=" {{inputShowed}}（显⽰input中的内容）
⽰例1：
先做⼀个最简单的⽂本框：在搜索框内输⼊想要搜索的内容，点击搜索就可以直接获取你想要的内容。
这是⼀个最简单的搜索框，点击搜索按钮调⽤接⼝完成搜索。基础代码如下：
wxml
<view>
<view>
<view class="weui-search-bar">
<view class="weui-search-bar__form">
<!-- 搜索框 -->
<view class="weui-search-bar__box">
<icon class="weui-icon-search_in-box" type="search" size="14"></icon>
<input type="text" class="weui-search-bar__input" placeholder="请输⼊搜索内容"/>
</view>
</view>
<!-- 搜索按钮，调⽤搜索查询⽅法 -->
<view class="weui-search-bar__cancel-btn" bindtap='⽅法名a'>搜索</view>
</view>
</view>
</view>
wxss
.weui-search-bar {
position: relative;
padding: 8px 10px;
display: -webkit-box;
display: -webkit-flex;
display: flex;
box-sizing: border-box;
background-color: #EFEFF4;
border-top: 1rpx solid #D7D6DC;
border-bottom: 1rpx solid #D7D6DC; }
.weui-icon-search_in-box {
position: absolute;
left: 10px;
top: 7px;
}
.
weui-search-bar__form {
position: relative;
-webkit-box-flex: 1;
-webkit-flex: auto;
flex: auto;
border-radius: 5px;
background: #FFFFFF;
border: 1rpx solid #E6E6EA;
}
.weui-search-bar__box {
position: relative;
padding-left: 30px;
padding-right: 30px;
width: 100%;
box-sizing: border-box;
z-index: 1;
}
.weui-search-bar__input {
height: 28px;
line-height: 28px;
font-size: 14px;
}
.
borderboxweui-search-bar__cancel-btn {
margin-left: 10px;
line-height: 28px;
color: #09BB07;
white-space: nowrap;
}
js
Page({
/**
* 页⾯的初始数据，可以为空
*/
data: {
},
// 查询搜索的接⼝⽅法
a: function () {
}
})
这是⼀个复杂点的搜索框样式：初始搜索框⽆法编辑和输⼊，点击搜索框使搜索框进⼊可编辑状态（在同⼀个页⾯完成），在搜索框内填⼊要搜索的内容
点击第⼀幅图中的搜索框，搜索框样式变成第⼆幅图中的样式，点击取消后变回第⼀幅图中的样式。基础代码如下：
wxml
<view>
<view class="weui-search-bar">
<view class="weui-search-bar__form">
<!-- 最初始时的搜索框 -->
<view class="weui-search-bar__box">
<icon class="weui-icon-search_in-box" type="search" size="14"></icon>
<input type="text" class="weui-search-bar__input" placeholder="搜索"/>
</view>
<!-- 可编辑时的搜索框 -->
<label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">
<icon class="weui-icon-search" type="search" size="14"></icon>
<view class="weui-search-bar__text">搜索</view>
</label>
</view>
<!-- 取消搜索 -->
<view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消</view>        </view>
</view>
</view>
wxss
.weui-search-bar {
position: relative;
padding: 8px 10px;
display: -webkit-box;
display: -webkit-flex;
display: flex;
box-sizing: border-box;
background-color: #EFEFF4;
border-top: 1rpx solid #D7D6DC;
border-bottom: 1rpx solid #D7D6DC; }
.weui-icon-search {
margin-right: 4px;
font-size: inherit;
}
.weui-icon-search_in-box {
position: absolute;
left: 10px;
top: 7px;
}
.weui-search-bar__text {
display: inline-block;
font-size: 16px;
}
.weui-search-bar__form {
position: relative;
-webkit-box-flex: 1;
-webkit-flex: auto;
flex: auto;
border-radius: 5px;
background: #FFFFFF;
border: 1rpx solid #E6E6EA;
}
.weui-search-bar__box {
position: relative;
padding-left: 30px;
padding-right: 30px;
width: 100%;
box-sizing: border-box;
z-index: 1;
}
.weui-search-bar__input {
height: 28px;
line-height: 28px;
font-size: 14px;
}
.weui-search-bar__label {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
border-radius: 3px;
text-align: center;
color: #9B9B9B;
background: #FFFFFF;
line-height: 28px;
}
.weui-search-bar__cancel-btn {
margin-left: 10px;
line-height: 28px;
color: #09BB07;
white-space: nowrap;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。