ant-design/ant-design-mini

Ant Design for Alipay Mini Program

   

$ npm i antd-mini -S

antd-mini 是支付宝小程序 UI 组件库，遵循 Ant Design 规范。你可以扫描下方的支付宝二维码体验，或者访问官网以获取更多信息。

如果你发现了 bug 或者是希望 antd-mini 增加一些特性，可以提交 issue。也欢迎参与共建，这里有一份贡献指南。

如果你想深入参与讨论，可以加入我们的社区钉钉群：62730003177

ant-design-mini's Issues

请问该小程序支持钉钉小程序吗？

背景

请问该小程序支持钉钉小程序吗？

期望

思路

没有日历组件么？

背景

没有日历组件么？

期望

开发日历组件

思路

DatePicker 时间选择器,能选择60分60秒吗？

组件

DatePicker

看了一下源码，是设计成这样的

基础库版本

• 2.7.19

设备机型

小程序开发者工具以及OPPO R17预览以及真机调试皆有

手机系统

• Android

APP

支付宝小程序

组件库版本

0.0.20

预期行为

正常情况应该是选择0分0秒至59分59秒，但是现在确可以选择60分60秒

复现步骤

1. 设置precision属性为second
2. 在弹出的选框中即可复现

复现 demo

Popup 弹出层

背景

弹窗的高度不能随着内部的内容数量大小改变

期望

不单单只能在样式层修改高度样式，也可以通过内部盒子的高度动态改变

思路

什么时候会有日历组件？

背景

时间选择

期望

类似于antd 的Calendar组件

思路

后期是否会支持微信小程序

背景

目前使用remaxjs，主要搭配vant 组件库开发微信小程序，请问ant-design-mini未来考虑支持微信小程序么？

期望

目前使用remaxjs，主要搭配vant 组件库开发微信小程序，请问ant-design-mini未来考虑支持微信小程序么？

思路

Ali-ui中有一个mutiline的多行文本需求

背景

在开发过程中之前使用ali-ui中的mutiline进行多行文本内容输入。

期望

后期希望antd-mini中更新 ali-ui中的 mutiline组件~ 多行文本组件非常实用

思路

Selector 选择组 希望增加必须选择一项的功能

背景

Selector 选择组，已经选中一项，再点一下就没了。 也没有onTap事件可以去做限制。
试了半天各种方法也不行。

期望

期望 Selector 选择组 能有至少选择一项，不能全部勾选掉的选项。

思路

Picker组件动态加载的数据，会报错。

组件

Picker

基础库版本

• 1.x
• [ √] 2.x

设备机型

OPPO Ace2

手机系统

• iOS
• [ √] Android
• HarmonyOS

APP

支付宝小程序

组件库版本

0.0.9

预期行为

onOk应该正常回调且不报错
现在报错了
（索引）:46 TypeError: Cannot read property '1' of undefined
at Object.onChange (index.js:134)
at e.invokeMethod (af-appx.worker.min.js:6)

复现 demo

test.js
Page({ data: { runingListStr: [], }, onLoad() { setTimeout(() => { this.setData({ runingListStr: [['动态加载的选项1', '动态加载的选项2', '动态加载的选项3', '动态加载的选项4']] }) }, 1000) }, handleRuningOk() { console.log('handleRuningOk') }, });

test.axml
<view> <antd-picker cols="{{1}}" disabled="{{false}}" pickerholder="这是动态加载的" data="{{runingListStr}}" onOk="handleRuningOk"> <view slot="title">这是动态加载的</view> </antd-picker> </view>

test.json
{ "usingComponents": { "antd-picker": "antd-mini/es/Picker/index" } }

Result icon 颜色被覆盖。

组件

• Result 操作结果

基础库版本

• 1.x
• 2.x

设备机型

手机系统

• iOS
• Android
• HarmonyOS

APP

组件库版本

预期行为

复现步骤

