zoukankan      html  css  js  c++  java
  • 微信小程序自定义下导航页面切换效果的合理写法

    上图:::

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

    <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
    }],
     
    注意不同页面状态开关的改变
    这样就可以简单实现自定义下导航
     
  • 相关阅读:
    生产环境Crontab专业实例
    Linux系统定时任务介绍
    Linux文件属性改变命令chown-chgrp-chattr-lsattr实践
    Linux命令总结
    Linux特殊权限位suid、sgid深度详细及实践
    企业场景-网站目录安全权限深度讲解及umask知识
    shell简介
    Nginx模块及配置虚拟主机
    安装Nginx
    Nginx简介
  • 原文地址:https://www.cnblogs.com/lvlina/p/8954119.html
Copyright © 2011-2022 走看看