上图:::

导航模板内容页面的定义:

<template name="naviBot">
 
<view class='navwrap t_cen font_26'>
<view id='nav1' class="navtab ">
<view><image class='nabimg' src="{{navswiper[0].indflag? navswiper[0].navimg_:navswiper[0].navimg}}"></image></view>
<view class="{{navswiper[0].indflag? 'col_g':'col_77' }}">{{navswiper[0].navtit}}</view>
</view>
<view id='nav2' class='navtab' bindtap='tocart'>
<view><image class='nabimg' src="{{navswiper[1].cartflag? navswiper[1].navimg_:navswiper[1].navimg}}"></image></view>
<view class="{{navswiper[1].cartflag? 'col_g':'col_77' }}">{{navswiper[1].navtit}}</view>
</view>
<view id='nav3' class='navtab' bindtap='tomine'>
<view><image class='nabimg' src="{{navswiper[2].mineflag? navswiper[2].navimg_:navswiper[2].navimg}}"></image></view>
<view class="{{navswiper[2].mineflag? 'col_g':'col_77' }}">{{navswiper[2].navtit}}</view>
</view>
</view>
</template>
 
首页面引入:
 
头部引入:
<import src = "../common/naviBot.wxml"/>
 
底部引入:
<view>
<template is="naviBot" data="{{navswiper}}" />
</view>
 
js部分:
将不同状体及切换开关统一定义到导航变量
不同的页面indflag/cartflag/mineflag/的状态不同
首页
navswiper: [{ navtit: '首页',
navimg: '../images/navind.png',
navimg_: '../images/navind_1.png',
indflag:true
}, {
navtit: '购物车',
navimg: '../images/navcart.png',
navimg_: '../images/navcart_1.png' ,
cartflag:false
}, {
navtit: '我的',
navimg: '../images/navmine.png',
navimg_: '../images/navmine_1.png',
mineflag:false
}],
 
我的页面
navswiper: [{
navtit: '首页',
navimg: '../images/navind.png',
navimg_: '../images/navind_1.png',
indflag:false
}, {
navtit: '购物车',
navimg: '../images/navcart.png',
navimg_: '../images/navcart_1.png',
cartflag:false
}, {
navtit: '我的',
navimg: '../images/navmine.png',
navimg_: '../images/navmine_1.png',
mineflag:true
}],
 
注意不同页面状态开关的改变
这样就可以简单实现自定义下导航
 

微信小程序自定义下导航页面切换效果的合理写法的更多相关文章

  1. 微信小程序-自定义底部导航

    代码地址如下:http://www.demodashi.com/demo/14258.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  2. 微信小程序-自定义菜单导航(实现楼梯效果)

    设计初衷 在开发页面时,往往需要实现,点击页面的导航菜单页面滚动到相应位置,滚动页面实现菜单选项的高亮.在html开发中,我们可以用到a标签锚点实现,jq的动画相结合实现类似效果.在框架中vant U ...

  3. 微信小程序-自定义下拉刷新

    最近给别个公司做技术支持,要实现微信小程序上拉刷新与下拉加载更多 微信给出的接口不怎么友好,最终想实现效果类似QQ手机版 ,一共3种下拉刷新状态变化,文字+图片+背景颜色 最终实现后的效果(这里提示有 ...

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

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

  5. 微信小程序自定义顶部导航

    注释:自定义导航需要自备相应图片 一.设置自定义顶部导航 Navigation是小程序的顶部导航组件,当页面配置navigationStyle设置为custom的时候可以使用此组件替代原生导航栏. 1 ...

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

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

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

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

  8. 微信小程序——自定义导航栏

    微信头部导航栏可能通过json配置: 但是有时候我们项目需求可能需要自定义头部导航栏,如下图所示: 现在具体说一下实现步骤及方法: 步骤: 1.在 app.json 里面把 "navigat ...

  9. 微信小程序 自定义导航组件 nav头部 全面屏设计

    nav-dynamic 微信小程序自定义nav头部组件:适配全面屏设计: 实现功能 初始进入页面时,展示初始状态下的nav样式: 页面滚动时,监听页面滚动事件,展示滚动状态下的nav样式: 根据配置字 ...

随机推荐

  1. 邁向IT專家成功之路的三十則鐵律 鐵律十八:IT人求職之道-文化

    IT人所從事的工作是一個求新求變速度最快的行業,因此您所待的企業IT部門或資訊公司,其組織文化將關係到您在這間公司服務期間,是否能夠快速成長的決定因素.遇到不良的組織文化建議您三個就可以走人了,千萬別 ...

  2. xamarin.android pullToRefresharp.Android下拉刷新样式、侧滑删除功能

    如果你正则使用xamarin.From开发项目,那么listview一定是你比不可少的控件.但是由于xamarin的listview在安卓上的功能有限,所以经常需要使用Renderers来改写平台实现 ...

  3. boost exception jam0.exe 异常错误

    在Windows 8 64 bit下执行boost_1_53_0的bootstrap.bat出现了jam0.exe执行错误 搜索网页发现需要修改两处文件: tools/build/v2/engine/ ...

  4. iOS开发 CGBitmapContextCreate

    最近项目中,需要对图片进行各种操作. 使用CGBitmapContextCreate 创建位图上下文. CG_EXTERN CGContextRefCGBitmapContextCreate(void ...

  5. C 标准库 - <locale.h>

    C 标准库 - <locale.h> 简介 locale.h 头文件定义了特定地域的设置,比如日期格式和货币符号.接下来我们将介绍一些宏,以及一个重要的结构 struct lconv 和两 ...

  6. hdu 4432 数学杂题

    http://acm.hdu.edu.cn/showproblem.php?pid=4432 6分钟写的代码,一上午去调试,, 哎,一则题目没看懂就去写了,二则,哎,,恶心了.在坚持几天然后ACM退役 ...

  7. matplotlib简易新手教程及动画

    做数据分析,首先是要熟悉和理解数据.所以掌握一个趁手的可视化工具是很重要的,否则对数据连个主要的感性认识都没有,怎样进行下一步的design 点击打开链接 还有一个非常棒的资料  Matplotlib ...

  8. soapUI学习笔记---断言的小使用

    转自:http://www.cnblogs.com/duimianyoushan/p/4274791.html 以下示例在soapUI 4.5中进行.刚开始学soapUI的使用,记录下以免忘记 1.创 ...

  9. hdu 1081 &amp; poj 1050 To The Max(最大和的子矩阵)

    转载请注明出处:http://blog.csdn.net/u012860063 Description Given a two-dimensional array of positive and ne ...

  10. DDR 布线规则

    https://blog.csdn.net/cpf099/article/details/52038862 https://blog.csdn.net/cpf099/article/details/5 ...