小程序使用组件实现顶部导航点击文字变色
2019-12-12 本文已影响0人
编程小橙子
timg.jpg
先看效果图
image.png
首先新建一个component的目录，并且和pages是同级
image.png
在component下新建一个目录my-tab-nav
image.png
如下图在文件夹下右键后选择第三个，名字和目录名尽量相同
image.png
引入my-tab-nav组件，需要在my-tab-nav.json中将"component": true,设置为true
image.png
在index.json中进行配置如图
image.png
在index中引入组件使用
image.png
具体功能实现请看如下代码
my-tab-nav.wxml
<!--component/my-tab-nav/my-tab-nav.wxml-->
<view class='content-box'>
<block wx:for='{{dataList}}' wx:key='this'>
<view class='content-item {{currentIndex == index ? "active" : ""}}' bindtap='itemClick' data-index='{{index}}'>
<text>{{item}}</text>
</view>
</block>
</view>
my-tab-nav.wxss
/* component/my-tab-nav/my-tab-nav.wxss */
.content-box{
display: flex;
height: 100rpx;
background: rgb(236, 229, 229);
}
.content-item{
flex: 1;
text-align: center;
line-height: 100rpx;
font-size: 28rpx;
}
.active{
color: red;
}
my-tab-nav.js
// component/my-tab-nav/my-tab-nav.js
Component({
/**
* 组件的属性列表
*/
properties: {
dataList:{
type:Array, //类型为数组
}
},
/**
* 组件的初始数据
*/
data: {
currentIndex:0 //默认为0
},
/**
* 组件的方法列表
*/
methods: {
itemClick(e){
var data = new Object()
console.log(e)
data.currentIndex = e.currentTarget.dataset.index
this.setData(data)
// 参数一：myList 指定事件名
// 参数二：myData detail对象，提供给事件监听函数
// 参数三：myEventOption 触发事件的选项
/*
bubbles 事件是否冒泡 默认false
composed 事件是否可以穿越组件边界，为false时，事件将只能在引用组件的节点树上触发，不进入其他任何组件内部 默认false
capturePhase 事件是否拥有捕获阶段 默认false
*/
let myData = { // detail对象，提供给事件监听函数
currentIndex: this.data.currentIndex, //默认值0
title:this.data.dataList[this.data.currentIndex] //标题
}
this.triggerEvent('myList', myData)
}
}
})
my-tab-nav.json
{
"component": true,
"usingComponents": {}
}
在index中使用组件
index.json
{
"usingComponents": {
"my-tab-nav":"/component/my-tab-nav/my-tab-nav"
}
}
index.wxml
<!--index.wxml-->
<view>
<my-tab-nav bindmyList='itemMyList' dataList='{{classify}}'></my-tab-nav>
</view>
index.js
//index.js
Page({
data: {
classify: ['首页', '新闻', '推荐', '科幻','武侠']
},
// 通过指定事件名myList将标题和点击后的下标传递到index页面
itemMyList(e){
console.log(e.detail)
},
onLoad: function () {
},
})
