微信小程序自定义底部导航带跳转功能

本文实例为大家分享了微信小程序实现底部导航带跳转功能的具体代码，供大家参考，具体内容如下

index.wxml

！-底部导航-view class=' footer ' view class=' footer _ list ' data-id=' { { index } } ' catch tap=' Navigation ' wx : for=' { { listInfo } } ' data-current=' { { index } } ' wx : key=' this ' bind tap=' choice img ' image class=' footer-image ' hidden=' { { curIdx===index } } ' src=' http : { { item。im gurl } } '/image image class==index } } ' src=' http : { { item }。cur URl } } '/image view class=' footer-text ' { item。text } }/view/view/view！-底部导航index.js

page({ const app=GetApp()；data:{ //底部导航curIdx: 0，列表信息：[{ text : }首页，imgUrl: '/image/index.png '，cur URL : '/image/index _ active。png '，}，{ text: '兼职入口，imgUrl: '/image/market.png '，cur URL : '/image/market _ active。png '，}，{ text: '个人中心，imgUrl: '/image/my.png '，cururl : '/image/my _ active。png '，}，] }，Navigation:函数（事件){ var那=thisapp .导航（事件、那个);}, //底部导航选择Img:函数{这个。setdata({ curidx : e .当前目标。数据集。当前})//控制台。日志(e)//控制台。日志(这个。数据。curidx)}，//底部导航结束})app.wxss

/*自定义底部导航开始*/.页脚{位置：固定；底部： 0；宽度： 100%;高度：100rpx/*页脚的高度*/background : # ffff；z指数： 500；边框-顶部：1 rpx实心# CCCdisplay : flex flex-方向：行；}.footer _ list { width :17%；高度：100%;文本对齐：居中；填充-top :8 rpx；左边距左：60 rpxmargin-右：62 rpx}.页脚图像{宽度：40%；高度：45%;}.页脚-文本{ font-size : 22 rpx}/*底部导航结束*/兼职。页面结构

！-底部导航-view class=' footer ' view class=' footer _ list ' data-id=' { { index } } ' catch tap=' Navigation ' wx : for=' { { listInfo } } ' data-current=' { { index } } ' wx : key=' this ' bind tap=' choice img ' image class=' footer-image ' hidden=' { { curIdx===index } } ' src=' http : { { item。im gurl } } '/image image class==index } } ' src=' http : { { item }。cur URl } } '/image view class=' footer-text ' { item。text } }/view/view/view！-底部导航兼职

page({ const app=GetApp()；data:{ //底部导航curIdx: 1，列表信息：[{ text : }首页，imgUrl: '/image/index.png '，cur URL : '/image/index _ active。png '，}，{ text: '兼职入口，imgUrl: '/image/market.png '，cur URL : '/image/market _ active。png '，}，{ text: '个人中心，imgUrl: '/image/my.png '，cururl : '/image/my _ active。png '，}，] }，Navigation:函数（事件){ var那=thisapp .导航（事件、那个);}, //底部导航选择Img:函数{这个。setdata({ curidx : e .当前目标。数据集。当前})//控制台。日志(e)//控制台。日志(这个。数据。curidx)}，//底部导航结束})my.wxml

！-底部导航-view class=' footer ' view class=' footer _ list ' data-id=' { { index } } ' catch tap=' Navigation ' wx : for=' { { listInfo } } ' data-current=' { { index } } ' wx : key=' this ' bind tap=' choice img ' image class=' footer-image ' hidden=' { { curIdx===index } } ' src=' http : { { item。im gurl } } '/image image class==index } } ' src=' http : { { item }。cur URl } } '/image view class=' footer-text ' { item。text } }/view/view/view！-底部导航-Page({ const app=GetApp()；/** * 页面的初始数据*/data: { //底部导航curIdx: 2，listInfo: [ { text: '首页，imgUrl: '/image/index.png '，cur URL : '/image/index _ active。png '，}，{ text: '兼职入口，imgUrl: '/image/market.png '，cur URL : '/image/market _ active。png '，}，{ text: '个人中心，imgUrl: '/image/my.png '，cururl : '/image/my _ active。png '，}，] }，//导航导航：函数（事件){ var=this应用程序.导航（事件、那个);}, //底部导航选择Img:函数{这个。setdata({ curidx : e .当前目标。数据集。当前})//控制台。日志(e)//控制台。日志(这个。数据。curidx)}，//底部导航结束})效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。