复现 demo

RadioGroup选中图标展示过大

组件

RadioGroup

基础库版本

• 1.x
• [* ] 2.x

设备机型

手机系统

• [* ] iOS
• Android
• HarmonyOS

APP

支付宝小程序

组件库版本

0.0.20

预期行为

在0.0.10版本
选中后图标展示正常

在0.0.11版本后
选中图标展示较大

复现步骤

复现 demo

表单提交，两个submit，如何区分，data-* 获取不到

表单提交，两个submit，如何区分，data-* 获取不到
原生可以

ImageUpload，一次性上传多张图片，上传成功，但页面只显示最后一张

组件

uploader

基础库版本

'2.7.21'

• 1.x
• 2.x

设备机型

手机系统

• iOS
• Android
• HarmonyOS

APP

组件库版本

‘0.0.19’

预期行为

一次性上传多张，多张上传成功后，页面展示多张上传后的图片组

复现步骤

1. axml添加onBeforeUpload函数，一次性上传多张，多张上传成功后，页面只展示最后一张上传的图片

复现 demo

【Picker 选择器】点击蒙层关闭选择器

背景

Picker 选择器，只能点击【取消】关闭

期望

【Picker 选择器】点击蒙层关闭选择器，同时能否增加点击蒙层的事件

Popover Popover增加event获取dataset

Popover Popover 通过event能拿到自定义组件dataset属性

Filter 筛选卡不支持默认初始值

背景

我们希望Filter 默认值为items的第一个，好像给value赋值，没有效果，面板中是选中的，但是界面显示的依然是placeholder.

期望

希望添加一个 defaultValue的选项

思路

List-item 列表渲染及 From 表单问题

背景

1、List-item 在 Component2 【开启】的状态下，往数组中添加新数据会出现页面渲染失败问题。
2、From 表单在 Component2 【未开启】的状态下，会出现name绑定属性中的属性找不到。

期望

List-item 能追加新数据，并且不会出现页面渲染失败问题

思路

formStore.validateAll 校验信息清空问题

• 具体现象：触发表单校验后，两个必填字段未填，填写其中一个值后，通过 form.setFieldsValue 给另一个值赋值时，通过setFieldsValue 改变的值对应的 FormItem 不会清空已有错误信息。

• 引起原因：
  

  ant-design-mini/src/_util/formStore.ts

  Lines 175 to 177 in f510d62

  	if (!errors) {
  	return resolve(true);
  	}

• 临时解决方案：通过 ref 找到对应的 FormItem，手动调一遍 updateErrorInfo('')

• 期望：

方案1：在validateAll中，当没有errors时，保证该代码始终执行

ant-design-mini/src/_util/formStore.ts

Line 187 in f510d62

this.formTree[form][field]?.updateErrorInfo(null);

方案2：这里如果为了普通场景的表单校验执行效率的话，可以在Form中暴露出来一个字段校验函数，供使用者手动调用

validateFields: (nameList?: string[]) => Promise

Form表单设置字段值

背景

一个选择框，只要选择框的值一发生改变就清空其他的form-item的值，调用方法setFieldsValue方法进行重置之后会,如果传的有空值就会触发必填项的表单验证

期望

设置空值之后不会触发必填项的验证

思路

可以的话注释掉修改字段值之后不需要进行验证，但是需要考虑到重置掉值之后如何清除掉所涉及字段之前的验证

钉钉小程序使用uploader组件

组件

uploader

基础库版本

1.25.7

• 1.x
• 2.x

设备机型

iPhone12

手机系统

iOS

• iOS
• Android
• HarmonyOS

APP

组件库版本

预期行为

上传图片

复现步骤

1. uploader图片时候 点击submit报错

复现 demo

antd tabs + picker 导致fixed布局失效

组件

tabs + picker

基础库版本

• 1.x
• 2.x

设备机型

手机系统

• iOS
• Android
• HarmonyOS

