微信小程序 wxapp导航 navigator详解


Posted in Javascript onOctober 31, 2016

微信小程序 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.js
Page({
 onLoad: function(options) {
  this.setData({
   title: options.title
  })
 }
})

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
Javascript attachEvent传递参数的办法
Dec 14 Javascript
input禁止键盘及中文输入,但可以点击
Feb 13 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
Jun 16 Javascript
node.js中使用q.js实现api的promise化
Sep 17 Javascript
理解javascript中DOM事件
Dec 25 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
Mar 05 Javascript
jQuery 的 ready()的纯js替代方法
Nov 20 Javascript
vue+iview+less 实现换肤功能
Aug 17 Javascript
解决vue组件props传值对象获取不到的问题
Jun 06 Javascript
快速对接payjq的个人微信支付接口过程解析
Aug 15 Javascript
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
javascript使用Blob对象实现的下载文件操作示例
Apr 18 Javascript
微信小程序 wxapp地图 map详解
Oct 31 #Javascript
微信小程序 wxapp画布 canvas详细介绍
Oct 31 #Javascript
微信小程序 wxapp视图容器 view详解
Oct 31 #Javascript
详解JavaScript跨域总结与解决办法
Oct 31 #Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
Oct 31 #Javascript
微信小程序 获取微信OpenId详解及实例代码
Oct 31 #Javascript
JavaScript事件用法浅析
Oct 31 #Javascript
You might like
获取远程文件大小的php函数
2010/01/11 PHP
php程序效率优化的一些策略小结
2010/07/17 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
jquery each()源代码
2011/02/14 Javascript
让ie6也支持websocket采用flash封装实现
2013/02/18 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
鼠标焦点离开文本框时验证的js代码
2013/07/19 Javascript
js实现鼠标拖拽多选功能示例
2017/08/01 Javascript
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
对vue下点击事件传参和不传参的区别详解
2018/09/15 Javascript
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
详解Vue template 如何支持多个根结点
2020/02/10 Javascript
JavaScript 严格模式(use strict)用法实例分析
2020/03/04 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
使用cx_freeze把python打包exe示例
2014/01/24 Python
python使用xauth方式登录饭否网然后发消息
2014/04/11 Python
Python写的一个简单监控系统
2015/06/19 Python
Python正则表达式使用范例分享
2016/12/04 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
关于tf.TFRecordReader()函数的用法解析
2020/02/17 Python
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
2013/01/09 HTML / CSS
Vans英国官方网站:美国南加州的原创极限运动潮牌
2017/01/20 全球购物
TripAdvisor德国:全球领先的旅游网站
2017/12/07 全球购物
Servlet面试题库
2015/07/18 面试题
自我评价200字分享
2013/12/17 职场文书
小学开学标语
2014/07/01 职场文书
2016党校培训心得体会
2016/01/07 职场文书
教你怎么用python实现字符串转日期
2021/05/24 Python
Spring中bean的生命周期之getSingleton方法
2021/06/30 Java/Android
CSS使用伪类控制边框长度的方法
2022/01/18 HTML / CSS
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记
python读取并查看npz/npy文件数据以及数据显示方法
2022/04/14 Python
Python Django / Flask如何使用Elasticsearch
2022/04/19 Python