組件

時間  2020-10-01
標籤 組件 简体版
原文   原文鏈接

一：建立組件：組件也是由xml,wss,js,json四個類型文件構成：json

taps1.js
// component/taps/taps1.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
      }
    ] 
     },
  /**
   * 組件的方法列表
   * 
1:頁面.js文件中 存放時間回調函數的時候 存放在data同層級下.
2:組件.js文件中 存放事件回調函數的時候 必需要存放在methods中!!!
   */
  methods: {
    /*
     * 
     */
    hand_click(e){
      /*
1:綁定點擊事件
2:獲取被點擊的索引
3:獲取原數組
4:對數組循環
    (1):給每個循環性 選中屬性 改成 false
    (2):給 當前的索引的 項 添加激活選中效果就能夠了
*/
      //獲取索引
      const { index } = e.currentTarget.dataset
      //獲取data中的數組.
      /*
      補充：不要直接修改this.data.數據
      let tabs = JSON.parse(JSON.stringify(this.data.tabs));
      */
      let { tabs } = this.data //等價於let tabs = this.data.tabs
      //循環數組 ,注意在這裏修改數組list的值會致使原數組值的改變
      tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false)
      this.setData({
        tabs
      })
    }
  }
})
taps1.json
{
  "component": true,
  "usingComponents": {}   //用來配置組件
}
taps1.wxml
<!--component/taps/taps1.wxml-->
<view class="tabs">
<view class="tabs_title">
<view 
wx:for="{{tabs}}"
wx:key = "id"
class="title_item {{item.isActive? 'active': ''}}"
bindtap="hand_click" 
data-index="{{index}}"
> <!--bindtap綁定事件--> 
{{item.name}}
</view>
</view>
<view class="tabs_content">
內容
</view>
</view>
taps1.wxss
/* component/taps/taps1.wxss */
.tabs{
  margin-bottom: 1rpx;
}
.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_content{
  border: solid 1rpx royalblue;
}

二：應用組件的頁面：數組

comp1.jsxss

// pages/component/component.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {

  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {

  },

  /**
   * 生命週期函數--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命週期函數--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命週期函數--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命週期函數--監聽頁面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動做
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {

  }
})

jsonide

{
  "usingComponents": {"Taps":"../../component/taps/taps1"}
}

wxml函數

<!--pages/component/component.wxml-->
<Taps></Taps>

【看起來就是將一個完整的頁面封裝成一個組件,而後在json文件中加載,而且爲其以json格式作成一個標籤,供頁面直接使用】flex

 

三：父向子傳遞數據,和子向父傳遞數據：this

修改父組件(即當前顯示頁面).wxml文件spa

<!--pages/component/component.wxml-->
<!--父組件(當前頁面)向子組件傳遞數據 經過 標籤屬性的方式來傳遞
    1:在子組件中進行接收:
    2:在子組件直接使用經過標籤屬性來傳遞的值。
-->
<Taps biaoqian_value="在組件中使用"></Taps>

修改組件tabs.js文件3d

// component/taps/taps1.js
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
/*
裏面存放的是要從父組件中接收的數據
*/
biaoqian_value:{
    //要接收的數據類型
    type: String,
    value: "" //表示默認值
}
  },

  /**
   * 組件的初始數據
   */
  data: {
    tabs:[
      {
      id:0,
      name:"首頁",
      isActive:true
      },
      {
        id:1,
        name: "原創",
        isActive: false
      },
      {
        id:2,
        name: "分類",
        isActive: false
      },
      {
        id:3,
        name: "關於",
        isActive: false
      }
    ] 
     },
  /**
   * 組件的方法列表
   * 
1:頁面.js文件中 存放時間回調函數的時候 存放在data同層級下.
2:組件.js文件中 存放事件回調函數的時候 必需要存放在methods中!!!
   */
  methods: {
    /*
     * 
     */
    hand_click(e){
      /*
1:綁定點擊事件
2:獲取被點擊的索引
3:獲取原數組
4:對數組循環
    (1):給每個循環性 選中屬性 改成 false
    (2):給 當前的索引的 項 添加激活選中效果就能夠了
*/
      //獲取索引
      const { index } = e.currentTarget.dataset
      //獲取data中的數組.
      /*
      補充：不要直接修改this.data.數據
      let tabs = JSON.parse(JSON.stringify(this.data.tabs));
      */
      let { tabs } = this.data //等價於let tabs = this.data.tabs
      //循環數組 ,注意在這裏修改數組list的值會致使原數組值的改變
      tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false)
      this.setData({
        tabs
      })
    }
  }
})

