使用滴滴mpx 开发一个小程序组件

yangdongnan

发布于 2019-03-28 16:10:02

1.1K0

发布于 2019-03-28 16:10:02

前文准备工具 webstorm ide npm i @mpxjs/col 小程序中组件和页面分的很明确， mpx中一样 createComponent 创建一个组件 createPage 创建一个页面下面是一个上图下文的list组件
代码块

<template>
	<view class="grids">
		<view class="grids-item"
					wx:for="{{rData}}"
					wx:for-index="index"
					wx:for-item="item"
					wx:key="index"
					bind:tap="handleGridsItem">
			<view>
				<image class="grids-icon" src="{{item.icon}}"></image>
			</view>
			<view class="grids-text">
				{{item.name}}
			</view>
		</view>
	</view>
</template>
<script>
  import { createComponent } from '@mpxjs/core'
  
  createComponent({
    mixins : [],
    properties : {  //小程序中依靠properties来传递 父组件数据 如同 vue 中 props
      rData : {
        type : Array,
        default : () => []
      }
    },
    data : {},
    computed : {},
    ready () {},
    methods : {
      handleGridsItem ( evt ) {
         this.triggerEvent('click',{evt},{})  //组件事件触发监听
      }
    }
  })
</script>
<style lang="less">
	.grids {
		display: block;
		width: 100%;
		padding-top: 12px;
	}

	.grids-item {
		display: inline-block;
		width: 25%;
		text-align: center;
		padding: 12px 0;
		margin-bottom: 8px;
	}

	.grids-icon {
		width: 24px;
		height: 24px;
		vertical-align: middle;
	}

	.grids-text {
		margin-top: 5px;
		font-size: 14px;
		font-weight: 500;
	}
</style>

<script type="application/json">
	{}
</script>

ps:有了这个组件就可以做一些事情了

效果图

附父组件监听调用

<_grids rData="{{rDataList1}}" col="{{col}}" bind:click="handleGridsItem"></_grids>
mthods:{
	 handleGridsItem(item){
        	console.log(item);
        }
}