• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序自定义下导航页面切换效果的合理写法

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

上图:::

 

 

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

<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
}],
 
注意不同页面状态开关的改变
这样就可以简单实现自定义下导航
 

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序:分包踩坑总结发布时间:2022-07-18
下一篇:
Qt小程序仿写----FileRead程序发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap