微信小程序使用自定义组件导航实现当前页面高亮


Posted in Javascript onJanuary 02, 2020

最近开发小程序,需要做一个导航,导航可以通过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
,这个是我做好了的

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现iframe动态调整高度的代码
Jan 06 Javascript
js如何判断不同系统的浏览器类型
Oct 28 Javascript
jQuery把表单元素变为json对象
Nov 06 Javascript
js实现获取焦点后光标在字符串后
Sep 17 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
React组件生命周期详解
Jul 03 Javascript
JavaScript中Object基础内部方法图
Feb 05 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
May 26 Javascript
vue style width a href动态拼接问题的解决
Aug 07 Javascript
js实现带有动画的返回顶部
Aug 09 Javascript
uniapp微信小程序:key失效的解决方法
Jan 20 Javascript
javascript实现简单页面倒计时
Mar 02 Javascript
Vue 实现分页与输入框关键字筛选功能
Jan 02 #Javascript
jQuery实现的图片点击放大缩小功能案例
Jan 02 #jQuery
Vue 实现简易多行滚动&quot;弹幕&quot;效果
Jan 02 #Javascript
JS实现秒杀倒计时特效
Jan 02 #Javascript
在weex中愉快的使用scss的方法步骤
Jan 02 #Javascript
JS实现导航栏楼层特效
Jan 01 #Javascript
JS实现旋转木马轮播图
Jan 01 #Javascript
You might like
深入解析php中的foreach问题
2013/06/30 PHP
PHP自带ZIP压缩、解压缩类ZipArchiv使用指南
2015/03/03 PHP
Smarty foreach控制循环次数的一些方法
2015/07/01 PHP
PHP面向对象详解(三)
2015/12/07 PHP
Yii控制器中操作视图js的方法
2016/07/04 PHP
PHP的自定义模板引擎
2017/03/24 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
PHP二维数组分页2种实现方法解析
2020/07/09 PHP
jQuery textarea的长度进行验证
2009/05/06 Javascript
jQuery each()方法的使用方法
2010/03/18 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
javascript文件中引用依赖的js文件的方法
2014/03/17 Javascript
Js数组排序函数sort()介绍
2015/06/08 Javascript
常用的javascript设计模式
2017/01/11 Javascript
详解用vue编写弹出框组件
2017/07/04 Javascript
jQuery扩展_动力节点Java学院整理
2017/07/05 jQuery
详解JSON.stringify()的5个秘密特性
2020/05/26 Javascript
python获得文件创建时间和修改时间的方法
2015/06/30 Python
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2016/11/19 Python
python多进程中的内存复制(实例讲解)
2018/01/05 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
python 伯努利分布详解
2020/02/25 Python
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
亚马逊西班牙购物网站:amazon西班牙
2017/03/06 全球购物
美国领先的医疗警报服务:Philips Lifeline
2018/03/12 全球购物
什么是SQL Server的确定性函数和不确定性函数
2016/08/04 面试题
应届生.NET方向面试题
2015/05/23 面试题
Java程序员面试题
2013/07/15 面试题
播音主持女孩的自我评价分享
2013/11/20 职场文书
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
学术会议主持词
2014/03/17 职场文书
《雕塑之美》教学反思
2014/04/24 职场文书
《称象》教学反思
2014/04/25 职场文书
乡镇精神文明建设汇报材料
2014/08/15 职场文书
红领巾广播站广播稿(3篇)
2014/09/20 职场文书
十大好看的穿越动漫排名:《瑞克和莫蒂》第一,国漫《有药》在榜
2022/03/18 日漫