在uni-app中为页面配置输入框的方法
{
"path": "pages/search-list/search-list",
"style": {
"navigationBarTitleText": "搜索",
"navigationBarBackgroundColor": "#fff",
"app-plus": {
"scrollIndicator": "none",
"titleNView": {
"searchInput": {
"placeholder": "请输入内容",
"disabled": true,
"align": "left",
"borderRadius": "15px",
"backgroundColor": "#F7F7F7",
"placeholderColor": "#B3B3B3"
},
"buttons": [
{
"float": "right",
"color": "#636263",
"text": "筛选",
"fontSize": "16px",
"width": "44px"
}
]
}
}
}
}
上面的json配置默认是固定的,如果想将搜索的结果动态传递到搜索框中显示
如下:
传递参数进行路由跳转
uni.navigateTo({
url: `../search-list/search-list?keyword=${temp}`
})
在onLoad中接收参数并将数据动态设置到搜索框中
onLoad({ keyword }) {
// #ifdef APP-PLUS
let webView = this.mp.page.getAppWebview()
webView.setTitleNViewSearchInputText(keyword)
// #endif
// #ifdef H5
let inputSearch = document.querySelector('.uni-input-input[type=search]')
var evt = new InputEvent('input', {
inputType: 'insertText',
data: keyword,
dataTransfer: null,
isComposing: false
})
if (inputSearch) {
inputSearch.value = keyword
inputSearch.dispatchEvent(evt)
}
// #endif
}
文章评论