微信小程序 wxapp導(dǎo)航 navigator詳解
更新時(shí)間：2016年10月31日 15:16:07 投稿：lqh
這篇文章主要介紹了微信小程序 wxapp導(dǎo)航 navigator詳解的相關(guān)資料,并附簡(jiǎn)單實(shí)例代碼，需要的朋友可以參考下
微信小程序 wxapp導(dǎo)航 navigator
最近微信小程序非?；穑笥讶?，微博，論壇等地方都在刷屏，因?yàn)檫@是搞前端的春天，前端工程師可以賺一把了，所以業(yè)余就學(xué)習(xí)了微信小程序的知識(shí)，這里記錄下 ：
navigator
| 屬性名 | 類型 | 默認(rèn)值 | 說(shuō)明 |
|---|---|---|---|
| url | String | 應(yīng)用內(nèi)的跳轉(zhuǎn)鏈接 | |
| redirect | Boolean | false | 是否關(guān)閉當(dāng)前頁(yè)面 |
| hover-class | String | navigator-hover | 指定點(diǎn)擊時(shí)的樣式類，當(dāng)hover-class="none"時(shí)，沒(méi)有點(diǎn)擊態(tài)效果 |
注：navigator-hover默認(rèn)為{background-color:rgba(0,0,0,0.1);opacity:0.7;},<navigator/>的子節(jié)點(diǎn)背景色應(yīng)為透明色
示例代碼：
/** wxss **/
/** 修改默認(rèn)的navigator點(diǎn)擊態(tài) **/
.navigator-hover{
color:blue;
}
/** 自定義其他點(diǎn)擊態(tài)樣式類 **/
.other-navigator-hover{
color:red;
}
<!-- sample.wxml --> <view class="btn-area"> <navigator url="navigate?title=navigate" hover-class="navigator-hover">跳轉(zhuǎn)到新頁(yè)面</navigator> <navigator url="redirect?title=redirect" redirect hover-class="other-navigator-hover">在當(dāng)前頁(yè)打開(kāi)</navigator> </view> </navigator>
<!-- navigator.wxml -->
<view style="text-align:center"> {{title}} </view>
<view> 點(diǎn)擊左上角返回回到之前頁(yè)面 </view>
<!-- redirect.wxml -->
<view style="text-align:center"> {{title}} </view>
<view> 點(diǎn)擊左上角返回回到上級(jí)頁(yè)面 </view>
// redirect.js navigator.js
Page({
onLoad: function(options) {
this.setData({
title: options.title
})
}
})
感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
相關(guān)文章
這篇文章主要介紹了微信小程序 Page（）函數(shù)詳解的相關(guān)資料,在開(kāi)發(fā)過(guò)程中肯定會(huì)遇到Page（）函數(shù)，希望能幫助到大家，需要的朋友可以參考下2016-10-10
javascript Number 與 Math對(duì)象的介紹
這篇文章主要介紹了javascript Number 與 Math對(duì)象，文章圍繞 Number 與 Math對(duì)象的相關(guān)資料展開(kāi)內(nèi)容,需要的朋友可以參考一下，希望對(duì)你有所幫助2021-11-11
這篇文章主要為大家介紹了sockjs前端WebSocket二次封裝示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
JS創(chuàng)建對(duì)象常用設(shè)計(jì)模式工廠構(gòu)造函數(shù)及原型
本篇帶來(lái)你一定熟知的、用于創(chuàng)建對(duì)象的三種設(shè)計(jì)模式：工廠模式、構(gòu)造函數(shù)模式、原型模式，有需要的朋友可以借鑒參考下，希望能夠有所幫助2022-07-07
這篇文章主要為大家介紹了微信小程序WXSS樣式文件教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪2022-04-04
微信小程序 五星評(píng)價(jià)功能的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序 五星評(píng)價(jià)功能的實(shí)現(xiàn)的相關(guān)資料,這里附有實(shí)例代碼及實(shí)現(xiàn)效果圖，需要的朋友可以參考下2017-03-03
JavaScript前端實(shí)現(xiàn)小說(shuō)分頁(yè)功能示例
這篇文章主要為大家介紹了JavaScript前端實(shí)現(xiàn)小說(shuō)分頁(yè)功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
PHP：微信小程序 微信支付服務(wù)端集成實(shí)例詳解及源碼下載
這篇文章主要介紹了微信小程序 微信支付服務(wù)端集成實(shí)例詳解及源碼下載的相關(guān)資料,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了 微信小程序之綁定點(diǎn)擊事件實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-07-07
JS前端性能優(yōu)化解決內(nèi)存泄漏頁(yè)面崩潰
這篇文章主要為大家介紹了JS前端性能優(yōu)化解決內(nèi)存泄漏頁(yè)面崩潰示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07