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

曾经终败给现在 2022-12-02 13:49 493阅读 0赞

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

**主要效果为  
1 . 点击切换不同的导航栏，且点击目标高亮  
2 . 不同的导航栏显示的内容不同**  
![在这里插入图片描述][20200831115237844.gif_pic_center]  
**（ 1 ）. 在微信开发者工具中新建components文件夹，在下面创建子组件，并命名为navigate（右键点击components文件夹，创建可以直接创建好所有所需要的目录并初始化，很方便）**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70_pic_center]  
**接下来创建父组件，子组件和父组件之间进行通信**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70_pic_center 1]  
**父组件引用子组件时，需要在父组件的 json 文件中，进行引入**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70_pic_center 2]  
**然后我们开始编写子组件的.wxml文件**

<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>

\*\*再编写一下子组件的样式，使用的 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;
            }
        }
    }

**然后对子组件的 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})
            }
        }
    })

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

<Tabs tabs="{ {tabs}}" bindreSetData="reSetData">
    
        <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>

// 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
        })
      }
    })

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70_pic_center 3]

[20200831115237844.gif_pic_center]: /images/20221123/bd2c7b6ec22c4fbc8ded0f24ebd1321c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/8d6e5d203e2f4923ba4c08c8650b9766.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/e17aaee4709844c381653122c0631901.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/2f951d448c924b13aa29d1c38f5c4bfe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/e5990820f3a2439190e3da95e42dd52b.png