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


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 相关文章推荐
xmlHTTP实例
Oct 24 Javascript
使用Firebug对js进行断点调试的图文方法
Apr 02 Javascript
jquery的选择器的使用技巧之如何选择input框
Sep 22 Javascript
简单的Jquery全选功能
Nov 07 Javascript
jQuery遍历之next()、nextAll()方法使用实例
Nov 08 Javascript
再谈javascript原型继承
Nov 10 Javascript
JavaScript实现的简单拖拽效果
Jun 01 Javascript
jquery小火箭返回顶部代码分享
Aug 19 Javascript
js放大镜放大购物图片效果
Jan 18 Javascript
使用javaScript实现鼠标拖拽事件
Apr 03 Javascript
javascript数组元素删除方法delete和splice解析
Dec 09 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
Jun 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
PHILIPS D1835/D1875的电路分析与打理
2021/03/02 无线电
第九节 绑定 [9]
2006/10/09 PHP
PHP常用的文件操作函数经典收藏
2013/04/02 PHP
php Session存储到Redis的方法
2013/11/04 PHP
PHP实现QQ登录实例代码
2016/01/14 PHP
PHP封装的非对称加密RSA算法示例
2018/05/28 PHP
PHP命名空间定义与用法实例分析
2019/08/14 PHP
javascript 面向对象的JavaScript类
2010/05/04 Javascript
window.parent与window.openner区别介绍
2012/04/12 Javascript
网页中表单按回车就自动提交的问题的解决方案
2014/11/03 Javascript
jQuery中prev()方法用法实例
2015/01/08 Javascript
javascript实现按回车键切换焦点
2015/02/09 Javascript
javascript动态添加删除tabs标签的方法
2015/07/06 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
2015/08/06 Javascript
AngularJS 表达式详解及实例代码
2016/09/14 Javascript
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
Vue2.0如何发布项目实战
2017/07/27 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
2017/09/17 Javascript
vue实现仿淘宝结账页面实例代码
2017/11/08 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
2018/03/07 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
2020/11/24 Javascript
python中使用sys模板和logging模块获取行号和函数名的方法
2014/04/15 Python
简单的Python2.7编程初学经验总结
2015/04/01 Python
python根据unicode判断语言类型实例代码
2018/01/17 Python
python中将两组数据放在一起按照某一固定顺序shuffle的实例
2019/07/15 Python
python简单实现最大似然估计&amp;scipy库的使用详解
2020/04/15 Python
用Python自动清理系统垃圾的实现
2021/01/18 Python
意大利珠宝店:Luxury Zone
2019/01/05 全球购物
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
如何查找网页漏洞
2016/06/22 面试题
物流仓管员岗位职责
2015/04/01 职场文书
离婚撤诉申请书范本
2015/05/18 职场文书
钱学森电影观后感
2015/06/04 职场文书
导游词之晋城蟒河
2019/12/12 职场文书
JavaScript 数组去重详解
2021/09/15 Javascript
聊聊Python String型列表求最值的问题
2022/01/18 Python