微信小程序使用自定义组件导航实现当前页面高亮
作者:我的一个道姑朋友 时间:2024-04-22 12:50:16
最近开发小程序,需要做一个导航,导航可以通过template写出来,但是这个项目需要在导航中处理一些逻辑,做成组件更方便些。
首先新建header文件夹,里面新建对应的js、json、wxml、wxss文件。
<!-- 公共头部组件 -->
<view class='headers'>
<navigator open-type="redirectTo" class='logo' url="../index/index" hover-class="none">
<image src="../../assets/img/logo2.png" mode="widthFix"></image>
</navigator>
<view class="phone_nav_switch" bindtap="controlNav">
<view class="iconfont icon-daohang" hidden="{{navIsShow}}"></view>
<view class="iconfont icon-guanbi" hidden="{{!navIsShow}}"></view>
</view>
<view class="nav">
<view class="shadow {{navIsShow ? 'active':''}}" bindtap="controlNav"></view>
<view class="bg {{navIsShow ? 'active':''}}">
<view class='con' wx:for="{{navs}}" wx:key="item.url">
<navigator open-type="redirect" data-index="{{index}}" class="{{index === navActive ? 'active' : ''}}" url="{{item.url}}" hover-class="none">
{{item.text}}
</navigator>
</view>
</view>
</view>
<!-- 返回顶部 -->
<view class="backTop" bindtap="goTop" hidden='{{floorstatus}}'>
<text class="icon iconfont icon-iconfonticontrianglecopy"></text>
</view>
</view>
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,
<!-- 头部组件 -->
<view class='header'>
<!-- 导航高亮传值 -->
<header navActive='0'></header>
</view>
如果相等当前页面就会高亮
需要在在heaer.js设置navActive的类型,通过上面的操作,我是能够实现当前页面导航高亮的
,
希望能帮到需要的人,如果觉得我上面写的不清楚的话,这是我的github
https://github.com/mazixiao/wechat_zhutian
,这个是我做好了的
来源:https://segmentfault.com/a/1190000021459249
标签:小程序,页面高亮
0
投稿
猜你喜欢
Python flask使用ajax上传文件的示例代码
2021-06-25 17:40:29
Python使用OpenCV对图像进行缩放功能
2022-05-06 03:47:51
javascript json字符串到json对象转义问题
2023-07-02 05:18:22
基于 Mysql 实现一个简易版搜索引擎
2024-01-25 02:00:38
sqlserver找回企业管理器的方法
2024-01-27 08:41:54
python变量命名的7条建议
2021-05-15 20:16:07
使用Python3编写抓取网页和只抓网页图片的脚本
2023-08-15 08:00:17
详解partition by和group by对比
2024-01-24 11:27:05
pyinstaller封装exe的操作
2021-02-12 03:21:16
基于canvas的二维码邀请函生成插件
2024-04-17 10:40:53
Python实现的使用telnet登陆聊天室实例
2023-11-17 10:41:17
JQuery+DIV自定义滚动条样式的具体实现
2024-04-22 13:27:07
python Event事件、进程池与线程池、协程解析
2023-09-06 00:39:19
Go语言中的自定义类型你了解吗
2024-02-06 00:11:36
CentOS中安装python3.8.2的详细教程
2022-05-08 11:55:52
mysql仿oracle的decode效果查询
2024-01-12 22:04:00
Navicat for MySQL 与 MySQL-Front比较
2009-02-12 17:33:00
win10下mysql 5.7.23 winx64安装配置方法图文教程
2024-01-18 07:28:06
Python shelve模块实现解析
2023-06-23 16:58:01
python flask框架快速入门
2021-10-16 22:02:26