UNI-App custom navigation bar button | Uniapp imitation WeChat top navigation strip function

Recently I have been learning UNI-APP development. Since Uniapp is based on Vue.js technology, as long as you are familiar with Vue, it is basically able to get started.

Discover the uni-app native navigation bar in the development, you can also implement some top custom buttons + search boxes, just do some configurations in page.json. Set app-plus to configure a specific style to compile to the App platform. DCLOUD platform Detailed explanation for App-Plus: App-Plus configuration, you need to pay attention to currently supporting H5, APP, and does not support applets.

uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能

Configuring App-Plus in Page.json

 {"PATH": "Pages / Ucenter / index "," style ": {" NavigationBartitletext ":" My "," App-Plus ": {" TitlenView ": {" Buttons ": [{" text ":" \ ue670 "," fontsrc ":": " /static/iconfont.ttf "," Fontsize ":" 22px "," float ":" left "}, {" text ":" \ ue62c "," fontsrc ":" /static/iconfont.ttf "," Fontsize " ":" 22px "}]," SearchInput ": {...}}}}},   
For how to listen to buttons, input box events, UNI-APP give Out of the corresponding API, just put the ONNAVIGATIONBARBUTTONTAP and ONNAVIGATIONBARSEARCHINPUTCHANGED, write in the page of the response.

How can I achieve the top navigation bar like Jingdong, Taobao, WeChat, such as joining urban positioning, searching, custom pictures / icon, dot prompts. . .

The above method is to meet the general project requirements, but in the small program, it is invalid, and some complex navigation columns cannot be good. At this time, it can only seek other alternatives

When setting navigationStyle to Custom or TITLENVIEW, the native navigation bar does not display, then custom navigation bar

“GlobalStyle”: {“NavigationStyle”: “Custom”}

The following is a simple test example: Here to note that the H5, a small program, the APP terminal status bar are different, need Re-calculation, I have handled it here, you can use it directly, set in App.Vue

uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能 ONLAUNCH: function () {UNI.GETSYSTEMINFO ({SUCCESS : function (e) {vue.prototype.statusbar = E.StatusbarHeight // #ifndef mp if (E.PLATFORM == ‘Android’) {vue.prototype.custombar = E.StatusbarHeight + 50} else {vue.prototype. CustomBar = E.Statusbarheight + 45} // #ndif // #ifdef MP-Weixin Let Custom = wx.getMenuButtonBoundingClientRect () Vue.prototype.customBar = custom.bottom + custom.top – e.statusBarHeight // #endif // #ifdef MP-ALIPAY Vue.prototype.customBar = e.statusBarHeight + e.titleBarHeight // #ENDIF}}}}}}},

Hey, look at the effect, is it very familiar, true, is based on UNI-App Simple implementation a imitation WeChat Top Navigation Bar

   

uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能

  Add Friends  ->       <!--       

uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能

uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能

uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能

           
Add a friend

uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能

uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能

uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能 Supports incoming properties, and also uses Vue slot slot

  / *** IsBack whether to return button TITLE title TitletintColor Title Color BGCOLOR Background Center Title Home Search Search Barch Searchradius Round Search Bar Fixed Whether Fixed * /          -> 

uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能

 />   
      Export Default {data () {return {statusbarh: this.statusbar, CustomBarh: this.custom bar}}, props: {isback: {type: [Boolean, String], Default: TRUE }, title: {type: string, default: ''}, TitletintColor: {type: string, default: '#fff'}, bgcolor: object, center: {type: [boolean, string], default: false}, search: {type: [boolean, string], default: false} Searchradius: {TYPE: [Boolean, String], default: false}, fixed: {type: [boolean, string], default: false},}, compute: {style () {let _style = `Height: $ { This.customBarh} PX; `return _style}}}}: {goback () {UNI.NAVIGATEBACK ()}}} <!--      Lastly attached one based on Reactnative realized custom navigation chat room   https://www.jb51.net/Article/174036.htm    summarizes    The above is the uni-app custom navigation bar button for Xiaobian to introduce it | Uniapp imitation WeChat top navigation bar, I hope everyone can help, if you have any questions, please leave a message, Xiaobian will reply to everyone. of. Thank you very much for your support of Tumi Cloud Website!  If you think this article helps you, welcome to reprint, please indicate the source, thank you!                      
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment