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

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

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

(0)

相关推荐

  • 微信小程序实现全局搜索代码高亮的示例

    需求 最近在做微信小程序的时候,需要实现在搜索框的输入内容的时候实现全局匹配实现高亮效果,目前的思路是,递归后台来返回的数据,并将对象的value值替换为需要的dom节点,并且通过rich-text来实现,高亮效果. 代码 wxml: <view class='homePage'> <input bindinput="bindKeyInput"></input> <view wx:for="{{newJson}}" wx:f

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

    最近开发小程序,需要做一个导航,导航可以通过template写出来,但是这个项目需要在导航中处理一些逻辑,做成组件更方便些. 首先新建header文件夹,里面新建对应的js.json.wxml.wxss文件. <!-- 公共头部组件 --> <view class='headers'> <navigator open-type="redirectTo" class='logo' url="../index/index" hover-cl

  • 微信小程序之自定义组件的实现代码(附源码)

    最近在项目开发中,遇到好多雷同的页面样式,就想着可以将常用的功能模块封装成组件,方便在项目中使用和修改,下面就参照微信小程序的文档分步骤写一个微信小程序的组件. 附上效果图: step1:创建文件并申明 与创建微信小程序的页面一样,一个自定义组件也需要json,wxml,wxss,js四个文件. 在项目根目录中创建文件夹,取名为:component,在该目录下继续创建文件夹successModal. 可以在开发工具中右键创建,选择component,默认自动会创建四个文件.如图: 在succes

  • 微信小程序实现点击导航条切换页面

    本文实例为大家分享了微信小程序实现点击导航条切换页面的具体代码,供大家参考,具体内容如下 我录制了个gif如下,黄色部分是不可以滑动的,蓝色部分可以滑动. 代码解说: 首先我在js自定义了navState参数用于判断导航的当前状态, 定义了data-index用于js中动态修改导航的当前状态, nav-switch-style为选择导航条时的样式, 不可滑动视图切换很简单,用wx:if判断状态显示相应页就好了, 滑动页视图切换要用到swiper和 swiper-item, 用bindchang方

  • 微信小程序实现自定义底部导航

    本文实例为大家分享了微信小程序实现底部导航的具体代码,供大家参考,具体内容如下 建一个tabbar.wxml组件 <template name="tabBar"> <view class="tab-bar" style="color: {{tabBar.color}}; background: {{tabBar.backgroundColor}}; {{tabBar.position=='top'? 'top: 0' : 'bottom:

  • 微信小程序vant弹窗组件的实现方式

    作为从事前端开发的你肯定见过不少的弹框组件,你可曾有想过要自己实现一个弹框组件库,又或者想完全定制化的使用各种标准UI框架中的弹框组件呢? 今天这篇文章将会带着你解析这一系列疑问,以vant-weapp组件库为例,从开发标准的弹窗组件使用到高度定制复合自我审美的弹窗,再到完全研究清楚vant-weapp框架弹窗组件部分源码. 一.vant-weapp弹窗组件介绍 vant-weapp组件库是有赞团队开发的 一款灵活简洁且美观的小程序UI组件库 ,此文将以这个组件库的用法为标准,下文提及的弹框组件

  • 微信小程序非swiper组件实现的自定义伪3D轮播图效果示例

    本文实例讲述了微信小程序非swiper组件实现的自定义伪3D轮播图效果.分享给大家供大家参考,具体如下: 效果如下: 我用了很笨的方法实现的,大致就是: 1.当前点击的div(view)如果前后都有内容,那么,当前div(view)就设置到中间,前一个就设置到左边,前一个的前面所有全部设置到最左边,后面一个设置到右边,后面所有设置到最右边 2.当前点击的div(view)如果前面无内容,即第一个,那么,当前div(view)设置到中间,后面一个设置到右边,后面所有设置到最右边 3.当前点击的di

  • 微信小程序实现自定义弹窗组件的示例代码

    目录 编写组件代码 Dialog.wxml Dialog.js Dialog.wxss 调用自定义组件 上一篇中说的是小程序自带的弹窗组件,今天,我们来试试小程序的自定义组件,我们自定义一个带确定取消的弹窗组件. 首先,放一下,最终的效果图: 这是我们最后要实现的效果 那么,首先,我们创建一个组件 新建component文件夹存放我们的组件,里边存放的就是我们所用的组件,我们今天要做的事弹出框,新建文件夹popup存放我们的组件模板,点击右键选择新建component,就会自动生成组件的模板wx

  • 微信小程序实现自定义拍摄组件

    微信小程序实现自定义摄像头(在摄像头内添加提示信息),供大家参考,具体内容如下 摄像头组件(wxml) <!-- 拍照功能 自定义摄像头           bindtap:takePhotoDepot----从图库获取           bindtap:takePhoto----拍照           bindtap:takeFrontBack---转换摄像头  --> <view wx:if="{{useCameraTakePhoto}}" class=&qu

  • 微信小程序开发自定义tabBar实战案例(定制消息99+小红心)

    目录 一.前提概要 二. 动态显示info消息 三. 页面切换效果 四. 配置总结 一.前提概要 效果:实现一个自定义tabBar,使消息tabBar能够显示消息数量,并通过全局共享的方式,控制消息数量 需要的知识点如下: mobx辅助库(全局共享,见文章) vant组件库(见文章) 组件的behavior (见文章) 自定义组件 样式隔离 组件数据监听器 自定义组件主要分为三个步骤(许多实例实现步骤差不多流程) 配置信息 (几乎每个要实现的都需要这一步) 创建自定义组件代码文件 编写代码 详细

  • 微信小程序使用modal组件弹出对话框功能示例

    本文实例讲述了微信小程序使用modal组件弹出对话框功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ①.index.wxml <view>提示:{{tip}}</view> <button type="default" bindtap="showModal">点击我弹出modal对话框</button> <view> <modal title="modal对话框"

随机推荐