uni-app 原生導(dǎo)航欄、更換頂部導(dǎo)航欄icon艇棕、ios鍵盤(pán)彈起頁(yè)面被頂上

最終效果

Unicode 是字體在網(wǎng)頁(yè)端最原始的應(yīng)用方式蝌戒,特點(diǎn)是:

  1. 兼容性最好,支持 IE6+沼琉,及所有現(xiàn)代瀏覽器北苟。
  2. 支持按字體的方式去動(dòng)態(tài)調(diào)整圖標(biāo)大小,顏色等等打瘪。
  3. 但是因?yàn)槭亲煮w友鼻,所以不支持多色傻昙。只能使用平臺(tái)里單色的圖標(biāo),就算項(xiàng)目里有多色圖標(biāo)也會(huì)自動(dòng)去色彩扔。

2020-05-21(祝各位分手快樂(lè)哈)

iconFont更新后的使用更新
  1. 依然是選擇需要的icon下載素材屋匕,解壓包
  2. 拷貝項(xiàng)目下面生成的 @font-face
@font-face {
 font-family: 'iconfont';
 src: url('@/static/iconfont.eot');
 src: url('@/static/iconfont.eot?#iefix') format('embedded-opentype'),
     url('@/static/iconfont.woff2') format('woff2'),
     url('@/static/iconfont.woff') format('woff'),
     url('@/static/iconfont.ttf') format('truetype'),
     url('@/static/iconfont.svg#iconfont') format('svg');
}
  1. 將@font-face相關(guān)的url放到static文件夾下
    與舊版本相比較,引入文件增加借杰,@font-face修改一下

1.原生導(dǎo)航欄

pages.json文件

 {
        "path" : "pages/create/pick-sku",
         "style" : {
                "navigationBarTitleText": "選擇商品",//導(dǎo)航欄標(biāo)題
                "navigationBarBackgroundColor": "#EA8C1B",//導(dǎo)航欄背景顏色
                "backgroundColorTop":"#EA8C1B",//頂部窗口的背景色(IOS)
                "app-plus": {
                    "titleNView":  {
                       "type": "transparent",
                       "titleColor": "#fff",
                       "backgroundColor": "#007AFF",
                       "buttons": [{//title icon
                          "fontSrc": "/static/uni.ttf",
                          "text": "\ue537",
                          "width": "40px",
                          "fontSize": "28px",
                          "color": "#fff",
                          "background": "rgba(0,0,0,0)"
                       }]
                    } 
              }
         }
}
//關(guān)于每個(gè)屬性的解釋查看官網(wǎng)

2.更換頂部導(dǎo)航欄icon

這里的icon只能使用FontIcon(字體圖標(biāo)),可以查看阿里巴巴矢量圖標(biāo)庫(kù)过吻,這個(gè)icon庫(kù)的icon可以拿來(lái)用
如何將icon拿來(lái)用,下面是具體的步驟:
1.打開(kāi)阿里巴巴矢量圖標(biāo)庫(kù)的網(wǎng)址
2.選擇需要的矢量圖icon,加入購(gòu)物車(chē)

加入購(gòu)物車(chē)

3.選擇購(gòu)物車(chē)蔗衡,打開(kāi)購(gòu)物車(chē)纤虽,點(diǎn)擊下載代碼
購(gòu)物車(chē)圖標(biāo)最右側(cè)

下載代碼

4.解壓下載包,找到iconfont.ttf和iconfont.css,兩份文件
5.在自己的項(xiàng)目中打開(kāi)绞惦,可以放到static目錄下
6.在iconfont.css中逼纸,找到需要運(yùn)用的Unicode
\exxxx

\e60f 我們需要運(yùn)用的unicode

\e60f 要修改為 \ue60f

修改pages.json中需要修改的page

{
            "path" : "pages/create/pick-sku",
            "style" : {
                "navigationBarTitleText": "選擇商品",
                "navigationBarBackgroundColor": "#EA8C1B",//導(dǎo)航欄背景顏色
                "backgroundColor": "#EA8C1B",
                "backgroundColorTop":"#EA8C1B",//頂部窗口的背景色(IOS)
                "app-plus": {
                    "titleNView":  {
                        "autoBackButton":"false",//去掉原生自帶的back icon
                        "buttons": [{//自己的back icon
                            "fontSrc": "/static/iconfont.ttf",
                            "text": "\ue612",
                            "width": "auto",
                            "fontSize": "32upx",
                            "color": "#FFFFFF",
                            "background": "rgba(0,0,0,0)",
                            "float":"left"
                        },{//右邊的icon,最多3個(gè)
                            "fontSrc": "/static/iconfont.ttf",
                            "text": "\ue610",
                            "width": "auto",
                            "fontSize": "32upx",
                            "color": "rgba(225,225,225,.4)",
                            "background": "rgba(0,0,0,0)"
                        }] 
                    } 
                }
            }
 },
