精品无码国产污污污免费,日韩精品无码免费专区午夜,一级黄色免费毛片

導讀微信小程序，簡稱小程序，英文名Mini Program，是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用，也是一...

微信小程序，簡稱小程序，英文名Mini Program，是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用，也是一項門檻非常高的創新，經過將近兩年的發展，已經構造了新的小程序開發環境和開發者生態。

本篇文章給大家帶來的內容是關于小程序自定義組件的實現方法（代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

File：threecolgrid.js

// components/threeColumnGrid/threecolgrid.js
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    // 傳入的數據
    booksData:{
      type: Array,
      value:[]
    },
    // grid的外邊距
    mainMargin:{
      type: Number,
      value: 5
    },
    // grid的內邊距
    mainPadding:{
      type:Number,
      value:10
    },
    // 行間距
    rowSpace:{
      type:Number,
      value:20
    },
    // 列間距
    colSpace:{
      type:Number,
      value:7
    }
  },

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

  },

  /**
   * 組件的方法列表
   */
  methods: {
    checkIn:function(e){
      console.log(e.currentTarget.dataset)
      // 觸發action事件，triggerEvent函數接受三個值：事件名稱、數據、選項值  
      this.triggerEvent('action', e.currentTarget.dataset, {}) 
    }
  }
})

<!--components/threeColumnGrid/threecolgrid.wxml-->
<!-- <view class='main-content'> -->
  <view class='bookbox' style='padding:{{mainPadding}}rpx;margin:{{mainMargin}}rpx;'>
    <block wx:for="{{booksData}}" wx:key="{{item.id}}">
      <view class='bookinfo' style='margin-bottom: {{rowSpace}}rpx;'>
        <image src='{{item.url}}' mode="widthFix" style='width:{{(740 - 2*mainPadding - 2*mainMargin)/3 - colSpace*3}}rpx;'></image>
        <view class="title" style='width:{{(740 - 2*mainPadding - 2*mainMargin)/3 - colSpace*3}}rpx;'>{{item.title}}</view>
        <view class='actionBar' style='width:{{(740 - 2*mainPadding - 2*mainMargin)/3 - colSpace*3}}rpx;'>
          <block wx:if="{{item.status == 0}}">
            <view class='bookstatus disable'>暫缺貨</view>
            <view bindtap='checkIn' data-bookid='{{item.id}}' data-status='{{item.status}}' class='iconfont icon-219-heart icon'></view>
          </block>
          <block wx:else>
            <view class='bookstatus enable'>可借閱</view>
            <view bindtap='checkIn' data-bookid='{{item.id}}' data-status='{{item.status}}' class='iconfont icon-059-cart icon'></view>
          </block>          
        </view>
      </view>
    </block>
  </view>
<!-- </view> -->

/* components/threeColumnGrid/threecolgrid.wxss */
@import "../../iconfont.wxss";
/* .main-content{
  background: #FFF;
  margin-top: 155rpx;
  padding:10rpx;
} */

.bookbox{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap:wrap;
  background: #FFF;
}
.bookbox .bookinfo{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* border: 1rpx solid #f5a32d; */
}
.bookbox .bookinfo image{
  display: flex;
  /* 調節圖書列 */
  /* width:220rpx;  */
  border-top-left-radius: 10rpx;
  border-top-right-radius: 10rpx
}
.bookbox .bookinfo .title{
  display: flex;
  flex-wrap: wrap;
  font-size: small;
  margin-bottom: 5rpx;
  /* 調節圖書列 */
  /* width:300rpx; */
  /* width:220rpx; */
  height: 70rpx;
}
.bookbox .bookinfo .actionBar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0rpx 5rpx 5rpx 5rpx;
  font-size: smaller;
  /* width:200rpx; */
}

.bookbox .bookinfo .actionBar .bookstatus{
  display: flex;
  border-radius: 10rpx;
  padding:0rpx 5rpx;
}

.bookbox .bookinfo .actionBar .enable{
  color: #FFF;
  background-color: #f5a32d;
}

.bookbox .bookinfo .actionBar .disable{
  color: #FFF;
  background-color: #727171;
}

.bookbox .bookinfo .actionBar .icon{
  font-size: 15pt;
  color: #facea7;
}

.bookinfo-empty{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5rpx;
  width:230rpx;
}

使用組件

  //事件處理函數
  getCheckValues: function(e){
    console.log('checkbox發生change事件，攜帶value值為：', e.detail)
  },

{

  "usingComponents": {
    "three-col-grid":"/components/threeColumnGrid/threecolgrid"
  },

}

  <view class='test'>
    <three-col-grid booksData="{{BookList}}" bind:action="getCheckValues"></three-col-grid>
  </view>

.test{
  display: flex;
  justify-content: center;
  /* border: 1rpx #444 solid; */
}

當前位置:雨林木風下載站 > 應用軟件教程 > 詳細頁面

小程序自定義組件的完成方法（代碼）

本類教程下載

系統下載排行