微信小程序使用自定义组件导航实现当前页面高亮
作者:我的一个道姑朋友 发布时间: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
投稿
猜你喜欢
- 本人机器环境:Windows 2008 R2MySQL 5.6以“Window下忘记Mysql的root密码”百度,找到一大堆解决方案。大多
- 如下所示:#获取一个值在某个区间的指定倍数的值方法#1# print([i for i in range(1,101) if i%5==0]
- 一、xlrd的安装打开cmd输入pip install xlrd安装完成即可二、xlrd模块的使用下面以这个工作簿为例1、导入模块impor
- 一般开发,SQL Server的数据库所有者为dbo.但是为了安全,有时候可能把它换成其它的名称,所有者变换不是很方便.这里列出两种供参考
- 闭包(closure)是函数式编程的重要的语法结构。函数式编程是一种编程范式 (而面向过程编程和面向对象编程也都是编程范式)。在面向过程编程
- python eval函数功能:将字符串str当成有效的表达式来求值并返回计算结果。函数定义:eval(expression, global
- 环境:A机器和B机器都是LINUX系统,但由于B机器已经空间不足,所以停掉不停操作数据库的服务后 ,准备在A机器进行导出操作。导出语句 ex
- 本文讲述了Python检测网络延迟的代码。分享给大家供大家参考,具体如下:#!/usr/bin/env python # coding: u
- 本期我们将展示一种对路面类型和质量进行分类的方法及其步骤。为了测试这种方法,我们使用了我们制作的RTK数据集。路面分类该数据集[1]包含用低
- 本文实例分析了Flask和Django框架中自定义模型类的表名、父类相关问题。分享给大家供大家参考,具体如下:一. Flask和Django
- 我们可以通过mysql命令查看mysql的安装路径:# 以下两个sql任意一个可查询select @@basedir as basePath
- 前言随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了windows下YOLO的环境搭建流程。一
- 一、Pyeharts简介pyecharts 是一个用于生成 Echarts 图表的类库。用 Echarts 生成的图可视化效果很不错,pye
- asp之家注:防止表单重复提交的方法,在客户端其实很容易实现,只要使用js让用户第一次点击提交按钮后,把提交按钮设置为disabled,这样
- 和朋友讨论时,我提到过一个观点,所有框架层设计中,最核心的是导航设计。最近更看到有国外同行提出“80%的可用性是导航!”因为良好的导航可以保
- 代码如下:<% '--------定义部份------------------ Dim XH_P
- 概述:最近在赶毕业设计,遇到一个问题,爬虫模块我用PyQt5写了图形界面,为了将所有的输出信息都显示到图形界面上遇到了问题。先演示一下效果最
- 什么是科赫曲线科赫曲线是de Rham曲线的特例。给定线段AB,科赫曲线可以由以下步骤生成: 将线段分成三等份(AC,CD,DB) 以CD为
- Pandas提供了duplicated、Index.duplicated、drop_duplicates函数来标记及删除重复记录duplic
- 前面简单介绍了Python字符串基本操作,这里再来简单讲述一下Python列表相关操作1. 基本定义与判断>>> dir(