微信小程序 wxapp導航 navigator
最近微信小程序非常火,朋友圈,微博,論壇等地方都在刷屏,因為這是搞前端的春天,前端工程師可以賺一把了,所以業余就學習了微信小程序的知識,這里記錄下 :
navigator
| 屬性名 | 類型 | 默認值 | 說明 |
|---|---|---|---|
| url | String | 應用內的跳轉鏈接 | |
| redirect | Boolean | false | 是否關閉當前頁面 |
| hover-class | String | navigator-hover | 指定點擊時的樣式類,當hover-class="none"時,沒有點擊態效果 |
注:navigator-hover默認為{background-color:rgba(0,0,0,0.1);opacity:0.7;},<navigator/>的子節點背景色應為透明色
示例代碼:
/** wxss **//** 修改默認的navigator點擊態 **/.navigator-hover{ color:blue;}/** 自定義其他點擊態樣式類 **/.other-navigator-hover{ color:red;}<!-- sample.wxml --><view class="btn-area"> <navigator url="navigate?title=navigate" hover-class="navigator-hover">跳轉到新頁面</navigator> <navigator url="redirect?title=redirect" redirect hover-class="other-navigator-hover">在當前頁打開</navigator></view></navigator>
<!-- navigator.wxml --><view style="text-align:center"> {{title}} </view><view> 點擊左上角返回回到之前頁面 </view><!-- redirect.wxml --><view style="text-align:center"> {{title}} </view><view> 點擊左上角返回回到上級頁面 </view>// redirect.js navigator.jsPage({ onLoad: function(options) { this.setData({ title: options.title }) }})感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
新聞熱點
疑難解答