製作微信小程序第四天(組件）入門完結！

原創

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