uni-app 原生导航 titleNView 搜索框分享

发布于 1周前 作者 sinazl 来自 Uni-App

uni-app 原生导航 titleNView 搜索框分享

贴子为以前的，官方已经集成了搜索框了
移步到这里看
https://uniapp.dcloud.io/collocation/pages?id=app-plus

经测试官方已修复安卓的BUG

以下是苹果的

苹果截图

以下是安卓的

安卓截图

操作方法，先配置是下page.json

{  
    "path": "你的页面",  
    "style": {  
        "backgroundColorTop": "#ebebeb",  
        "backgroundColorBottom": "#ebebeb",  
        "app-plus": {  
            "scrollIndicator": "none",  
            "titleNView": {  
                "titleText":"",//不要设置标题  
                "buttons": [{  
                    "text": "取消",  
                    "fontSize": "14"  
                }]  
            }  
        }  
    }  
}

不要设置标题，不然在安卓上就会显示出来，画的盖不住

以下操作在您要画搜索框的页面

在onload引用startcreatview就可以了

设置延迟，不做延迟会出现错误

startcreatview(){  
    var s = this;  
    s.TitleTimer = setTimeout(function() {  
        s.createView();  
    }, 100);//具体缓迟时间可以按需设置  
},

createView() {  
    clearTimeout(this.TitleTimer);  
    var s = this;  
    var pages = getCurrentPages();  
    var page = pages[pages.length - 1];  
    var currentWebview = page.$getAppWebview();  
    var nTitle = currentWebview.getTitleNView();  
        nTitle.draw(  
            [{  
                    "tag": "rect",  
                    "id": "rect",  
                    "color": "#999",  
                    "position": {  
                        "left": "50px",  
                        "right": "50px",  
                        "top": "7px",  
                        "bottom": "7px"  
                    },  
                    "rectStyles": {  
                        "color": "#f6f6f6",  
                        "radius": "30px",  
                        "borderColor": "#999"  
                    }  
                },  
                {  
                    "tag": "font",  
                    "id": "font",  
                    "text": "\ue466",  
                    "position": {  
                        "left": "55px",  
                        "width": "30px",  
                        "top": "7px",  
                        "bottom": "7px"  
                    },  
                    "textStyles": {  
                        "size": "13px",  
                        "fontSrc": "/static/uni.ttf",  
                        "color": "#999"  
                    }  
                },  
                {  
                    "tag": "input",  
                    "id": "input",  
                    "position": {  
                        "left": "80px",  
                        "right": "70px",  
                        "top": "7px",  
                        "bottom": "7px"  
                    },  
                    "inputStyles": {  
                        "placeholder": "关键字搜索",  
                        "borderRadius": "30px",  
                        "borderWidth": "0px",  
                        "fontSize": "13px",  
                        "type": "search",  
                        "fontSrc": "/static/uni.ttf",  
                        "color": "#999",  
                        onComplete: function(e) {  
                            console.log('点击搜索执行' + e.text)  
                        },  
                        onFocus: function(e) {  
                            console.log('获得焦点')  
                        },  
                        onBlur: function(e) {  
                            console.log('失去焦点')  
                        }  
                    }  
                }  
            ]  
        );  
},

如果只需要一个假搜索框，把上面代码的inputStyles部份替换为

"textStyles": {  
"size": "13px",  
"fontSrc": "/static/uni.ttf",  
"color": "#999"  
}

同时添加监听假搜索框的点击事件nTitle.addEventListener(‘click’, ‘点击事件’, false);


Harmonyos Next教程
1 回复

在uni-app中，使用原生导航栏（titleNView）可以自定义页面的顶部导航栏，包括添加搜索框和分享按钮。下面是一个示例代码，展示了如何在pages.json中配置原生导航栏，并在页面的生命周期函数中处理搜索框和分享按钮的逻辑。

pages.json 配置

首先，在pages.json中配置页面的原生导航栏。这里假设我们有一个名为index的页面。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "", // 隐藏默认标题
        "app-plus": {
          "titleNView": {
            "buttons": [
              {
                "text": "分享",
                "fontSrc": "/static/fonts/iconfont.ttf#icon-share", // 可选，自定义图标字体
                "fontSize": 16,
                "onTap": "handleShare" // 点击事件处理函数
              }
            ],
            "searchInput": {
              "placeholder": "搜索内容",
              "autoFocus": false,
              "onConfirm": "handleSearch" // 搜索确认事件处理函数
            }
          }
        }
      }
    }
  ]
}

页面生命周期函数处理

在pages/index/index.vue中，处理搜索框和分享按钮的逻辑。

<template>
  <view>
    <!-- 页面内容 -->
  </view>
</template>

<script>
export default {
  methods: {
    handleSearch(event) {
      // 处理搜索事件，event.value 是搜索框的值
      console.log('搜索内容:', event.value);
      // 这里可以添加搜索逻辑，比如发送请求到服务器
    },
    handleShare() {
      // 处理分享事件
      uni.showShareMenu({
        withShareTicket: true,
        menus: ['shareAppMessage', 'shareTimeline']
      });
      // 触发分享
      uni.share({
        title: '分享标题',
        path: '/pages/index/index', // 分享路径
        imageUrl: '/static/images/share.png', // 分享图标
        success: function () {
          console.log('分享成功');
        },
        fail: function (err) {
          console.error('分享失败:', err);
        }
      });
    }
  }
}
</script>

<style>
/* 页面样式 */
</style>

上述代码展示了如何在uni-app中使用原生导航栏的titleNView来添加搜索框和分享按钮，并分别处理它们的点击事件。handleSearch方法处理搜索框的确认事件，而handleShare方法处理分享按钮的点击事件。注意，fontSrc用于自定义分享按钮的图标，需要确保路径正确，并且已经引入了相应的字体文件。

回到顶部