APP

钉钉小程序

组件库版本

0.0.18

预期行为

picker弹窗在页面最上级

复现步骤

1. 创建tabs 和tab-content
2. tab-content中创建picker
3. 打开picker可复现

复现 demo

目前已自行解决，transform删除，位移改用position:relative; left进行修改位置

tabs组件change事件问题

背景

页面中有多个tabs组件，onchange事件只返回index，现在没法确定是改变了哪个tabs

期望

支持event参数

思路

使可以将tabs标签上的自定义值在datset中出现

小程序form表单demo复制运行报错

组件

Form

基础库版本

0.0.22

• 1.x
• 2.x

设备机型

手机系统

MacOs

APP

组件库版本

0.0.22

预期行为

复现步骤

复现 demo

有支持从一个区域拖到另外一个区域的组件吗

背景

比如我想选中某个功能块拖到另外一个区域加入。这样的场景

期望

有支持从一个区域拖到另外一个区域的组件吗

思路

popup组件及继承者Modal 把右上角关闭按钮的大小透出吧

背景

popup组件的源代码，关闭按钮部分，默认写成了x-small：

 <view class="amd-popup-close-container" a:if="{{showCloseIcon}}">
    <icon type="CloseOutline" size="x-small" onTap="onClose"/>
  </view>

期望

popup组件的关闭按钮，默认写成了x-small，这个属性放开可配轩吧。同样，Modal也是。
这个默认的尺寸有点小，不太好点击。

思路

loading 组件不能在钉钉小程序中使用

组件

loading

基础库版本

• 1.x
• [ x] 2.x

设备机型

iphone12
pc 环境为 m1max芯片 mac studio

手机系统

• [x ] iOS
• Android
• HarmonyOS

APP

钉钉企业内部小程序

组件库版本

0.0.8

预期行为

显示loading

复现步骤

1. json文件 引入组件

2. 在axml文件中引入

3. 报错
   

4. 控制台报警
   af-appx.worker.min.js:26 $sjs_color.$sjs_startsWith is not a function
   Please check your axml:
   in /node_modules/antd-mini/es/Loading/index
   in view
   in pages/index/index

复现 demo

cg-demo.zip

popup 组件支持内容a:show而不是a:if

背景

popup 弹窗内容是一个无线滚动列表，当滚动了100+条数据后，点击关闭后，页面直接卡死，过一会才会正常交互。

期望 & 思路

目前想到的办法是，将 a:if 改成 a:show 问题是可以解决的，希望组件能支持。当然，如果有更好的办法也可以哈～

处于禁用状态的组件，点击能有事件暴露

背景

checkbox或者按钮等组件，处于被禁用的状态时，想做Toast提示用户为什么当前操作后，按钮被禁用了

期望

期望可以disabled状态的按钮或各种组件，点击之后有事件暴露

form组件报错

背景

form组件报错，组件正常显示，输入也会报错，onValuesChange触发不了

期望

思路

List组件优化，ListItem的左侧图片支持本地加载

背景

渲染List列表的时候需要显示左侧的图片，目前仅支持icon图标，http格式的图片，不支持https和本地资源的图片

期望

希望能支持本地图片以及https格式的图片

思路

问题大致出在这个位置，因为这里就只进行了http的判断，其余的都默认为icon图标，所以在页面上渲染的时候会把本地资源或者https的图片当做icon来进行渲染，解决方法就是单独判断传进来的img是否是icon图标，如果是就进行渲染icon图标，如果不是就直接渲染为正常图片即可，至于https格式的图片需要注意一下

tabbar图片模式下active问题

组件

TabBar

基础库版本

• 1.x
• 2.x

设备机型

手机系统

• iOS
• Android
• HarmonyOS

APP

组件库版本

antd-mini 0.0.20

预期行为

