小程序 ----- 自定義組件（一）對(duì)組件的簡(jiǎn)單使用

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

發(fā)布人：葵宇科技

瀏覽次數(shù)：68

使用自定義組件的方式來構(gòu)建頁面，不是小程序自帶的組件

1、創(chuàng)建自定義組件

類似于頁面也是由 wxml，js，json，css 四個(gè)頁面組成，一般放在專門的文件夾中

文件內(nèi)容

2、在json 文件中引用自定義組件

3、編寫自定義組件

將標(biāo)題靈活話，通過循環(huán)方式賦值

4、實(shí)現(xiàn)點(diǎn)擊不同標(biāo)題樣式隨之改變

* 事件回調(diào)函數(shù)在頁面js 與組件js 的區(qū)別?

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

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

其中獲取data 數(shù)據(jù)中的不同寫法

 解構(gòu)對(duì)復(fù)雜類型進(jìn)行解構(gòu)時(shí)，復(fù)制一份變量引用
 let tabs = this.data.tabs; 相當(dāng)于   let {tabs} = this.data; 
 最嚴(yán)謹(jǐn)?shù)淖龇?，重新拷貝一份?shù)組，再對(duì)這個(gè)數(shù)組的備份進(jìn)行處理，不要直接修改this.data 數(shù)據(jù)
 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中

<!-- 自定義組件主要分為 標(biāo)題和內(nèi)容 -->
<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">關(guān)于</view> -->
<!-- 通過循環(huán)的方式實(shí)現(xiàn) 
wx:for ="{{數(shù)組名}}" 
wx:key ="id關(guān)鍵字" 
//判斷是否為真
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">內(nèi)容</view>
</view>

wxss 中

/* 設(shè)置組件樣式
  display: flex;  變成伸縮盒子
  justify-content: center; 文字水平對(duì)齊
  align-items: center;  垂直對(duì)齊
  border-bottom: 10rpx solid currentColor;  文字下劃線
  flex 讓所有彈性盒模型對(duì)象的子元素都有相同的長(zhǎng)度，并且忽略其內(nèi)部的內(nèi)容
*/
.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({

  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {
    tabs :[
      {
        id : 0,
        name : "首頁",
        isActive : true
      },
      {
        id : 1,
        name : "分類",
        isActive : false
      },
      {
        id : 2,
        name : "本地",
        isActive : false
      },
      {
        id : 3,
        name : "關(guān)于",
        isActive : false
      }

    ]

  },

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

  methods: {
    /*
     實(shí)現(xiàn)點(diǎn)擊標(biāo)題樣式改變
     1、在methods 中綁定點(diǎn)擊時(shí)間
     2、獲取被點(diǎn)擊標(biāo)題的索引
     3、獲取原數(shù)組
     4、對(duì)數(shù)組循環(huán)，給每一個(gè)循環(huán)性選中屬性改為false,將當(dāng)前索引項(xiàng)改為true
    
    */

    hanldeItemTap(e){
      //  console.log(e);   通過打印獲取index 得知 dataset 含有index
      //獲取索引
      const {index} = e.currentTarget.dataset;
      //獲取data 中數(shù)組
      /*
      解構(gòu)對(duì)復(fù)雜類型進(jìn)行解構(gòu)時(shí)，復(fù)制一份變量引用
      let tabs = this.data.tabs; 相當(dāng)于   let {tabs} = this.data; 
    最嚴(yán)謹(jǐn)?shù)淖龇?，重新拷貝一份?shù)組，再對(duì)這個(gè)數(shù)組的備份進(jìn)行處理，不要直接修改this.data 數(shù)據(jù)
    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;
      //循環(huán)數(shù)組 [].forEach遍歷數(shù)組時(shí)修改 v 也會(huì)修改源數(shù)組
      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ù)組
      /*
      解構(gòu)對(duì)復(fù)雜類型進(jìn)行解構(gòu)時(shí)，復(fù)制一份變量引用
      let tabs = this.data.tabs; 相當(dāng)于   let {tabs} = this.data; 
    最嚴(yán)謹(jǐn)?shù)淖龇?，重新拷貝一份?shù)組，再對(duì)這個(gè)數(shù)組的備份進(jìn)行處理，不要直接修改this.data 數(shù)據(jù)
    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;
      //循環(huán)數(shù)組 [].forEach遍歷數(shù)組時(shí)修改 v 也會(huì)修改源數(shù)組
      atabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
      //把值重新丟回去
      this.setData({
        atabs
      })
        
    }
  }
})