在子組件tabs.wxml文件中使用在頁面中經過標籤屬性傳遞過來的值code

<!--component/taps/taps1.wxml-->
<view>{{biaoqian_value}}</view><!--使用經過標籤屬性傳過來的值-->
<view class="tabs">
<view class="tabs_title">
<view 
wx:for="{{tabs}}"
wx:key = "id"
class="title_item {{item.isActive? 'active': ''}}"
bindtap="hand_click" 
data-index="{{index}}"
> <!--bindtap綁定事件--> 
{{item.name}}
</view>
</view>
<view class="tabs_content">
內容
</view>
</view>

 

在一次修改：

（1）：將原來組件中的data屬性中的tabs數組複製到父組件(頁面)中.

comp1.js

// pages/component/component.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    tabs: [
      {
        id: 0,
        name: "首頁",
        isActive: true
      },
      {
        id: 1,
        name: "原創",
        isActive: false
      },
      {
        id: 2,
        name: "分類",
        isActive: false
      },
      {
        id: 3,
        name: "關於",
        isActive: false
      }
    ] 
  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {

  },

  /**
   * 生命週期函數--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命週期函數--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命週期函數--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命週期函數--監聽頁面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動做
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {

  }
})

在修改父組件的xml文件

<!--pages/component/component.wxml-->
<!--父組件(當前頁面)向子組件傳遞數據 經過 標籤屬性的方式來傳遞
    1:在子組件中進行接收:
    2:在子組件直接使用經過標籤屬性來傳遞的值。
-->
<!--<Taps biaoqian_value="在組件中使用"></Taps>-->
<!--和上面的例子是同樣的機制-->
<Taps tabs="{{tabs}}"></Taps>

最後在組件中進行接收父組件經過標籤屬性傳遞過來的值

// component/taps/taps1.js
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
/*
裏面存放的是要從父組件中接收的數據
*/
/*
biaoqian_value:{
    //要接收的數據類型
    type: String,
    value: "" //表示默認值
}
*/
tabs:{                     【就是這個數組】
  type:Array,
  value:""
}
  },

  /**
   * 組件的初始數據
   */
  data: {
    /*
    tabs:[
      {
      id:0,
      name:"首頁",
      isActive:true
      },
      {
        id:1,
        name: "原創",
        isActive: false
      },
      {
        id:2,
        name: "分類",
        isActive: false
      },
      {
        id:3,
        name: "關於",
        isActive: false
      }
    ] 
    */
     },
  /**
   * 組件的方法列表
   * 
1:頁面.js文件中 存放時間回調函數的時候 存放在data同層級下.
2:組件.js文件中 存放事件回調函數的時候 必需要存放在methods中!!!
   */
  methods: {
    /*
     * 
     */
    hand_click(e){
      /*
1:綁定點擊事件
2:獲取被點擊的索引
3:獲取原數組
4:對數組循環
    (1):給每個循環性 選中屬性 改成 false
    (2):給 當前的索引的 項 添加激活選中效果就能夠了
*/
      //獲取索引
      const { index } = e.currentTarget.dataset
      //獲取data中的數組.
      /*
      補充：不要直接修改this.data.數據
      let tabs = JSON.parse(JSON.stringify(this.data.tabs));
      */
      let { tabs } = this.data //等價於let tabs = this.data.tabs
      //循環數組 ,注意在這裏修改數組list的值會致使原數組值的改變
      tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false)
      this.setData({
        tabs
      })
    }
  }
})
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程