小程序使用组件实现顶部导航点击文字变色

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 () {
    
  },
})

以上是本次分享的内容，后期会带来更多的内容，希望大家多多支持关注