- 欲实现功能: 使用原生导航栏点击右上角搜索图标展示搜索框,点击取消按钮隐藏搜索框
- 实现方式:通过webview.setStyle()方法动态修改导航栏
- 遇到问题:动态改变导航栏只支持修改当前已经存在的元素或增加新的元素,不支持删除或隐藏已经存在的元素,修改已经存在的元素会导致该元素的关联事件失效
-
使用的关键代码如下
//按钮监听 onNavigationBarButtonTap(res) { let isSearch = titleNViewUtil.isSearch(this); titleNViewUtil.showSearch(this, {placeholder: "输入关键词搜索"}, isSearch); //点击取消 if (!isSearch) { console.log("点击取消"); } }, //搜索提交监听 onNavigationBarSearchInputConfirmed(res) { console.log("点击搜索--关键词为:",res.text); }
//原生标题栏工具类 export const titleNViewUtil = { temp: { titleNView: {} }, showSearch(_this, searchInput, isSearch) { //#ifndef APP-PLUS if (true) { return; } //#endif let webview = _this.$mp.page.$getAppWebview(); let tn = webview.getStyle().titleNView; if (!searchInput) { searchInput = {} } let titleNView = webview.getTitleNView(); let titleTextId = 'titleText'; let titleText = plus.nativeObj.View.getViewById(titleTextId); if (isSearch) { if (titleText) { titleText.hide(); } this.temp.titleNView = JSON.parse(JSON.stringify(tn)); if (tn.searchInput) { tn.searchInput.disabled = false; tn.searchInput.autoFocus = true; tn.searchInput.backgroundColor = "#fff"; tn.searchInput.placeholderColor = '#999'; } else { tn.searchInput = Object.assign({ placeholder: "输入内容搜索", borderRadius: "6px", autoFocus: true, backgroundColor: "#fff", placeholderColor: '#999', align: 'left', disabled: false }, searchInput); } tn.buttons[0].width = '50px'; tn.buttons[0].text = '取消'; tn.buttons[0].fontSize = '17px'; } else { let temp = this.temp.titleNView; if (titleText) { titleText.show(); } else { titleNView.drawText(temp.titleText, {}, {color: temp.titleColor, size: temp.titleSize}, titleTextId); } webview.setTitleNViewSearchInputText(''); tn.buttons[0].width = temp.buttons[0].width; tn.buttons[0].text = temp.buttons[0].text; tn.buttons[0].fontSize = temp.buttons[0].fontSize; tn.searchInput.backgroundColor = 'rgba(0,0,0,0)'; tn.searchInput.disabled = true; tn.searchInput.placeholderColor = 'rgba(0,0,0,0)'; } webview.setStyle({ titleNView: tn }) }, isSearch(_this) { //#ifndef APP-PLUS if (true) { return false; } //#endif let webview = _this.$mp.page.$getAppWebview(); let tn = webview.getStyle().titleNView; return tn.buttons[0].text != '取消'; } };
4 个回复
1***@qq.com
hhhj
1***@qq.com
hhhjjk
DCloud_App_Array
l***@qq.com (作者)
搜索框点击输入法搜索,onNavigationBarSearchInputConfirmed()不会执行。
2019-09-23 08:56
DCloud_App_Array
回复 l***@qq.com: 请提供完整复现问题的示例应用,说明是Android还是iOS?具体设备型号
2019-09-23 12:26
向上生长
同样有此类似问题,setStyle修改了呈现分享按钮,分享按钮点击事件无效。
2020-07-29 15:14
向上生长
回复 向上生长: setStyle 按钮时 可以设置onClick事件,问题已解决
2020-07-29 15:19
咖啡加糖
https://ask.dcloud.net.cn/article/35374
这个问题已经解决了