支付宝小程序组件 -- 写一个通用的cell_支付宝中class中cell是什么

实现效果

//page 页面中代码

// xx.axml
<view>
 <uic-cell title="手机号" label="详情"  isLink="{{true}}" onClick="onClick">内容</uic-cell>
</view>
// xx.js
Page({
  onClick(data){ //单元格点击事件响应
    console.log(data,'124')
  },
});
1
2
3
4
5
6
7
8
9
10

一个可以通用的支付宝小程序-单元格组件

代码链接 https://github.com/nan1010082085/ant-compoent

讲述一下支付宝小程序响应 页面的事件

//组件中 事件点击
<view class="uic-cell" id="{{title}}" onTap="handleClick"></view>
Component({
  props: {
    onClick:(data)=>{return data }  //有点击事件传递过来 则 ruturn 传递的data
  },
  methods: { //响应组件中时间点击的方法 必须在 methods中
   handleClick(evt){
     this.props.onClick(evt);  //传递 props 中暴露的 方法 
   }
  },
});

//页面中 使用组件props 暴露出的参数
<uic-cell title="手机" label="詳情" onClick="onClick">内容</uic-cell>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15