talelin / lin-ui Goto Github PK

重现步骤（可选）：
源文件少逗号会报错

期望的结果是什么？

// isSwitchTab: true 这一行代码

实际的结果是什么？

描述你希望的支持的新功能？
阿里小程序支持
钉钉小程序、支付宝小程序

你期望的 API 是怎样的？
阿里小程序和微信小程序非常接近，期望可以方便移植就好了。

1.加载进度条
2.折叠面板TreeView

** 重现步骤（可选）：**

<l-radio-group>
    <l-radio value="北方"  checked="{{true}}" /> 
    <l-radio value="南方"  checked="{{false}}" /> 
</l-radio-group>

** 期望的结果是什么？**
渲染的结果应该是 "北方" 被选中，“南方”没选中

** 实际的结果是什么？**
"北方" 和“南方”都没被选中，放在l-radio-group中 checked属性失效

** 期望的结果是什么？**
./components/tabs/index.wxss:1
.l-placement-top .l-tabs-header-line {
border-bottom:1px solid #f3f3f3;
}
这要灰色线能去掉吗？如果不能，能不能自定义自己想要的颜色？好像没找到自定义class，加了!important也不起作用

l-class 如何使用的，我觉得文档中说的不明确，然后还有优先级问题，有些样式可能需要加上!important才能生效。

期望的结果是什么？
toast轻提示，不能自定义z-index导致会被页面其它有层级的view所挡住
希望能自定义组件.container容器的z-index

重现步骤（可选）：

期望的结果是什么？
select属性不影响tag组件样式，仅用于开启bind:lintap事件，应添加组件内部变量去记录当前组件是否选中
实际的结果是什么？
添加select 选中样式生效。

之前项目的时候需要一个通告栏来通知消息,要求是能够轮播，且在字数超出一行的时候进行滚动，等滚动完成后再轮播到下一条消息，自己动手实现了一个，写了不少的代码，感觉这个需求经常遇到，但是小程序上并没有一个组件可以实现这个效果

** 描述你希望的支持的新功能？**

Grid宫格

缺点：

1. 紧凑的宫格布局

2. 图标不丰富，最好能引入阿里巴巴图标库

示例：

图标下的文字可以居中显示

** 你期望的 API 是怎样的？**
<view class=""> <text class="title"></text> <view class="list"> <view class="items" bindtap='calendartap'> <image src=""></image> <text></text> </view> </view> </view>

这里我没有分界线，最好还是有个清晰分明的分界线

card卡片

iview ui做的就可以，不过还是好像不能自己添加块状元素，view之类的

list列表

手风琴

随便截取的几张图，仅供参考。不合适可以忽略我的消息。

重现步骤（可选）：

期望的结果是什么？
先在StatusShow组件中触发了一次onBtn事件，又在button里触发了一次事件
实际的结果是什么？
只触发一次事件

重现步骤（可选）：
lin-UI中，“操作反馈”→“消息提示”，点击“成功提示”、“错误提示”等带图标的提示

期望的结果是什么？
图标与消息同时从上方弹出，同时收回

实际的结果是什么？
图标与消息同时从上方弹出，收回时图标直接消失，文字居中收回

背景：我们是卖船票的，船票有余票数的概念。原型如下：

描述你希望的支持的新功能？

1. 新增disable属性。
2. 更好的控制显示与否和元素绑定的值

你期望的 API 是怎样的？

1. 动态绑定disable属性的值为接口返回数据中的余票字段，disable=”{{!item.count}}“，为true，不可选，样式灰色。
2. 如原型图所示，Tag标签的数量是多个的，目前组件的bind:lintap 只会返回两个属性，一个是标签名称，一个是选中状态，目前我的场景是，用户点击某个区域，才会显示对应价格和配套服务，我暂时用以下方式来实现标识用户点击了哪个区域：

假数据：

js

设置data-price无效，所以只能拿到currentIndex后，date[currentIndex]找到对应的元素。这种实现方式有个问题就是，页面始终会有一个是选中的状态，不能取消选中，不知道还有没有其他更优雅方便的方法。

class="{{gridItems.length%rowNum===0 && (index-gridItems.length+3) &&(showBorder||showRowBorder) < 0? 'center-grid':''}}"
应改为
class="{{gridItems.length%rowNum===0 && (index-gridItems.length+rowNum) < 0 &&(showBorder||showRowBorder)? 'center-grid':''}}"

** 重现步骤（可选）：**
1 直接下载下来源码运行 npm run dev，将 examples 中的代码直接拷贝到项目中报错

拷贝的源码

<l-notice-bar 
    style="margin-bottom:20rpx" 
    show="{{showIcon}}" 
    bind:lintap="handleIcon" 
    type="roll" 
    front-icon-name="notification" 
    end-icon-name="close"
>我是通告栏我是通告栏我是通告栏我是通告栏我是通告栏我是通告栏</l-notice-bar>

直接报错了

Cannot read property 'width' of null;at SelectorQuery callback function
TypeError: Cannot read property 'width' of null

