周亚博的个人博客

  • 首页
  • 盛夏光年
  • 陪风去荡
  • 布响丸啦
我频繁记录着 因为生活值得
  1. 首页
  2. 布响丸啦
  3. 正文

uni-app动态为导航栏中的搜索框设置文本

2022-09-20 55点热度 0人点赞 0条评论

在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
}
标签: unp-app
最后更新:2022-09-20

粥呀Bo

所谓惊喜,就是苦苦等候的兔子来了,后面却跟着狼

点赞
< 上一篇
下一篇 >

文章评论

取消回复

COPYRIGHT © 2022 zhouyaker.cn. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS

陕ICP备2022009272号