18842388900

网站建设 APP开发 小程序

Article/文章

记录成长点滴 分享您我感悟

您当前位置>首页?>?知识?>?软件开发

小程序自定义组件的实现方法(代码)

发表时间:2019-05-20 08:50:48

文章来源:天机报玄机图网站建设

标签:html5

分享:

浏览次数:0

本篇文章给大家带来的内容是关于小程序自定义组件的实现方法(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

2114713864-5b9b3b8856d4e_articlex.png
File:threecolgrid.js

// components/threeColumnGrid/threecolgrid.jsComponent({  /**   * 组件的属性列表   */  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, {})     }  }})
                            {{item.title}}                              暂缺货                                            可借阅                                                    
/* 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-c软件开发

<a href=http://www.sywzjs.com target=_blank class=infotextkey>天机报玄机图<a href=http://www.sywzjs.com target=_blank class=infotextkey>软件开发</a></a>,<a href=http://www.sywzjs.com target=_blank class=infotextkey>天机报玄机图<a href=http://www.sywzjs.com target=_blank class=infotextkey>软件公司</a></a>

olor: #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"  },}
                      
              

html5

相关案例查看更多