** 期望的结果是什么？**
设置 show={{showIcon}} ，不显示 NoticeBar , 时不报错。

因为是源码里直接拷贝的代码，showIcon 以为是控制 显示 图标的，没细想结果导致报错；还花了挺长时间找错误

** 实际的结果是什么？**

对比了下git下的dist目录和miniprogram_npm目录下的组件源码，比如说说l-dialog组件，在dist目录下，该组件控制显示隐藏是show属性，miniprogram_npm下的该组件，控制显示隐藏的是status。

** 描述你希望的支持的新功能？**

1. 希望在文档中将 Icon 全部列出来；
   场景：当我只是暂时忘记 Icon 名字的时候，希望可以直接在文档中查看，而不是打开手机，或者打开在开发者工具去寻找
2. 希望可以开放 图标库（我猜测是阿里图标库）的 地址，方便开发者自己自定义加入需要的图标

我发现少图标如 + ，只能暂时由 close 加 旋转 实现

** 你期望的 API 是怎样的？**

希望能出一个类似IOS7之前的那种滑动解锁界面的滑动条，用户点触圆块向右滑动，这种交互其实用在移动端的表单提交体验非常好，单点触的提交按钮万一在提交的瞬间想放弃提交，那会非常尴尬，但是滑动提交的话只要滑到最右时还没松手，那就依然可以划回去？

提供的API最好包括：1、滑动条里的提示文字；2、滑动条的宽高、是否垂直/水平；3、滑动中的事件钩子、滑动完成松手后的事件钩子

描述你希望的支持的新功能？

在实际项目中，popover的需求还是经常碰到的。这里有两个参考：
https://github.com/ChanceYu/weapp#weapp-popover
https://github.com/byk04712/weapp-popover

<form bind:submit="onSubmit">
    <l-button form-type="submit" size="large" l-class="text" >
      完成
    </l-button>
    <button form-type="submit">完成</button>
</form>

下面那个原生的button能触发submit，l-button无法触发submit。

描述你希望的支持的新功能？
表单中的输入右对齐，这样就和 list 组件的样式一致了。在填写复杂表单的情况下，用右对齐更方便一些。
参考: https://phonycode.github.io/wuss-weapp/component_mds/input.html

如下面代码形式




//自定义组件




适用笔记

** 重现步骤（可选）：**

<l-textarea name="name" value="这是value值" />
<l-textarea name="name" value="这是value值" placeholder="这是占位文本" />

** 期望的结果是什么？**
textarea区域显示 value值
** 实际的结果是什么？**
value值无法显示出来，用原生的textarea测试，没有这个问题

我是小程序方面的小白，感谢团队带来这么有帮助的组件库。
文档也构建的很好，有些地方细节还希望加强。

比如第一步的引用组件就整懵了一会儿，组件路径：path/to/${组件名称}/index ，
没接触过小程序的还以为path/to是小程序的内置写法，需要变的只是后面的组件名。。。
这里改成${组件路径}/${组件名称}/index可能就没歧义了。

然后按钮组件的文档，琢磨了好几分钟，楞是没看懂long属性是做什么的，看起来就像是宽100%。default按钮也是100%啊。。。后面看了代码才整明白。希望文档里能将这些容易困惑的属性做些讲解。

刚开始摸，可能后面还会有很多小白问题，团队辛苦了。。。

1.<l-button size="medium" />
2.<view><l-button size="medium" /></ view>

只有在第二种情况下，并且要把 view的display设为flex size属性才能生效

重现步骤（可选）：
引入后，只显示样式不显示list里的内容，attached（）里打印this.data.list是空数组。删除properties下定义的list属性申明内容后渲染正常。

tabs组件加上swipeable后 滑动内容不显示，只会显示标题

button不占宽高,而且无法改变里面嵌套文字的样式,除非再在里面嵌套一层
在外面包裹一个view display flex 它的宽高又回来了，
但是包裹一个form display flex宽高还是0

** 期望的结果是什么？**
change-spinner这个不是默认居中，可不可以满屏居中？
** 实际的结果是什么？**
./components/loading/index.wxss:1
.change-spinner {
width:240rpx;
text-align:center;
}

** 描述你希望的支持的新功能？**

条形的tabbar导航组件

** 你期望的 API 是怎样的？**

<bar img="" tip="" text="" data="" navigateTo="" />

重现步骤（可选）：

期望的结果是什么？ l-tabpanel 循环异步返回的数据 并且能加载样式

实际的结果是什么？ 没有加载出来

重现步骤（可选）：
按照文档使用自定义tabBar

期望的结果是什么？
点击tabBar的一项，页面正常切换。
实际的结果是什么？
点击tabBar的一项，页面能正常切换，但是tabBar被选中颜色错乱

不设置、设置为true 或者false，没看出来有啥区别，是我打开方式不对？
<l-tabs animated="true" bind:linchange="changeTabs"> <l-tabpanel tab="京东物流" key="one" slot="one"> <view class="tab-content">京东物流</view> </l-tabpanel> <l-tabpanel tab="品牌" key="two" slot="two"> <view class="tab-content">品牌</view> </l-tabpanel> <l-tabpanel tab="接口" key="three" slot="three"> <view class="tab-content">接口</view> </l-tabpanel> <l-tabpanel tab="面板" key="four" slot="four"> <view class="tab-content">面板</view> </l-tabpanel> </l-tabs>

