原生微信小程序，navigate（导航栏）组件_$navigate

原生微信小程序，navigate（导航栏）组件

主要效果为
1 . 点击切换不同的导航栏，且点击目标高亮
2 . 不同的导航栏显示的内容不同

（ 1 ）. 在微信开发者工具中新建components文件夹，在下面创建子组件，并命名为navigate（右键点击components文件夹，创建可以直接创建好所有所需要的目录并初始化，很方便）

接下来创建父组件，子组件和父组件之间进行通信

父组件引用子组件时，需要在父组件的 json 文件中，进行引入

然后我们开始编写子组件的.wxml文件

<!-- 编写子组件 -->
<!-- 子组件中wx:for="{{tabs}}" 中的数据是从父组件传递过来的-->
<!-- 父传子，父组件通过属性的方式，子组件通过在js文件中的properties属性进行接收 -->
<!-- 子组件定义class值，通用class属性 title_item -->
<!-- active属性为选中的标签属性，三元表达式判断要不要给当前元素赋 active -->
<view class="tabs">
    <view class="tabs_title">
        <view class="title_item {{item.isActive?'active':''}}"
         data-index="{{item.id}}"
         wx:for="{{tabs}}"
         bind:tap="handleItemChange">
            {{item.name}}
        </view>
    </view>
    <slot></slot>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

**再编写一下子组件的样式，使用的 less **

.tabs {
    .tabs_title {
        display: flex;
        padding: 10rpx;

        .title_item {
            padding: 20rpx;
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .active {
            color: red;
            border-bottom: 5rpx solid red;
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

然后对子组件的 js 逻辑进行编写

// components/navigate.js
Component({
    // properties属性，用来接收父组件通过属性的方式，传递过来的参数
    // 使用方法和 Vue 里的props是一样的
    properties: {
        tabs: {
            type: Array
        }
    },
    Data: {

    },
// 绑定点击事件（子组件绑定事件和 父组件绑定事件不一样，子组件需要在methods中绑定）
    methods: {
        handleItemChange: function (e) {
            // 获取被点击的索引
            const { index } = e.currentTarget.dataset;
            // 获取原数组，也就是父组件传递过来的值
            const { tabs } = this.data;
            // 遍历数组，如果点击的序号等于当前遍历的序号，这让该序号的isActive属性变为true，其余的都变成false
            tabs.forEach((item, arrIndex) => arrIndex === index ? item.isActive = true : item.isActive = false)
            // 将修改后的值重新设置到 data 中
            this.setData({
                tabs
            })
            // 子组件向父组件传递参数，通过 this.triggerEvent 触发父组件中的函数 进行参数传递
            // 父组件那边，需要在组件标签上定义 bind子组件传递过去的函数名="自定义函数名"，进行接收
            // 如 bindreSetData = "reSetData"
            // 和 Vue 中的 this.$emit 一样
            /**
             * 这一步的目的很重要，是将父组件中的值进行同步修改，否则就是子组件获取的值修改了，但是父组件中的值没有被修改
             * 子组件中修改好的值作为参数，传递给父组件
             */
            this.triggerEvent("reSetData",{tabs})
        }
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

到这里子组件已经完成了，接下来进行父组件的编写

<!-- 父组件引入子组件，并命名为Tabs -->
<!-- 父组件通过属性的方式，向子组件传递参数，这里是通过tabs="{{tabs}}"进行传递的 -->
<!-- bindreSetData="reSetData"是子组件通过事件绑定的方式，向父组件传递参数 -->
<Tabs tabs="{{tabs}}" bindreSetData="reSetData">
<!-- block占位符标签，根据当前标签的true和false值，判断是否显示 -->
    <block wx:if="{{tabs[0].isActive}}">首页</block>
    <block wx:elif="{{tabs[1].isActive}}">分类</block>
    <block wx:elif="{{tabs[2].isActive}}">频道</block>
    <block wx:else="{{tabs[3].isActive}}">关于</block>

</Tabs>
1
2
3
4
5
6
7
8
9
10
11

// pages/navigate/navigate.js
Page({
  data: {
    // 父组件自定义的标签属性
    tabs: [
      {
        id: 0,
        name: "首页",
        isActive: true
      },
      {
        id: 1,
        name: "分类",
        isActive: false
      },
      {
        id: 2,
        name: "频道",
        isActive: false
      },
      {
        id: 3,
        name: "关于",
        isActive: false
      }
    ]

  },
  // 子组件传递的事件函数，在这里进行处理
  reSetData: function (tabs) {
    this.setData({
      // 将子组件修改后的参数，重新赋值到父组件上
      tabs: tabs.detail.tabs
    })
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36