talelin / lin-ui Goto Github PK
View Code? Open in Web Editor NEW🌈 简洁、易用、灵活的微信小程序组件库
Home Page: https://doc.mini.talelin.com
License: MIT License
🌈 简洁、易用、灵活的微信小程序组件库
Home Page: https://doc.mini.talelin.com
License: MIT License
<l-button bind:getuserinfo="getUserInfo" openType="getuserinfo"></l-button>
应该改为
<l-button bind:getuserinfo="getUserInfo" open-type="getUserInfo"></l-button>
button不占宽高,而且无法改变里面嵌套文字的样式,除非再在里面嵌套一层
在外面包裹一个view display flex 它的宽高又回来了,
但是包裹一个form display flex宽高还是0
描述你希望的支持的新功能?
阿里小程序支持
钉钉小程序、支付宝小程序
你期望的 API 是怎样的?
阿里小程序和微信小程序非常接近,期望可以方便移植就好了。
0 提问之前
建议阅读:提问的智慧
1 issues标题:类型+内容;
类型有这两种:【Bug Report】、【Feature Request】
1.1 类型是bug时:
2 重现步骤:
3 期望的结果是什么?
4 实际的结果是什么?
5 补充说明(可选)
1.2 类型是Feature Request时:
2 描述你希望的支持的新功能?
3 你期望的 API 是怎样的?
** 描述你希望的支持的新功能?**
条形的tabbar导航组件
** 你期望的 API 是怎样的?**
<bar img="" tip="" text="" data="" navigateTo="" />
期望的结果是什么?
toast轻提示,不能自定义z-index导致会被页面其它有层级的view所挡住
希望能自定义组件.container容器的z-index
** 重现步骤(可选):**
代码片段:https://developers.weixin.qq.com/s/6f4TllmU7k5r
** 期望的结果是什么?**
想做到的效果
类似于 饿了么 的商品列表,点击左侧分类,右侧显示滚动到响应的位置;滑动右侧的商品,左侧显示响应的分类自动切换;
** 实际的结果是什么?**
#14 修改前 内容能显示,但是滑动商品时,分类下的商品没触底就切换标签页了;
#14 修改后,(尝试修改样式暂时没奏效)
描述你希望的支持的新功能?
你期望的 API 是怎样的?
** 重现步骤(可选):**
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 以为是控制 显示 图标的,没细想结果导致报错;还花了挺长时间找错误
** 实际的结果是什么?**
重现步骤(可选):
期望的结果是什么? l-tabpanel 循环异步返回的数据 并且能加载样式
实际的结果是什么? 没有加载出来
希望能出一个类似IOS7之前的那种滑动解锁界面的滑动条,用户点触圆块向右滑动,这种交互其实用在移动端的表单提交体验非常好,单点触的提交按钮万一在提交的瞬间想放弃提交,那会非常尴尬,但是滑动提交的话只要滑到最右时还没松手,那就依然可以划回去?
提供的API最好包括:1、滑动条里的提示文字;2、滑动条的宽高、是否垂直/水平;3、滑动中的事件钩子、滑动完成松手后的事件钩子
** 期望的结果是什么?**
./components/tabs/index.wxss:1
.l-placement-top .l-tabs-header-line {
border-bottom:1px solid #f3f3f3;
}
这要灰色线能去掉吗?如果不能,能不能自定义自己想要的颜色?好像没找到自定义class,加了!important也不起作用
描述你希望的支持的新功能?
你期望的 API 是怎样的?
假数据:
设置data-price无效,所以只能拿到currentIndex后,date[currentIndex]找到对应的元素。这种实现方式有个问题就是,页面始终会有一个是选中的状态,不能取消选中,不知道还有没有其他更优雅方便的方法。
** 描述你希望的支持的新功能?**
紧凑的宫格布局
图标不丰富,最好能引入阿里巴巴图标库
** 你期望的 API 是怎样的?**
<view class=""> <text class="title"></text> <view class="list"> <view class="items" bindtap='calendartap'> <image src=""></image> <text></text> </view> </view> </view>
这里我没有分界线,最好还是有个清晰分明的分界线
iview ui做的就可以,不过还是好像不能自己添加块状元素,view之类的
随便截取的几张图,仅供参考。不合适可以忽略我的消息。
** 重现步骤(可选):**
<l-radio-group>
<l-radio value="北方" checked="{{true}}" />
<l-radio value="南方" checked="{{false}}" />
</l-radio-group>
** 期望的结果是什么?**
渲染的结果应该是 "北方" 被选中,“南方”没选中
** 实际的结果是什么?**
"北方" 和“南方”都没被选中,放在l-radio-group中 checked属性失效
描述你希望的支持的新功能?
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 是怎样的?
** 描述你希望的支持的新功能?**
radio和checkbox可以自定义选项内容
** 你期望的 API 是怎样的?**
<l-radio-group DIY="{{true}}">
<l-radio />
</l-radio-group>
当在l-radio-group设置DIY属性为true时,下面的radio可以不传value,在后面跟一个输入框,输入自定义的内容。CheckBox也类似。
l-class 如何使用的,我觉得文档中说的不明确,然后还有优先级问题,有些样式可能需要加上!important才能生效。
描述你希望的支持的新功能?
表单中的输入右对齐,这样就和 list 组件的样式一致了。在填写复杂表单的情况下,用右对齐更方便一些。
参考: https://phonycode.github.io/wuss-weapp/component_mds/input.html
1.加载进度条
2.折叠面板TreeView
描述你希望的支持的新功能?
功能就是这个:类似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" />
1.<l-button size="medium" />
2.<view><l-button size="medium" /></ view>
只有在第二种情况下,并且要把 view的display设为flex size属性才能生效
重现步骤(可选):
引入后,只显示样式不显示list里的内容,attached()里打印this.data.list是空数组。删除properties下定义的list属性申明内容后渲染正常。
<l-toast show="{{ture}}" title="这是一条基础提示框" />
show="{{ture}}" # true
** 描述你希望的支持的新功能?**
计数组件(不知道这么叫合适不。。),选择商品数量的时候用到,由增加、减少、数量三个元素组成(例如:- 1 + ),点击增加/减少,数量会对应增加/减少。
** 你期望的 API 是怎样的?**
1.可以设置最大值和最小值,当数量等于最大值/最小值时,继续点击增加/减少会触发一个事件;
2.当数值成功发生改变时触发一个事件;
3.组件有个属性,控制是否数值成功改变时带动画效果
4.组件有个属性,数值成功改变时动画效果类型,可选:效果1(默认),效果2,效果3
描述你希望的支持的新功能?
loading 支持mask属性。
你期望的 API 是怎样的?
当mask为true时,自带遮罩效果
小程序原生的loading组件是有这个属性的,设置了之后自带遮罩效果。现在的ui库,我还得再包一层mask组件,不知道是不是我使用方式不对。。我觉得loading组件,这个遮罩应该是强需求而且应用场景非常广。也许可以用全屏loading模式代替,但是在某些场景下并不合适,比如我在支付页面,我点击后在支付发起的过程中我要一个loading,这时候我要防止客户点击屏幕上的任何一个元素。
** 重现步骤(可选):**
<l-textarea name="name" value="这是value值" />
<l-textarea name="name" value="这是value值" placeholder="这是占位文本" />
** 期望的结果是什么?**
textarea区域显示 value值
** 实际的结果是什么?**
value值无法显示出来,用原生的textarea测试,没有这个问题
tabs组件加上swipeable后 滑动内容不显示,只会显示标题
之前项目的时候需要一个通告栏来通知消息,要求是能够轮播,且在字数超出一行的时候进行滚动,等滚动完成后再轮播到下一条消息,自己动手实现了一个,写了不少的代码,感觉这个需求经常遇到,但是小程序上并没有一个组件可以实现这个效果
** 期望的结果是什么?**
change-spinner这个不是默认居中,可不可以满屏居中?
** 实际的结果是什么?**
./components/loading/index.wxss:1
.change-spinner {
width:240rpx;
text-align:center;
}
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':''}}"
如下面代码形式
//自定义组件
适用笔记
重现步骤(可选):
lin-UI中,“操作反馈”→“消息提示”,点击“成功提示”、“错误提示”等带图标的提示
期望的结果是什么?
图标与消息同时从上方弹出,同时收回
实际的结果是什么?
图标与消息同时从上方弹出,收回时图标直接消失,文字居中收回
描述你希望的支持的新功能?
在右侧列表下拉滑动过程中可以定位在左侧2种种类中间,不会超过这个区域就自动滑到下一个区域或者上一个区域
你期望的 API 是怎样的?
描述你希望的支持的新功能?
在实际项目中,popover的需求还是经常碰到的。这里有两个参考:
https://github.com/ChanceYu/weapp#weapp-popover
https://github.com/byk04712/weapp-popover
重现步骤(可选):
期望的结果是什么?
先在StatusShow组件中触发了一次onBtn事件,又在button里触发了一次事件
实际的结果是什么?
只触发一次事件
我是小程序方面的小白,感谢团队带来这么有帮助的组件库。
文档也构建的很好,有些地方细节还希望加强。
比如第一步的引用组件就整懵了一会儿,组件路径:path/to/${组件名称}/index
,
没接触过小程序的还以为path/to
是小程序的内置写法,需要变的只是后面的组件名。。。
这里改成${组件路径}/${组件名称}/index
可能就没歧义了。
然后按钮组件的文档,琢磨了好几分钟,楞是没看懂long
属性是做什么的,看起来就像是宽100%。default按钮也是100%啊。。。后面看了代码才整明白。希望文档里能将这些容易困惑的属性做些讲解。
刚开始摸,可能后面还会有很多小白问题,团队辛苦了。。。
重现步骤(可选):
按照文档使用自定义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>
** 描述你希望的支持的新功能?**
我发现少图标如
+
,只能暂时由close
加 旋转 实现
** 你期望的 API 是怎样的?**
<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。
对比了下git下的dist目录和miniprogram_npm目录下的组件源码,比如说说l-dialog组件,在dist目录下,该组件控制显示隐藏是show属性,miniprogram_npm下的该组件,控制显示隐藏的是status。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.