//導(dǎo)航欄部分的icon最多四個(gè)济蝉,包括left的返回按鈕
//把對(duì)應(yīng)圖標(biāo)的編碼填寫(xiě)到page.json的配置項(xiàng)里text杰刽,必須寫(xiě)成一個(gè)"\u***",然后重啟

7.對(duì)于icon的點(diǎn)擊監(jiān)聽(tīng)

export default {
     data() { return {} }, 
     onNavigationBarButtonTap(e) { 
           console.log("點(diǎn)擊了自定義按鈕");
           console.log(e.index);//按鈕的id王滤,根據(jù)定義的順序0,1,2
       }
 }

3.ios鍵盤(pán)彈起頁(yè)面被頂上贺嫂,position為fixed失效

當(dāng)頁(yè)面存在input,需要輸入的情況時(shí)雁乡,鍵盤(pán)彈起第喳,頁(yè)面被頂上position為fixed失效。
uni-app導(dǎo)航欄開(kāi)發(fā)指南
社區(qū)關(guān)于這一塊有具體的解釋?zhuān)梢匀タ纯础?br> 社區(qū)包括官網(wǎng)都有提到能使用原生的情況下踱稍,盡量使用原生的導(dǎo)航欄曲饱。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市珠月,隨后出現(xiàn)的幾起案子扩淀,更是在濱河造成了極大的恐慌,老刑警劉巖啤挎,帶你破解...
    沈念sama閱讀 222,729評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件驻谆,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡侵浸,警方通過(guò)查閱死者的電腦和手機(jī)旺韭,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)掏觉,“玉大人,你說(shuō)我怎么就攤上這事值漫“母梗” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,461評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)酱塔。 經(jīng)常有香客問(wèn)我沥邻,道長(zhǎng),這世上最難降的妖魔是什么羊娃? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,135評(píng)論 1 300
  • 正文 為了忘掉前任唐全,我火速辦了婚禮,結(jié)果婚禮上蕊玷,老公的妹妹穿的比我還像新娘邮利。我一直安慰自己,他們只是感情好垃帅,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布延届。 她就那樣靜靜地躺著,像睡著了一般贸诚。 火紅的嫁衣襯著肌膚如雪方庭。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 52,736評(píng)論 1 312
  • 那天酱固,我揣著相機(jī)與錄音械念,去河邊找鬼。 笑死运悲,一個(gè)胖子當(dāng)著我的面吹牛订讼,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播扇苞,決...
    沈念sama閱讀 41,179評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼欺殿,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了鳖敷?” 一聲冷哼從身側(cè)響起脖苏,我...
    開(kāi)封第一講書(shū)人閱讀 40,124評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎定踱,沒(méi)想到半個(gè)月后棍潘,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,657評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡崖媚,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評(píng)論 3 342
  • 正文 我和宋清朗相戀三年亦歉,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片畅哑。...
    茶點(diǎn)故事閱讀 40,872評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡肴楷,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出荠呐,到底是詐尸還是另有隱情赛蔫,我是刑警寧澤砂客,帶...
    沈念sama閱讀 36,533評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站呵恢,受9級(jí)特大地震影響鞠值,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜渗钉,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評(píng)論 3 336
  • 文/蒙蒙 一彤恶、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧鳄橘,春花似錦声离、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,700評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至宝磨,卻和暖如春弧关,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背唤锉。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,819評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工世囊, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人窿祥。 一個(gè)月前我還...
    沈念sama閱讀 49,304評(píng)論 3 379
  • 正文 我出身青樓株憾,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親晒衩。 傳聞我的和親對(duì)象是個(gè)殘疾皇子嗤瞎,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,762評(píng)論 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5听系? 答:HTML5是最新的HTML標(biāo)準(zhǔn)贝奇。 注意:講述HT...
    kismetajun閱讀 27,522評(píng)論 1 45
  • Mobile Web Favorites 參與貢獻(xiàn) 移動(dòng)前端開(kāi)發(fā)收藏夾,歡迎使用Issues以及 Pull Req...
    柴東啊閱讀 739評(píng)論 0 2
  • 十一靠胜、敬義爺爺看出了破綻 “臭小子掉瞳,什么事啊浪漠?還‘來(lái)日定當(dāng)厚報(bào)’陕习!”敬義爺爺?shù)囊痪湓?huà)讓安秦升著實(shí)吃了一驚。 “沒(méi)什...
    華山大姐閱讀 201評(píng)論 0 0
  • 天底下沒(méi)有人不知道西瓜夏天正是吃西瓜的好季節(jié)址愿,這次该镣,我和爺爺去另一塊地方,看到了爺爺?shù)奈鞴稀? 我們沿著...
    儲(chǔ)燁磊2008閱讀 250評(píng)論 0 0