<address id="xdftd"><form id="xdftd"><meter id="xdftd"></meter></form></address>
              <form id="xdftd"><nobr id="xdftd"><nobr id="xdftd"></nobr></nobr></form>

                  <sub id="xdftd"></sub>

                        <address id="xdftd"><nobr id="xdftd"></nobr></address>

                          福州網站建設>網站新聞>福州微信小程序

                          微信小程序——自定義導航欄

                          發布日期:2019-10-19瀏覽次數:1437 來源:福州網站建設

                          微信頭部導航欄可能通過json配置:

                           

                          但是有時候我們項目需求可能需要自定義頭部導航欄,如下圖所示:

                           

                          現在具體說一下實現步驟及使用方法

                          步驟:

                          1.在 app.json 里面把 "navigationStyle" 設置為 "custom"

                          這樣子之后就只會保留右上角膠囊按鈕了。

                           

                          2.計算相關值

                          因為在不同的手機型號頭部那條欄目高度可能不一致,所以為了我們適配更多型號,我們需要計算3個值:

                          如下圖:

                          1. 整個導航欄的高度;

                          2. 膠囊按鈕與頂部的距離;

                          3. 膠囊按鈕與右側的距離。

                          小程序可以通過 wx.getMenuButtonBoundingClientRect() 獲取膠囊按鈕的信息  和 wx.getSystemInfo() 獲取設備信息。

                          如下圖:

                          通過這些信息我們可以計算出上面說的3個值:

                          1. 整個導航欄高度 = statausBarHeight + height + (top-statausBarHeight )*2;

                          2. 膠囊按鈕與頂部的距離 = top;

                          3.膠囊按鈕與右側的距離 = windowWidth - right。

                           

                          App.js 代碼如下:

                          復制代碼
                          App({
                            globalData: {
                             
                            },
                            onLaunch: function () {
                              let menuButtonObject = wx.getMenuButtonBoundingClientRect();
                              wx.getSystemInfo({
                                success: res => { let statusBarHeight = res.statusBarHeight,
                                    navTop = menuButtonObject.top,//膠囊按鈕與頂部的距離
                                    navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight)*2;//導航高度 this.globalData.navHeight = navHeight; this.globalData.navTop = navTop; this.globalData.windowHeight = res.windowHeight;
                                },
                                fail(err) {
                                  console.log(err);
                                }
                              })
                            }
                          })
                          復制代碼

                           

                          3.因為這個頭部導航是公共的,所以我們最好把它設置成一個組件,命名為navbar

                           

                          index.wxml: 

                          復制代碼
                          <view class="navbar custom-class" style='height:{{navHeight}}px;background-color:{{bgColor}}'> <view wx:if="{{showNav}}" class="navbar-action-wrap navbar-action-group row item-center" style='top:{{navTop}}px;background-color:rgba(255,255,255,.6)'> <ss-icon name="back" color="{{iconColor}}" size="15px" block="{{true}}" class="navbar-action_item" bind:click="_navBack"></ss-icon> <ss-icon name="index" color="{{iconColor}}" size="15px" block="{{true}}" class="navbar-action_item last" bind:click="_toIndex"></ss-icon> </view> <view class='navbar-title' style='top:{{navTop}}px'> {{pageName}} </view> </view>
                          復制代碼

                           

                          index.js:

                          復制代碼
                          // components/navbar/index.js const App = getApp();
                          
                          Component({
                            options: {
                              addGlobalClass: true,
                            }, /**
                             * 組件的屬性列表 */ properties: {
                              pageName:String,
                              showNav:{
                                type:Boolean,
                                value:true },
                              showHome: {
                                type: Boolean,
                                value: true }
                            }, /**
                             * 組件的初始數據 */ data: {
                             
                            },
                            lifetimes: {
                              attached: function () { this.setData({
                                  navH: App.globalData.navHeight
                                })
                               }
                            }, /**
                             * 組件的方法列表 */ methods: { //回退 navBack: function () {
                                  wx.navigateBack({
                                    delta: 1 })      
                              }, //回主頁 toIndex: function () {
                                wx.navigateTo({
                                  url: '/pages/admin/home/index/index' })
                              },
                            }
                          })
                          復制代碼

                           

                          index.wxss: 

                           

                          復制代碼
                          /* components/navbar/index.wxss */ .navbar { width: 100%; overflow: hidden; position: relative; top: 0; left: 0; z-index: 10; flex-shrink: 0;
                          } .navbar-title { width: 100%; box-sizing: border-box; padding-left: 115px; padding-right: 115px; height: 32px; line-height: 32px; text-align: center; position: absolute; left: 0; z-index: 10; color: #333; font-size: 16px; font-weight: bold; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
                          } .navbar-action-wrap { display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; position: absolute; left: 10px; z-index: 11; line-height: 1; padding-top: 4px; padding-bottom: 4px;
                          } .navbar-action-group { border: 1px solid #f0f0f0; border-radius: 20px; overflow: hidden;
                          } .navbar-action_item { padding: 3px 0; color: #333;
                          } .navbar-action-group .navbar-action_item { border-right: 1px solid #f0f0f0; padding: 3px 14px;
                          } .navbar-action-group .last { border-right: none;
                          }
                          復制代碼

                           

                           

                          index.json:

                          按 Ctrl+C 復制代碼
                          按 Ctrl+C 復制代碼


                          ss-icon 是我自定義的一個 icon 組件,點擊查看。 如果你沒有這個組件,可以在我使用<ss-icon></ss-icon>的地方換成<view></view>組件,然后里面放入你的圖標就可以了。

                          對于組件不太明白的,可以看下微信小程序組件相關組件的介紹。

                           

                          組件已創建完畢,現在說下該組件的使用方法

                          假設我們需要在index.wxml中需要調用這個組件,

                          1.在index.json中引用該組件:

                          復制代碼
                          { "usingComponents": { "navbar": "/components/navbar/index" }
                          }
                          復制代碼

                           

                          2.在index.wxml中使用該組件:

                          復制代碼
                          <view class='view-page'> <navbar page-name="你當前頁面的名字"></navbar> <view class='page-content'> <!--這里放你的內容--> </view> </view>
                          復制代碼

                           

                          最后的結果如下圖所示:

                           

                          3.參數說明

                          參數 說明 類型 默認值
                          page-name 當前頁面名稱 String --
                          show-nav 是否顯示左側圖標按鈕 Boolean true
                          bg-color 導航背景顏色 String #fff
                          icon-color 左側圖標顏色 String #000
                          custom-class 導航樣式    

                          完整代碼git地址:微信小程序自定義導航欄

                          以上是由福州網站建設的小編為你分享了"微信小程序——自定義導航欄"文章,如果你在這方面有什么問題,隨時聯系我們

                          福州微信小程序有關的文章
                          如果您有什么問題,歡迎咨詢我們客服! 點擊QQ咨詢
                          双乳被三男吸的小说

                            <address id="xdftd"><form id="xdftd"><meter id="xdftd"></meter></form></address>
                                      <form id="xdftd"><nobr id="xdftd"><nobr id="xdftd"></nobr></nobr></form>

                                          <sub id="xdftd"></sub>

                                                <address id="xdftd"><nobr id="xdftd"></nobr></address>