0 提问之前
建议阅读：提问的智慧

1 issues标题：类型+内容；

类型有这两种：【Bug Report】、【Feature Request】

1.1 类型是bug时：

2 重现步骤：

3 期望的结果是什么？

4 实际的结果是什么？

5 补充说明（可选）

1.2 类型是Feature Request时：

2 描述你希望的支持的新功能？

3 你期望的 API 是怎样的？

描述你希望的支持的新功能？
在右侧列表下拉滑动过程中可以定位在左侧2种种类中间，不会超过这个区域就自动滑到下一个区域或者上一个区域
你期望的 API 是怎样的？

** 重现步骤（可选）：**

代码片段：https://developers.weixin.qq.com/s/6f4TllmU7k5r

** 期望的结果是什么？**

想做到的效果
类似于 饿了么 的商品列表，点击左侧分类，右侧显示滚动到响应的位置；滑动右侧的商品，左侧显示响应的分类自动切换；

** 实际的结果是什么？**

#14 修改前 内容能显示，但是滑动商品时，分类下的商品没触底就切换标签页了；

#14 修改后，（尝试修改样式暂时没奏效）

<l-toast show="{{ture}}" title="这是一条基础提示框" />

show="{{ture}}" # true

** 描述你希望的支持的新功能？**
radio和checkbox可以自定义选项内容
** 你期望的 API 是怎样的？**

<l-radio-group DIY="{{true}}">
    <l-radio /> 
</l-radio-group>

当在l-radio-group设置DIY属性为true时，下面的radio可以不传value，在后面跟一个输入框，输入自定义的内容。CheckBox也类似。

<l-button bind:getuserinfo="getUserInfo" openType="getuserinfo"></l-button>

应该改为

<l-button bind:getuserinfo="getUserInfo" open-type="getUserInfo"></l-button>

描述你希望的支持的新功能？
希望新增一个全屏索引页面，带有搜索功能

单个选项可以带图片，有主副标题就万能了

你期望的 API 是怎样的？
对前端不是很了解，，就不瞎期望了

描述你希望的支持的新功能？

你期望的 API 是怎样的？

描述你希望的支持的新功能？
功能就是这个：类似vue的element组件中的级联选择器
http://element-cn.eleme.io/#/zh-CN/component/cascader

你期望的 API 是怎样的？
简单一点，支持单选就行。
http://element-cn.eleme.io/#/zh-CN/component/cascader

label-width 来设置标题部分的宽度，默认是150，单位是rpx
错误示例代码：
<l-input label="名称" label-layout="left" label-layout="170" />

正确应为：
<l-input label="名称" label-layout="left" label-width ="170" />

描述你希望的支持的新功能？
引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤。
示例：

你期望的 API 是怎样的？
1、可设置横向步骤条还是纵向步骤条。
2、每个步骤有其对应的步骤状态描述。
3、可以自定义步骤图标

描述你希望的支持的新功能？
因为小程序是面向代理的，有时候可能一次要下十几二十张票，每次都要不停点击，比较麻烦。希望增加一个自定义输入数量的功能

你期望的 API 是怎样的？

1.点击中间数字区域后可以编辑数字
2.失去焦点或者点击了键盘的完成按钮就绑定当前的输入值

期望结果

描述

在演示小程序中，有展示 Radio 组件横向排列的效果，但是文档中没有体现配置项，希望更新

描述你希望的支持的新功能？
loading 支持mask属性。

你期望的 API 是怎样的？

当mask为true时，自带遮罩效果

小程序原生的loading组件是有这个属性的，设置了之后自带遮罩效果。现在的ui库，我还得再包一层mask组件，不知道是不是我使用方式不对。。我觉得loading组件，这个遮罩应该是强需求而且应用场景非常广。也许可以用全屏loading模式代替，但是在某些场景下并不合适，比如我在支付页面，我点击后在支付发起的过程中我要一个loading，这时候我要防止客户点击屏幕上的任何一个元素。

** 描述你希望的支持的新功能？**
计数组件（不知道这么叫合适不。。），选择商品数量的时候用到，由增加、减少、数量三个元素组成（例如：- 1 + ），点击增加/减少，数量会对应增加/减少。

** 你期望的 API 是怎样的？**
1.可以设置最大值和最小值，当数量等于最大值/最小值时，继续点击增加/减少会触发一个事件；
2.当数值成功发生改变时触发一个事件；
3.组件有个属性，控制是否数值成功改变时带动画效果
4.组件有个属性，数值成功改变时动画效果类型，可选：效果1（默认），效果2，效果3

描述你希望的支持的新功能？
The existed demo in docs is icon used in wxml. However, if I want to use icon in tabbar, how to do it？Because tabbar icon must configed in app.json。Just show me the demo code？Thanks a lot！

你期望的 API 是怎样的？