制作微信小程序第四天(组件）入门完结！

原創

2020-06-16 02:25

1.自定义组件流程：创建文件夹直接右键新建

再找到要使用这个组件的文件的json，把相对路径写下

最后到wxml文件下使用就可以了（⚠️注意文件名tabs是组件的文件名称）
2.tabs组件优化
.js

// companies/tabs/Tabs.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    tabs:[
      {
        id:0,
        name:"首页",
        isActive:true
      },
      {
        id:1,
        name:"原创",
        isActive:false
      },
      {
        id:2,
        name:"分类",
        isActive:false
      },
      {
        id:3,
        name:"关于",
        isActive:false
      }
      

    ]
  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

.wxml

<view class="tabs">
<view class="tabs_title">
  <!--<view class="title_item active">首页</view>
  <view class="title_item">原创</view>
  <view class="title_item">分类</view>
  <view class="title_item">关于</view>-->
  <view wx:for="{{tabs}}"
  wx:key="id"
  class="title_item {{item.isActive?'active':''}}"
  >
  {{item.name}}
  </view>
</view>
  <view class="tabs_content">内容</view>
</view>

wxss

.tabs{}
.tabs_title{
  display:flex;
  padding:10rpx 0;
}
.title_item{
  flex:1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.active{
  color:red;
  border-bottom: 5rpx solid currentColor;
}
.tabs_content{}

3.标题选中
.js

// companies/tabs/Tabs.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    tabs:[
      {
        id:0,
        name:"首页",
        isActive:true
      },
      {
        id:1,
        name:"原创",
        isActive:false
      },
      {
        id:2,
        name:"分类",
        isActive:false
      },
      {
        id:3,
        name:"关于",
        isActive:false
      }
      

    ]
  },

  /**
   * 组件的方法列表
   */
  methods: {
    hanldeItemTap(e){
      const {index}=e.currentTarget.dataset;
      let {tabs}=this.data;
      tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
      this.setData({
        tabs
      })
    }
  }
})

.wxml

.tabs{}
.tabs_title{
  display:flex;
  padding:10rpx 0;
}
.title_item{
  flex:1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.active{
  color:red;
  border-bottom: 5rpx solid currentColor;
}
.tabs_content{}

.wxss

.tabs{}
.tabs_title{
  display:flex;
  padding:10rpx 0;
}
.title_item{
  flex:1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.active{
  color:red;
  border-bottom: 5rpx solid currentColor;
}
.tabs_content{}