icon 为图片，一张是没选中的，一张是选中状态的，不管怎么切换始终是选中状态的图片，预期是切换不同的tab能显示两种状态的图片

复现步骤

复现 demo

Collapse 折叠面板-代码示例的受控模式点击【随机展开一项】无任何效果

组件

基础库版本

• 1.x
• [* ] 2.x

设备机型

手机系统

• [* ] iOS
• Android
• HarmonyOS

组件库版本

0.0.20

预期行为

复现步骤

复现 demo

Collapse 折叠面板-代码示例的受控模式点击【随机展开一项】无任何效果

可不可以在事件Closures自定义传值

如题，一般组件的事件函数是 (value)=>{}
当遇到

   <view a:for = {{someArr}} >
            <SomeCompon          onChange="handleArr" />
   </view>

    Page({
         data:{someArr:[{id:0,value:0},{id:1,value:0}]},
         handleArr(data){
                //Todo 如何根据点击的id的value变为data？
          }
    })

可不可以事件函数修改为

(value,data) => {}

其中data 为 axml 中 data-index 或data - id等赋值为

 {id:123,index:321}

Originally posted by @eyouhi in https://github.com/ant-design/ant-design-mini/discussions/169

弹窗滑动穿透

组件

基础库版本

• 1.x
• 2.x

设备机型

手机系统

• iOS
• Android
• HarmonyOS

APP

组件库版本

预期行为

复现步骤

复现 demo

为什么sketch组件里面有Guided Tour ，前端组件里面却没有？

背景

为什么sketch组件里面有Guided Tour ，前端组件里面却没有？

期望

新增Guided Tour 的前端组件

思路

Picker 选择器 可以增加蒙版点击关闭扩展吗

背景

Picker 选择器 弹出选项后只能点取消才能关闭，点击蒙版不会关闭，用户体验上比较差

期望

希望可以提供一个点击蒙版关闭的扩展，和popup弹出类似

思路

Selector组件的value值只能取1到n(n为items的length)无法设为任意的string值(会失去选中效果及可能的其它效果)

组件

基础库版本

• 1.x
• 2.x

设备机型

手机系统

• iOS
• Android
• HarmonyOS

APP

组件库版本

预期行为

复现步骤

复现 demo

axml://<selector title="单选" value="1" items="{{items1}}"//>
js:Page({
data: {
items1: [
{ text: '选项一', value: '1' },
{ text: '选项二', value: '2' },
{ text: '选项三', value: '3' }]
}
});
json:{
"defaultTitle": "Selector",
"usingComponents": {
"selector": "antd-mini-rpx/es/Selector/index",
}
}
如果将js改为:
Page({
data: {
items1: [
{ text: '选项一', value: '11' },
{ text: '选项二', value: '12' },
{ text: '选项三', value: '13' }]
}
});
axml改为//<selector title="单选" value="12" items="{{items1}}"//>
预期第二个选择项被选中，实际没有选择项被选中

Input-item 、 Picker 等涉及表单组件希望能提供event参数获取

背景

input函数需要传入额外参数时无法获取

期望

event中含有data-数据

思路

Stepper 步进器

Stepper 步进器 输入值，onchange事件不触发，获取不到输入的值

list-item组件 extraBrief参数判断不严谨

list-item组件 extraBrief参数判断不严谨
当传进去是数字0的时候会被判断为false。应该兼容数字类型。
extra也是同样的问题

container headerRight slot 无效

右部内容

不好意思一直上传不了图片，示例代码直接贴上去不显示右部内容，控制台 DOM 也为空。

Tabs标签页中的TabItem的属性tab，类型中有badge?: number;，但是没有任何效果

背景

Tabs标签页中的TabItem的属性tab，类型中有badge?: number;，但是没有任何效果

期望

希望能有徽标功能

思路

图片上传bug

index.js文件下的44行
chooseImageRes.tempFiles.map应该为chooseImageRes.tempFilePaths.map

