小程序 ----- 自定義組件（一）對組件的(de)簡單使用

發表時(shí)間：2021-1-5

發布人(rén)：融晨科技

浏覽次數：68

使用自定義組件的(de)方式來(lái)構建頁面，不(bù)是(shì)小程序自帶的(de)組件

1、創建自定義組件

類似于(yú)頁面也(yě)是(shì)由 wxml，js，json，css 四個(gè)頁面組成，一般放在(zài)專門的(de)文件夾中

文件内容

2、在(zài)json 文件中引用自定義組件

3、編寫自定義組件

将标題靈活話，通過循環方式賦值

4、實現點擊不(bù)同标題樣式随之(zhī)改變

* 事件回調函數在(zài) 頁面js 與組件js 的(de)區别?

* 1、頁面 .js 文件中存放事件回調函數的(de)時(shí)候存放data 同級下！！

* 2、組件 .js 文件中存放事件回調函數的(de)時(shí)候必須放在(zài)methods(組件方法列表)

其中獲取data 數據中的(de)不(bù)同寫法

 解構對複雜類型進行解構時(shí)，複制一份變量引用
 let tabs = this.data.tabs; 相當于(yú)   let {tabs} = this.data; 
 最嚴謹的(de)做法，重新拷貝一份數組，再對這(zhè)個(gè)數組的(de)備份進行處理，不(bù)要(yào / yāo)直接修改this.data 數據
 let tabs = JSON.parse(JSON.stringify(this.data.tabs));
     
      //let tabs = JSON.parse(JSON.stringify(this.data.tabs));
      let {tabs} = this.data;
      //let tabs = this.data.tabs;

自定義組件小小代碼：

wxml中

<!-- 自定義組件主要(yào / yāo)分爲(wéi / wèi) 标題和(hé / huò)内容 -->
<view class="tabs">
  <view class="tabs_title">
    <!-- <view class="title_item active" >首頁</view>
    <view class="title_item">分類</view>
    <view class="title_item">本地(dì / de)</view>
    <view class="title_item">關于(yú)</view> -->
<!-- 通過循環的(de)方式實現 
wx:for ="{{數組名}}" 
wx:key ="id關鍵字" 
//判斷是(shì)否爲(wéi / wèi)真
class="title_item {{item.isActive?'active':'true'}}"
-->
<view wx:for ="{{tabs}}" wx:key ="id" 
  class="title_item {{item.isActive?'active':'true'}}"
  bindtap="hanldeItemTap"
  data-index ="{{index}}"
>
{{item.name}}

</view>

  </view>
<view class="tabs_conent">内容</view>
</view>

wxss 中

/* 設置組件樣式
  display: flex;  變成伸縮盒子(zǐ)
  justify-content: center; 文字水平對齊
  align-items: center;  垂直對齊
  border-bottom: 10rpx solid currentColor;  文字下劃線
  flex 讓所有彈性盒模型對象的(de)子(zǐ)元素都有相同的(de)長度，并且忽略其内部的(de)内容
*/
.tabs{}
.tabs_title{
  
  display: flex;
  padding: 10rpx;
}
.title_item{
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.active{
  color: red;
  border-bottom: 10rpx solid currentColor;
}
.tabs_conent{}

js 中

// component/Tabs/Tabs.js
Component({

  /**
   * 組件的(de)初始數據
   */
  data: {
    tabs :[
      {
        id : 0,
        name : "首頁",
        isActive : true
      },
      {
        id : 1,
        name : "分類",
        isActive : false
      },
      {
        id : 2,
        name : "本地(dì / de)",
        isActive : false
      },
      {
        id : 3,
        name : "關于(yú)",
        isActive : false
      }

    ]

  },

  /**
   * 存放事件回調函數 頁面js 與組件js 的(de)區别?
   *  1、頁面 .js 文件中存放事件回調函數的(de)時(shí)候存放data 同級下！！
   *  2、組件 .js 文件中存放事件回調函數的(de)時(shí)候必須放在(zài)methods(組件方法列表)
   */

  methods: {
    /*
     實現點擊标題樣式改變
     1、在(zài)methods 中綁定點擊時(shí)間
     2、獲取被點擊标題的(de)索引
     3、獲取原數組
     4、對數組循環，給每一個(gè)循環性選中屬性改爲(wéi / wèi)false,将當前索引項改爲(wéi / wèi)true
    
    */

    hanldeItemTap(e){
      //  console.log(e);   通過打印獲取index 得知 dataset 含有index
      //獲取索引
      const {index} = e.currentTarget.dataset;
      //獲取data 中數組
      /*
      解構對複雜類型進行解構時(shí)，複制一份變量引用
      let tabs = this.data.tabs; 相當于(yú)   let {tabs} = this.data; 
    最嚴謹的(de)做法，重新拷貝一份數組，再對這(zhè)個(gè)數組的(de)備份進行處理，不(bù)要(yào / yāo)直接修改this.data 數據
    let tabs = JSON.parse(JSON.stringify(this.data.tabs));
      */
      //let tabs = JSON.parse(JSON.stringify(this.data.tabs));
      let {tabs} = this.data;
      //let tabs = this.data.tabs;
      //循環數組 [].forEach遍曆數組時(shí)修改 v 也(yě)會修改源數組
      tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
      //把值重新丢回去
      this.setData({
        tabs
      })
        
    },

    ahanldeItemTap(e){
      //  console.log(e);   通過打印獲取index 得知 dataset 含有index
      //獲取索引
      const {index} = e.currentTarget.dataset;
      //獲取data 中數組
      /*
      解構對複雜類型進行解構時(shí)，複制一份變量引用
      let tabs = this.data.tabs; 相當于(yú)   let {tabs} = this.data; 
    最嚴謹的(de)做法，重新拷貝一份數組，再對這(zhè)個(gè)數組的(de)備份進行處理，不(bù)要(yào / yāo)直接修改this.data 數據
    let tabs = JSON.parse(JSON.stringify(this.data.tabs));
      */
      //let tabs = JSON.parse(JSON.stringify(this.data.tabs));
      let {atabs} = this.data;
      //let tabs = this.data.tabs;
      //循環數組 [].forEach遍曆數組時(shí)修改 v 也(yě)會修改源數組
      atabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
      //把值重新丢回去
      this.setData({
        atabs
      })
        
    }
  }
})