小程序之自定義組件 ---- 列表goodsList

教程請查看小程序開發文檔：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

 

自定義組件：自定義組件可以將不同頁面具有共同樣式的布局獨立開來，減少代碼的重復冗余，也能更好的維護組件。

例：自定義彈框，自定義加載，自定義列表等等，自定義彈框網上教程很多，此處就講講自定義列表，原理大同小異，細節需要多加注意。

 

最終效果：

 

1.建立component文件夾，專門存放自定義組件  如：goodsList 自定義組件

 

2，編寫自定義組件基本樣式，即列表中的一個item

goodsList.wxml

<!--component/goodsList/goodsList.wxml-->
<view class='list-group'>
  <view class='list-left'>
    <image src='/pages/images/goods.png' class='img' mode="widthFix"></image>
  </view>
  <view class='list-right'>
    <view class='title'>{{title}}</view>
    <view class='desc'>{{desc}}</view>
    <view class='price-box'>
      <text class='price'>{{price}}</text>
      <text class='num'>x{{num}}</text>
    </view>
    <view class='illustrate'>
      <text>支持7天無理由退貨</text>
      <a class='more'>價格說明</a>
    </view>
  </view>
</view>

 

goodsList.wxss  此處使用 :host選擇器，：host選擇器主要作用於組件整體，不針對組件內部樣式。需要注意的是：組件本身不是block,需要先設置為block后，相應的樣式才會生效。

其他選擇器：（建議使用class選擇器）

#a { } /* 在組件中不能使用 */ [a] { } /* 在組件中不能使用 */ button { } /* 在組件中不能使用 */ .a > .b { } /* 除非 .a 是 view 組件節點，否則不一定會生效 */

 

/* component/goodsList/goodsList.wxss */
:host{
  display: block;
  border-bottom: 1px solid #e0e0e0;
}
.list-group{
  display: flex;
  padding:5px 10px;
}
 .img{
   width:100%;
} 
.list-left{
  flex:0 0 100px;
}
.list-right{
  flex:1;
}
.title{
  font-size:16px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2; 
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
}
.desc{
  font-size:14px;
  color:#7a7a7a;
  margin-top:5px;
}
.price-box{
  margin-top:5px;
}
.price{
  font-size:14px;
  color:red;
}
.num{
  font-size:14px;
  float: right;
}
.illustrate{
  font-size:14px;
  margin-top:5px;
  color:#7a7a7a;
}
.more{
  float: right;
  color:rgb(67,197,230);
}

 

goodsList.js

// component/goodsList/goodsList.js
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    title: {            // 屬性名
      type: String,     // 類型（必填），目前接受的類型包括：String, Number, Boolean, Object, Array, null（表示任意類型）
      value: '標題'     // 屬性初始值（可選），如果未指定則會根據類型選擇一個
    },
    desc: {
      type: String,
      value: '描述'
    },
    price: {
      type: String,
      value: '價格'
    },
    num: {
      type: Number,
      value: 2
    }
  },

  /**
   * 組件的初始數據
   */
  data: {

  },

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

  }
})

 

goosList.josn  ( 必須啟用，否則自定義組件不能被識別 )

{
  "component": true,
  "usingComponents": {}
}

 

3，在index中引入自定義組件

index.wxml  

<!--goodsList自定義組件引用  -->
<goodsList id="goodsList"  wx:for="{{goodsArray}}" wx:key="unique"
  title="{{item.title}}"
  desc="{{item.desc}}"
  price="{{item.price}}"
  num="{{item.num}}">
</goodsList>

index.js 

Page({
  data: {
    goodsArray: [
      {
        title: '顏域蝴蝶結荷葉領雪紡連衣裙女夏時尚高端斑點裙子2018年新款熱銷',
        desc: '黑點 M碼',
        price: '￥999.0',
        num: '2'
      },
      {
        title: '顏域蝴蝶結荷葉領雪紡連衣裙女夏時尚高端斑點裙子2018年新款熱銷',
        desc: '黑點 M碼',
        price: '￥999.0',
        num: '2'
      },
      {
        title: '顏域蝴蝶結荷葉領雪紡連衣裙女夏時尚高端斑點裙子2018年新款熱銷',
        desc: '黑點 M碼',
        price: '￥999.0',
        num: '2'
      },
      {
        title: '顏域蝴蝶結荷葉領雪紡連衣裙女夏時尚高端斑點裙子2018年新款熱銷',
        desc: '黑點 M碼',
        price: '￥999.0',
        num: '2'
      },
      {
        title: '顏域蝴蝶結荷葉領雪紡連衣裙女夏時尚高端斑點裙子2018年新款熱銷',
        desc: '黑點 M碼',
        price: '￥999.0',
        num: '2'
      }
    ]
  },
  canvasIdErrorCallback: function (e) {
    console.error(e.detail.errMsg)
  },
  onReady: function (e) {
    this.goodsList = this.selectComponent("#goodsList");
  }
})

index.json ( 必須引入自定義組件，否則無法使用 )

 

{
  "usingComponents": {
    "goodsList": "/component/goodsList/goodsList"
  }
}

 

 

 

以上，一個自定義列表組件基本完成，還有一些事件處理，類似於vue中的事件派發，官網教程示例：

按照個人理解，此處的事件類似於vue中，子組件向父組件派發事件，父組件監聽事件，然后進行事件處理並執行。

Component({
  properties: {}
  methods: {
    onTap: function(){
      var myEventDetail = {} // detail對象，提供給事件監聽函數
      var myEventOption = {} // 觸發事件的選項
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    }
  }
})

　

具體示例可以查看 https://www.jianshu.com/p/8a2a730d9e60，實現自定義彈框組件。

效果如圖：