效果图:

页面有点丑,作为初次学习,页面可以要求不那么美观,先学会再说。毕竟后面可以优化的很漂亮。

代码实例如下:

<view class="section btn-area">
<view class="section__title">欢迎{{userName}}来到ACS管理系统</view>
<view>
<text>\n</text>
</view>
<view class="flex-wrp" style="flex-direction:row;">
<view class="flex-item bc_green">
<navigator url="/pages/type/type" hover-class="navigator-hover">支出类型</navigator>
</view> <view>
<text>\n</text>
</view> <view class="flex-item bc_red">
<navigator url="/pages/detail/detail" hover-class="other-navigator-hover">支出详情</navigator>
</view>
<view>
<text>\n</text>
</view>
<view class="flex-item bc_blue">
<navigator url="/pages/index/index" hover-class="navigator-hover" hover-class="other-navigator-hover">统计分析</navigator>
</view> </view>
</view>

参考资料:
微信小程序之导航

微信小程序之页面导航栏的更多相关文章

  1. 微信小程序实现navbar导航栏

    一.效果图 二.涉及到组件 1.view组件 2.swiper组件 三.原理 整体来讲是比较简单的,顶部的navbar是使用flex进行布局的:下面的内容区域则是使用到swiper组件,使用方式比较简 ...

  2. 微信小程序自定义底部导航栏组件+跳转

    微信小程序本来封装有底部导航栏,但对于想自定义样式和方法的开发者来说,这并不是很好. 参考链接:https://github.com/ljybill/miniprogram-utils/tree/ma ...

  3. 微信小程序 自定义头部导航栏和导航栏背景图片 navigationStyle

    ​ 这两天因为要做一个带背景的小程序头,哭了,小程序导航栏有背景也就算了,还得让导航栏上的背景顺下来,心态小崩.现在可以单独设置一个页面的小程序头了,但是前提是要微信7.0以上的版本,考虑到兼容性问题 ...

  4. 微信小程序-如何自定义导航栏(navigationStyle)?

    小程序是越来越开放了,微信版本 6.6.0可以自定义导航? 先了解下app.json中window配置navigationStyle属性,即导航栏样式,仅支持 default/custom.custo ...

  5. 微信小程序入门四: 导航栏样式、tabBar导航栏

    实例内容 导航栏样式设置 tabBar导航栏 实例一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: { & ...

  6. 微信小程序:自定义导航栏

    在小程序开发的时候会遇到一些页面不需要头部导航,或像淘宝的商品详情一样自定义的导航栏.那先要清楚这导航可不能写死,每种手机的导航都各不相同. 一.在app.json的window对象中定义导航的样式: ...

  7. 微信小程序之自定义导航栏(可实现动态添加)以及swiper(swiper-item)实现自动切换,导航标题也跟着切换

    <view class="movie-container"> <!-- 导航栏 --> <view > <scroll-view scro ...

  8. 小程序开发-页面导航栏navigation-bar组件

    导航栏navigation-bar 页面导航条配置节点,用于指定导航栏的一些属性.只能是 page-meta 组件内的第一个节点,需要配合它一同使用. 通过这个节点可以获得类似于调用 wx.setNa ...

  9. 微信小程序自定义头部导航栏

    <!--index.wxml--> <view> <navbar id='index_header' background='{{background}}' pageNa ...

随机推荐

  1. 纯css实现省略号,兼容火狐,IE9,chrome

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 在Spring中使用AspectJ实现AOP

    在Spring中,最常用的AOP框架是AspectJ,使用AspectJ实现AOP有2种方式: 基于XML的声明式AspectJ 基于注解的声明式AspectJ 基于XML的声明式AspectJ 1. ...

  3. 从零搭建consul

    从零搭建consul 原文链接:https://blog.csdn.net/weixin_42107541/article/details/87640807#2linux_25 从零搭建consul1 ...

  4. 【异常】Caused by: java.lang.IllegalStateException: RequestParam.value() was empty on parameter 0

    使用@RequestParam注解,必须指定名称如: @RequestParam("date")String date

  5. python爬取数据分析

    一.python爬虫使用的模块 1.import requests 2.from bs4 import BeautifulSoup 3.pandas 数据分析高级接口模块 二. 爬取数据在第一个请求中 ...

  6. python自动化测试框架

    一.环境准备 1.python开发环境, python3.7 2.setuptools基础工具包 3.pip安装包管理工具 4.selenium自动化测试工具  chrom驱动下载地址: http:/ ...

  7. springboot全局异常处理(1)

    新建一个类 在类上加一个注解即可 @ControllerAdvice /** * 全局错误处理 * @author sys * */ @ControllerAdvice @ResponseBody p ...

  8. win10永久激活方法(真正永久激活)

    win10的花费不低,所以很多电脑用户选择搜索激活,但是大部分用的激活工具激活的基本上都是假激活(或许本来就是),kms激活和试用账号临时激活都是有时间限制的,虽然到时都可以继续,但是系统还是明确此激 ...

  9. 【python】Requests 库支持RESTFUL的几种方式

    Get: 查看资源 POST: 增加资源 PUT:修改资源,更新全部资源 PATCH:修改资源,更新局部资源 DELETE: 删除资源 HEAD: 查看响应头 OPTIONS: 查看请求方式

  10. docker容器中oracle数据库导出dmp文件

    Oracle数据库安装在docker容器中 1首先查看容器 docker ps 2进入oracle容器 docker exec -it 7f0f3f2d4f88 /bin/bash 3导出整个库:这个 ...