实现小程序自定义搜索框
废话不多说上代码
- 配置json文件参数
{
"usingComponents": {
},
"navigationStyle": "custom"
}
custom
属性为:自定义导航栏,只保留右上角胶囊按钮。
2.下面分享下个人所用的demo
wxml
<view class="custom-bar" style="height:{{navHeight}}px">
<view class="custom-bar__wrapper"
style="margin-top:{{searchMarginTop}}px; height: {{searchHeight}}px;width: {{searchWidth}}px">
<text bindtap="handlbak" class="iconfont icon-fanhuianniu iconcss"></text>
<view class="search-group">
<input class="search-group__input" bindconfirm="searchBtn" auto-focus placeholder="输入手机号,姓名"
value="{{inputValue}}" bindinput="searchitem" />
<view style="width:80rpx" bindtap="searchhandl">
<text style="padding-left: 12px;" class="iconfont icon-sousuotubiao"></text>
</view>
</view>
</view>
</view>
wxss
.custom-bar {
/* background-color: #aaa; */
background-color: #fff;
position: fixed;
left: 0;
top: 0;
width: 100%;
}
.custom-bar__wrapper {
padding: 0 10rpx;
display: flex;
justify-content: center;
align-items: center;
}
.search-group {
width: 80%;
height: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
border: 1px solid #666;
border-radius: 60rpx;
padding: 0 10rpx;
}
.search-group > input {
font-size: 25rpx;
}
.search-group__input {
width: 100%;
}
.iconcss {
margin-right: 10px;
}
js
//#region 自定义搜索框
this.setData({
menuButtonInfo: wx.getMenuButtonBoundingClientRect()
})
console.log(this.data.menuButtonInfo)
const {
top,
width,
height,
right
} = this.data.menuButtonInfo
wx.getSystemInfo({
success: (res) => {
const {
statusBarHeight
} = res
const margin = top - statusBarHeight
this.setData({
navHeight: (height + statusBarHeight + (margin * 2)),
searchMarginTop: statusBarHeight + margin, // 状态栏 + 胶囊按钮边距
searchHeight: height, // 与胶囊按钮同高
searchWidth: right - width // 胶囊按钮右边坐标 - 胶囊按钮宽度 = 按钮左边可使用宽度
})
},
})
//#endregion
ps:图标是阿里图标库的,有需要的自取
文章:阿里矢量图标库的使用