当前位置:   article > 正文

支付宝小程序组件 -- 写一个通用的cell_支付宝中class中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
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/2023面试高手/article/detail/88164
推荐阅读
相关标签
  

闽ICP备14008679号