原生微信小程序,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>
**再编写一下子组件的样式,使用的 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"是子组件通过事件绑定的方式,向父组件传递参数 -->
<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>
// 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
})
}
})