欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序系列之自定義頂部導(dǎo)航功能

 更新時間:2019年05月21日 16:29:04   作者:roberthuanglv  
這篇文章主要介紹了微信小程序系列之自定義頂部導(dǎo)航功能,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下

具備基礎(chǔ)

vue框架:vue官方文檔

mpvue框架:mpvue官方文檔

全局配置

•找到全局的app.json文件,在配置中添加如下內(nèi)容:

"navigationStyle": "custom"
"window": {
 "backgroundTextStyle": "light",
 "navigationBarBackgroundColor": "#fff",
 "navigationBarTitleText": "WeChat",
 "navigationBarTextStyle": "black",
 "navigationStyle": "custom" // 這個配置
}

組件思維

•使用mpvue開發(fā)小程序,src目錄下默認(rèn)會生成一個components文件夾;
•由于自定義組件所有webview頁面都要使用,所以把它歸類為公共組件;
•可以在components文件夾下新建一個common文件夾,專門放置公共組件,如下:

├── src                    源碼目錄 
│  ├── main.js             入口js文件
│  ├── app.json            全局配置
│  ├── components          組件目錄
│  │  └── common           公共組件
          └── topBar.vue   頂部自定義導(dǎo)航復(fù)制代碼

組件內(nèi)容

•由于不同設(shè)備statusBarHeight值可能有差異,自定義組件的高度取決于statusBarHeight值;
•找到全局App.vue文件,在這里面執(zhí)行小程序的onLaunch生命周期(監(jiān)聽小程序初始化);
•具體獲取方法如下:

const that = this
let systemInfo = wx.getSystemInfoSync()
that.setBarHeight(systemInfo.statusBarHeight)

• 通過vuex存儲statusBarHeight值,不清楚vuex如何在小程序中使用的可參考mpvue如何使用vuex;
•.vue文件的html相關(guān)結(jié)構(gòu)如下:

<template>
 <div class="top-bar">
 <div class="bar" :style="'height:'+(systemInfo.barHeight+46)+'px;'">
  <span class="title">{{title}}</span>
  <button v-if="way && way==='/pages/mine/main'" open-type="getUserInfo" @getuserinfo="toMine">
  <image class="icon" :src="icon" />
  </button>
  <image v-else-if="way && way!=='/pages/mine/main'" class="icon-back" :src="icon" @tap="toPage(way)" />
  <span v-else></span>
 </div>
 <p class="place-holder" :style="'padding-top:'+(systemInfo.barHeight+6)+'px;'"></p>
 </div>
</template>

•結(jié)構(gòu)分析如下,可看做兩部分,一部分是fixed定位在頂部的class="bar"的div;另一部分是class="place-holder"的p;
•之所以要放一個p標(biāo)簽,是因為不用每次引入topBar.vue時都要考慮class="bar"的div都會遮擋內(nèi)容區(qū)的問題;
•因此將p標(biāo)簽height:80rpx;加上padding-top的6px;正好等于class="bar"的div的高度;

 

 

•由于項目中左邊放置的是進(jìn)入個人中心的功能,所以左邊頭像必須使用button來出發(fā)獲取用戶信息的授權(quán);
•同時需要考慮到左邊不是頭像的情況,這時就可以用到vue的props屬性,具體props值,看下面代碼,默認(rèn)是給向左的箭頭,表示返回上一頁;

props: {
 title: {
 type: String,
 required: true
 },
 icon: {
 type: String,
 default: require('@static/icon/icon_back.png')
 },
 way: {
 type: String,
 default: null
 }
}

•如果way啥也不傳則左側(cè)不顯示任何icon;
•如果way傳入的是進(jìn)入個人中心的路由,則走button結(jié)構(gòu)上面的事件;
•如果way傳入的是‘back',則顯示返回的向左箭頭。

問題總結(jié)

•該公共topBar.vue組件對ipad不能有效適配;
•fixed定位在安卓手機(jī)上下拉刷新時,結(jié)構(gòu)會跟著下拉,例如本文的自定義導(dǎo)航,下拉刷新的時候?qū)Ш綍吕缓笤賔ixed到頂部(開發(fā)者工具上沒問題,真機(jī)有問題);

以上所述是小編給大家介紹的微信小程序系列之自定義頂部導(dǎo)航功能,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復(fù)大家的!

相關(guān)文章

最新評論