专栏首页算法与编程之美微信小程序|navigator组件-实现页面跳转

微信小程序|navigator组件-实现页面跳转

本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。

问题描述

现在大家所用的各种微信小程序都是看似结构简单、内容精炼,实则内含很多的隐藏页面。其原理和网页的超链接是一样的,利用跳转页面对现有页面的内容进行说明介绍。这样可以让整个小程序的页面不重复繁琐,不容易造成视觉疲劳。

解决方案

利用navigator组件实现小程序页面间的跳转,给将要跳转的关键词加一个navigator组件,然后添加跳转页面的链接,再对其关键词进行修饰点击效果设置。但是在设置navigator组件的时候有两个注意点很容易犯错,在下面的注意事项中会有所介绍。

1.在wxml中使用navigator组件,添加页面链接。

navigator组件实现页面间的跳转;

url中是设置跳转页面的链接;

class="nav-default"设置关键词的修饰颜色;

hover-class="nav-hover"设置指定点击时的样式类。

<view>

  <text >本周推荐</text>

  <image  src="/pages/img/图片1.jpg"></image>

  <view>

    <navigator url="/pages/abc/abc" hover-class="nav-hover">复仇者联盟4

    </navigator>

  </view>

  <text >点评:最精彩的科幻片</text>

  <text >阅读量:200</text>

</view>

2.在js中,设置页面中关键词的属性。

.container1{

  height: 100vh;

  display: flex;

  flex-direction: column;

  justify-content: space-around;

  align-items: center;

}

.nav-default{

  color:green

}

.nav-hover{

  color: red

}

点击前的图:

图1 首页面

点击时的图:

图2 点击时页面

点击后的图:

图3 跳转后页面

注意事项

1 一般关键词都是文本,装在<text>里面。而<text>里面用navigator组件是没有用的,<text>只能读取文本,所以使用navigator组件时需要用<view>封装。

2 由于css的优先级规则,当属性赋值发生冲突的时候,谁在后面定义谁的属性取值就会渗出,所以在定义点击样式的时候要定义在后面。

结语

navigator组件可以实现页面间的跳转,让页面不在复杂,结构更加清晰。要注意上述的事项。对于navigator组件的详细内容可以在微信开发文档的导航组件中学习。

END

主 编 | 王文星

责 编 | 江汪霖

where2go 团队

本文分享自微信公众号 - 算法与编程之美(algo_coding),作者:江汪霖

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-03-31

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序|配置文本框样式、排版及点击页面跳转

    我们在使用一个小程序时,总是会看到页面给出你不同的选择文本框,而你需要单击文本框跳转到你需要了解的内容页面中去。因此,如何美化这些文本框以及如何配置页面跳转是我...

    算法与编程之美
  • 数据库|Flask实现分页显示数据

    在做网页的时候,通常会展示很多数据,如果把全部数据放在一页显示的话,会让浏览器加载变得更慢,所以通常在展示很多数据的时候进行分页显示,让浏览器进行片段式加载。先...

    算法与编程之美
  • 开发Hybrid App的技术选型

    如果我们把Hybrid App理解为运行在android或者ios以及其他移动终端设备上的应用,也可以叫做H5 APP,这种开发应用的模式结合web开发技术与N...

    算法与编程之美
  • Pandownload 下线了,我花了 30 分钟自己搭建了一个网盘

    Pandownload 下线大家心里都很苦,不过我们还是的重新站起来,于是我研究了一下花了 30 分钟自己搭建了一个网盘,下面是部分截图,有自建网盘需求的朋友可...

    编程三分钟
  • Pandownload 下线了,我花了 30 分钟自己搭建了一个网盘

    Pandownload 下线大家心里都很苦,不过我们还是的重新站起来,于是我研究了一下花了 30 分钟自己搭建了一个网盘,下面是部分截图,有自建网盘需求的朋友可...

    黄泽杰
  • 花了 30 分钟搭建了一个网盘,真香!

    Pandownload 下线大家心里都很苦,不过我们还是的重新站起来,于是我研究了一下花了 30 分钟自己搭建了一个网盘,下面是部分截图,有自建网盘需求的朋友可...

    杰哥的IT之旅
  • Spring Boot 项目转容器化 K8S 部署实用经验分享

    对于各个项目分环境部署,最麻烦的就是配置文件的问题,不同的环境需要加载不同的配置,好在 Spring Boot 框架加载配置是非常方便的,具体如何加载配置文件可...

    哎_小羊
  • 微服务的架构适合你吗?微服务为何而来?

    最近拾起了基本英文的讲微服务的书,一方面是学习英文,一方面也是想原汁原味的了解一下外国人口中的微服务是怎么样的。所以这篇文章是想聊聊微服务,聊聊我眼中的微服务,...

    黑光技术
  • django2实战2.创建博客应用创建应用文章表的字段设计激活应用开启后台将post模型注册到后台自定义文章显示字段增加可选操作

    上篇创建了一个项目,项目相当于站点,应用即是独立的功能模块。比如:淘宝是一个完整的网站,即是一个项目。而淘宝下的聚划算属于一个应用

    章鱼喵
  • Cloud-Native 微服务架构元素卡; 15 分钟内搞定微服务架构设计

    Cloud-Native微服务架构设计不应该是一个讲求标准答案, 简单粗暴的设计过程。而应该是一个考量各方因素下的一个“决策的过程”。

    Ken Fang 方俊贤

扫码关注云+社区

领取腾讯云代金券