header.js里的导航数据
/**
*组件的属性列表
*/
properties:{
//当前导航高亮
navActive:{
//类型
type:Number,
//默认值
value:0
}
},
data:{
//导航开关
navIsShow:false,
currentIndexNav:0,
//floorstatus:false,
navs:[
{
text:'网站首页',
url:'../index/index'
},
{
text:'招商加盟',
url:'../join/join'
},
{
text:'关于煮田',
url:'../about/about'
},
{
text:'煮田美食',
url:'../food/food'
},
{
text:'最新资讯',
url:'../news/news'
},
{
text:'门店查询',
url:'../search/search'
},
{
text:'联系我们',
url:'../contact/contact'
},
{
text:'视频列表',
url:'../videoItem/videoItem'
}
]
},
导航放在class="nav"中，header.json文件中写入
{
"component":true
}
需要引入组件的页面的json文件写入，比如index.json
{
"component":true,
"usingComponents":{
"header":"../header/header"
}
}
然后在index.wxml引入组件,navActive是传给组件的值，目的是为了对应导航组件内的导航每一项的index，比如首页的index为0，那我在首页内定义的navActive就是0，
如果相等当前页面就会高亮
需要在在heaer.js设置navActive的类型，通过上面的操作，我是能够实现当前页面导航高亮的
，
希望能帮到需要的人，如果觉得我上面写的不清楚的话，这是我的github
https://github.com/mazixiao/wechat_zhutian
,这个是我做好了的
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。