vtabs组件左侧tab滑动至底部以后切换不生效

组件

Vtabs

基础库版本

• 1.x
• [ √ ] 2.x

设备机型

手机系统

• [√ ] iOS
• Android
• HarmonyOS

APP

组件库版本

预期行为

选中后不自动切换回原来的选项

复现步骤

复现 demo

希望增加单选项的filter 筛选卡

背景

有时候只有一个选项，并且不想强烈的将各个选项展示，所以用filter好一些。

期望

希望有单选项的Filter，即左边是描述文字，右边是选项。

为什么想用Filter？ 因为普通的单选项太傻了，不能定义text和value。 比如原生的my.optionsSelect。
而且，私以为全屏弹出个选项上下滑选某一个类型，这种交互是小屏时代的产物。一点也不酷。

思路

checkbox-group 不能在钉钉小程序中引入

组件

checkbox-group

基础库版本

0.0.8

• 1.x
• 2.x

设备机型

手机系统

iphone12

• [ ✅] iOS
• Android
• HarmonyOS

APP

组件库版本

0.0.8

预期行为

Error: Tried to merge two objects with the same key: value. This conflict is due to props of a component mixin.
at Ho (af-appx.worker.min.js:26)
at zo (af-appx.worker.min.js:26)
at r (af-appx.worker.min.js:26)
at Object./node_modules/antd-mini/es/CheckboxGroup/index (af-appx.worker.min.js:26)
at Object.getComponent (af-appx.worker.min.js:26)
at so (af-appx.worker.min.js:26)
at ei.startRender (af-appx.worker.min.js:26)
at ei.load (af-appx.worker.min.js:26)
at af-appx.worker.min.js:26
at jo (af-appx.worker.min.js:26)

复现步骤

1. 倒入组件
2. 运行报错

复现 demo

tabs 开启 hasSubTitle 后，首次切换，滚动到最前面

组件

Tabs

基础库版本

• 1.x
• 2.x

设备机型

手机系统

• iOS
• Android
• HarmonyOS

APP

组件库版本

预期行为

复现步骤

• https://opendocs.alipay.com/examples/5f90466f-0f1a-42bc-a68c-86a7e3bdcca1

1. 修改 page data 中 typeHasSubTitle 为 true
2. 点击切换不在当前页的选项
3. 自动回到最左边

复现 demo

期望List组件增加loadMore相关功能

背景

从mini-antui转到ant-design-mini ；发现原mini-antui列表原先有配合的加载效果功能，ant-design-mini中没有

期望

期望List组件增加loadMore相关功能

CollapseItem和ListItem 渲染列表 追加新数据时渲染页面失败

组件

基础库版本

• 1.x
• 2.x

设备机型

手机系统

• iOS
• Android
• HarmonyOS

APP

支付宝小程序

组件库版本

0.0.18

预期行为

首次渲染数据成功,如果再像数组中追加新数据,会跳转到一个页面 "页面遇到一些小问题,建议退出小程序后重新进入"
控制台没有报错

复现步骤

1. CollapseItem或ListItem组件 使用a:for渲染数组
2. 点击加载更多,向数组中追加新数据,导致跳转页面

复现 demo

.axml

<collapse 
      className="demo-collapse" 
      uid="collapse-2" 
      accordion="{{false}}">
      <collapse-item a:for="{{testlist}}" a:key="*this"
        title="第一项" 
        uid="collapse-2" 
        name="{{index.toString()}}">
        这里是第一项的内容
      </collapse-item>
<collapse> 

.js

let test = []
Page({
data: {
    testlist:[]
  },
loadMore(){
    test.push(1,2)
    this.setData({
      testlist: test
    })
  },
})

有开发 table 的计划吗

背景

移动端展示列表类数据,list满足不了需求,是否有开发 table 类的计划呢

期望

表格,支持吸顶和横向滚动,类似原生html 中的 sticky 效果

思路