导航navigator:官方文档

Demo Code:

// redirect.js navigator.js
Page({
onLoad: function(options) {
this.setData({
title: options.title
})
}
})

JS

<!-- 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.wxml -->
<view style="text-align:center"> {{title}} </view>
<view> 点击左上角返回回到之前页面 </view>
<!-- redirect.wxml -->
<view style="text-align:center"> {{title}} </view>
<view> 点击左上角返回回到上级页面 </view>

WXML

/** wxss **/
/** 修改默认的navigator点击态 **/
.navigator-hover {
color:blue;
}
/** 自定义其他点击态样式类 **/
.other-navigator-hover {
color:red;
}

WXSS

微信小程序组件navigator的更多相关文章

  1. 微信小程序组件设计规范

    微信小程序组件设计规范 组件化开发的思想贯穿着我开发设计过程的始终.在过去很长一段时间里,我都受益于这种思想. 组件可复用 - 减少了重复代码量 组件做为抽离的功能单元 - 方便维护 组件作为temp ...

  2. 微信小程序组件学习 -- 注册页面

    微信小程序组件使用手册地址: 1. 百度搜索"微信公众平台",扫码登录之后,点击帮助文档里面的普通小程序. 2. 接着选择"开发"-->"组件& ...

  3. 详解封装微信小程序组件及小程序坑(附带解决方案)

    一.序 上一篇介绍了如何从零开发微信小程序,博客园审核变智障了,每次代码都不算篇幅,好好滴一篇原创,不到3分钟从首页移出来了.这篇介绍一下组件封装和我的踩坑历程. 二.封装微信小程序可复用组件 首先模 ...

  4. 微信小程序——组件(二)

    在上篇文章组件(一)里已经讲解了如何创建一个项目,现在继续...讲解一个页面布局以及各个组件的使用.在学习过程中,发现小程序支持flex布局,这对于学习过react native的人来说太好了,布局方 ...

  5. 微信小程序组件构建UI界面小练手 —— 表单登录注册微信小程序

    通过微信小程序中丰富的表单组件来完成登录界面.手机快速注册界面.企业用户注册界面的微信小程序设计. 将会用到view视图容器组件.button按钮组件.image图片组件.input输入框组件.che ...

  6. 【腾讯Bugly干货分享】打造“微信小程序”组件化开发框架

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/2nQzsuqq7Avgs8wsRizUhw 作者:Gc ...

  7. 微信小程序(组件demo)以及预览方法:(小程序交流群:604788754)

    1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 Ap ...

  8. 微信小程序组件通信

    父子通信 在子组件的对应js中 properties:{ prop名字:数据类型, prop名字:{ type:数据类型, value:默认值 } } 在父组件的wxml模板中找到子组件标签 < ...

  9. 微信小程序组件化实践

    Do Not Repeat Yourself 如何提高代码质量,方法有许多:抽象.模块.组件化,我认为它们的中心点都是--Do Not Repeat Yourself. 小程序组件化 我们先看看小程序 ...

随机推荐

  1. php的form中元素name属性相同时的取值问题

    php的form中元素name属性相同时的取值问题:修改元素的名称,在名称后面加上 '[]',然后取值时即可得array()数组. 一.以复选框为例: <html> <head> ...

  2. JQuery------鼠标双击时,不选中div里面的文字

    如图:(去掉选中文字的蓝色背景色) 代码: //方法一:<div class="test" onselectstart="return false" &g ...

  3. vue2.0中子组件通过v-modal改变父组件中的值

    父组件代码: <template lang="pug"> div p this is father child(v-model="data") &l ...

  4. 在Hyper-V Linux VM如何选择LIS Linux集成服务

    导读 很多工程师都知道,如果你选择在 Hyper-V 中运行 Linux guest VM,要获得最好的使用体验,必需针对你所使用的 Linux 发行版和使用场景选择 Linux Integratio ...

  5. mybatis设置数据库连接的密码不需要加密

    mybatis设置数据库连接的密码不需要加密:在数据库连接配置处加上:<property name="connectionProperties" value="co ...

  6. 通过python3学习编码

    简介 今天在写python程序的时候,遇到了编码问题,今天,我准备好好了解一下编码问题 ASCII编码 计算机是美国人发明的,最初只有不超过256字符需要编码,1字节能编码2**8个,所以ASCII编 ...

  7. 170406、用uid分库,uname(用户名)上的查询怎么办

    [缘起] 用户中心是几乎每一个公司必备的基础服务,用户注册.登录.信息查询与修改都离不开用户中心. 当数据量越来越大时,需要多用户中心进行水平切分.最常见的水平切分方式,按照uid取模分库: 通过ui ...

  8. 遍历Map集合四中方法

    public static void main(String[] args) { Map<String, String> map = new HashMap<String, Stri ...

  9. FZU Moon Game(几何)

    Accept: 710    Submit: 2038 Time Limit: 1000 mSec    Memory Limit : 32768 KB  Problem Description Fa ...

  10. [LeetCode] 9.Palindrome Number - Swift

    Determine whether an integer is a palindrome. Do this without extra space. 题目意思:判断一个整数是否是回文数 例如:1232 ...