uni-app中h5页面中添加搜索按钮及监听

最新推荐文章于 2024-05-22 10:40:23 发布

@搬砖小能手

最新推荐文章于 2024-05-22 10:40:23 发布

阅读量1.4k

点赞数

分类专栏： uni-app 文章标签：前端

本文链接：https://blog.csdn.net/weixin_44706621/article/details/119242219

版权

uni-app 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

本文档详细介绍了在uni-app中使用web-view遇到的页面标题栏重叠和搜索按钮显示问题，以及如何通过自定义方法和生命周期钩子解决这些问题。包括在page.json中设置导航栏为custom，封装js库来控制搜索按钮的显示和隐藏，并在onShow和created生命周期中应用延迟加载策略确保按钮正常显示。

摘要由CSDN通过智能技术生成

uni-app中嵌套web-view

虽然uni-app能嵌套web-view但是会出现页面标题栏重叠的问题，所以打开的h5页面中会在page.json中将当前页面的导航栏标题去除。

        {
            "path" : "pages/clew-pool/clew-pool-index/clew-pool-index",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "线索池",
                "enablePullDownRefresh": false,
                "navigationBarBackgroundColor":"#FFFFFF",
                "navigationStyle": "custom",//去除h5导航栏标题
                "h5": {
                    "titleNView": {
                        "buttons": [
							{
								"text": "\ue6f5",
                                "fontSrc": "/static/fonts/iconfont.ttf",
								"fontWeight": "normal",
                                "width": "30px",
								"fontSize": "36rpx",
								"float": "right"
							}
						]
                    }
                }
            }
        },

但是自定义右边栏搜索按钮也将会去除掉，所以为了补充上去引入了web-view方法，先来看效果
在这里插入图片描述
这个是用web-view打开h5页面后通过web-view官方说明得到的一个搜索设置
将js方法封装在公共js库中如下：

// 右上角不显示搜索按钮
export function uniSetEmpty() {
  console.log('uniSetEmpty',new Date().getTime())
  uni.webView.postMessage({
    data: {
      action: "setRightEmpty",
    },
  });
}
// 右上角设置显示搜搜按钮
export function uniSetSearch() {
  console.log('onTGAppCallBacktype=',new Date().getTime())
  uni.webView.postMessage({
    data: {
      action: "setRightMenu",
    },
  });
}

页面引入如下：

<script>
import { uniSetEmpty, uniSetSearch } from "@/utils/tool/uni.js";//封装js库的路径
export default {
data() {
    return {
    
    	}
   	 },
//uni-app执行的生命周期
onShow() {
    let _this = this;
    //设置搜索按钮
    uniSetSearch();
    console.log("onShow-设置搜索按钮");
    //点击搜索按钮的回调事件
    window.onTGAppCallBack = function (res) {
      _this.jumpSearchPage();
    };
  },
  methods: {
  //右侧搜索按钮点击事件
    jumpSearchPage() {
      console.log("jumpSearchPagejumpSearchPage");
      uni.navigateTo({
        url: "/pages/clew-pool/clew-pool-list/clew-pool-list"
      })
    }
  }
 }
 </script>

注意：上面执行的生命周期可能会出现偶现搜索按钮出现不出来问题，但 onShow 这个生命周期里面是必须要写上的，所以可以在其它生命周期里面加上延时器解决此问题，比如：从APP第一次进入web-view可能会偶现搜索按钮不能及时出现

解决办法如下：

<script>
import { uniSetEmpty, uniSetSearch } from "@/utils/tool/uni.js";//封装js库的路径
export default {
data() {
    return {
    
    	}
   	 },
   	 
created() {
    let _this = this;
    setTimeout(() => {
      //设置搜索按钮
      uniSetSearch();
      console.log("created-设置搜索按钮");
      //点击搜索按钮的回调事件
      window.onTGAppCallBack = function (res) {
        _this.jumpSearchPage();
      };
    }, 500);
  },
  
//uni-app执行的生命周期
onShow() {
    let _this = this;
    //设置搜索按钮
    uniSetSearch();
    console.log("onShow-设置搜索按钮");
    //点击搜索按钮的回调事件
    window.onTGAppCallBack = function (res) {
      _this.jumpSearchPage();
    };
  },
  
methods: {
  //右侧搜索按钮点击事件
    jumpSearchPage() {
      console.log("jumpSearchPagejumpSearchPage");
      uni.navigateTo({
        url: "/pages/clew-pool/clew-pool-list/clew-pool-list"
      })
    }
  }
 }
 </script>