支付宝小程序组件 -- 写一个通用的cell

最新推荐文章于 2025-01-27 14:38:11 发布

yangdongnan

最新推荐文章于 2025-01-27 14:38:11 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：小程序文章标签：支付宝小程序组件

本文链接：https://blog.youkuaiyun.com/weixin_38644883/article/details/85338852

小程序专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个通用的支付宝小程序单元格组件实现方法，通过详细示例代码展示了如何在页面中使用该组件，并响应点击事件。组件具备高度的灵活性和可复用性，适用于多种场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果

在这里插入图片描述

//page 页面中代码

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

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

代码链接 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>