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

前文
准备工具 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);
        }
}

在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值