微信小程序 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代码
Dec 26 Javascript
javascript模拟实现ajax加载框实例
Oct 15 Javascript
js父页面与子页面不同时显示的方法
Oct 16 Javascript
JavaScript输出当前时间Unix时间戳的方法
Apr 06 Javascript
vue绑定class与行间样式style详解
Aug 16 Javascript
使用JavaScript实现点击循环切换图片效果
Sep 03 Javascript
AngularJS 打开新的标签页实现代码
Sep 07 Javascript
React + webpack 环境配置的方法步骤
Sep 07 Javascript
vue的全局提示框组件实例代码
Feb 26 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 Javascript
在vue项目中引入vue-beauty操作方法
Feb 11 Javascript
微信小程序利用for循环解决内容变更问题
Mar 05 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
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
用PHP实现图象锐化代码
2007/06/14 PHP
最新的php 文件上传模型,支持多文件上传
2009/08/13 PHP
Wordpress php 分页代码
2009/10/21 PHP
PHP中ini_set和ini_get函数的用法小结
2014/02/18 PHP
PHP简单生成缩略图相册的方法
2015/07/29 PHP
PHP类与对象后期静态绑定操作实例详解
2018/12/20 PHP
javascript 页面划词搜索JS
2009/09/28 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
Javascript基础教程之数据类型转换
2015/01/18 Javascript
Jquery中offset()和position()的区别分析
2015/02/05 Javascript
JS设置cookie、读取cookie、删除cookie
2015/04/17 Javascript
解决JS请求服务器gbk文件乱码的问题
2015/10/16 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
jQuery焦点图左右转换效果
2016/12/12 Javascript
TypeScript中的方法重载详解
2019/04/12 Javascript
JS将时间秒转换成天小时分钟秒的字符串
2019/07/10 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
2020/05/12 Javascript
[02:05]2014DOTA2西雅图邀请赛 老队长全明星大猜想谁不服就按进显示器
2014/07/08 DOTA
Python3读取文件常用方法实例分析
2015/05/22 Python
python学习之matplotlib绘制散点图实例
2017/12/09 Python
Python实现抢购IPhone手机
2018/02/07 Python
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
python实现高斯(Gauss)迭代法的例子
2019/11/20 Python
Python数据存储之 h5py详解
2019/12/26 Python
Python-opencv实现红绿两色识别操作
2020/06/04 Python
Keds官方网站:购买帆布运动鞋和经典皮鞋
2016/11/12 全球购物
教师绩效考核方案
2014/01/21 职场文书
学历公证书范本
2014/04/09 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
企业党员岗位承诺书
2015/04/27 职场文书
opencv读取视频并保存图像的方法
2021/06/04 Python
十大最强格斗系宝可梦,超梦X仅排第十,第二最重格斗礼仪
2022/03/18 日漫