l***@qq.com
l***@qq.com
  • 发布:2019-09-20 14:58
  • 更新:2020-09-16 21:38
  • 阅读:1616

【报Bug】通过webview修改导航栏seachInput的属性,导致搜索框的提交事件失效

分类:uni-app
  1. 欲实现功能: 使用原生导航栏点击右上角搜索图标展示搜索框,点击取消按钮隐藏搜索框
  2. 实现方式:通过webview.setStyle()方法动态修改导航栏
  3. 遇到问题:动态改变导航栏只支持修改当前已经存在的元素或增加新的元素,不支持删除或隐藏已经存在的元素,修改已经存在的元素会导致该元素的关联事件失效
  4. 使用的关键代码如下

    //按钮监听  
    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 != '取消';  
    }  
    };  
2019-09-20 14:58 负责人:无 分享
已邀请:
1***@qq.com
1***@qq.com

1***@qq.com

hhhjjk

DCloud_App_Array

DCloud_App_Array

  1. 目前不支持隐藏已经设置的搜索栏,看代码你是通过设置搜索框的背景透明来隐藏,但实际上它还是存在的。后续我们可以添加属性来控制其隐藏和显示。
  2. 关联事件失效?请具体描述什么事件失效
  • 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
这个问题已经解决了

该问题目前已经被锁定, 无法添加新回复