UI组件库合集，大家有遇到好的组件库，欢迎留言评论然后加入到文档里。 第一款： 官方WeUI组件库，地址 https://developers.weixin.qq.com/miniprogram/dev/extended/weui/ 预览码： [图片] 第二款： ColorUI：地址 https://github.com/weilanwl/ColorUI 预览码：   [图片] 第三款： vantUI（又名：ZanUI）：地址 https://youzan.github.io/vant-weapp/#/intro 预览码： [图片] 第四款： MinUI： 地址 https://meili.github.io/min/docs/minui/index.html 预览码： [图片] 第五款： iview-weapp：地址 https://weapp.iviewui.com/docs/guide/start 预览码： [图片] 第六款： WXRUI：暂无地址 预览码： [图片] 第七款： WuxUI：地址https://www.wuxui.com/#/introduce 预览码： [图片] 第八款： WussUI：地址 https://phonycode.github.io/wuss-weapp/quickstart.html 预览码： [图片] 第九款： TouchUI：地址 https://github.com/uileader/touchwx 预览码: [图片] 第十款： Hello UniApp： 地址 https://m3w.cn/uniapp 预览码： [图片] 第十一款： TaroUI：地址 https://taro-ui.jd.com/#/docs/introduction 预览码： [图片] 第十二款： Thor UI： 地址 https://thorui.cn/doc/ 预览码： [图片] 第十三款： GUI：https://github.com/Gensp/GUI 预览码： [图片] 第十四款： QyUI：暂无地址 预览码： [图片] 第十五款： WxaUI：暂无地址 预览码： [图片] 第十六款： kaiUI： github地址 https://github.com/Chaunjie/kai-ui 组件库文档：https://chaunjie.github.io/kui/dist/#/start 预览码： [图片] 第十七款： YsUI：暂无地址 预览码： [图片] 第十八款： BeeUI：git地址 http://ued.local.17173.com/gitlab/wxc/beeui.git 预览码： [图片] 第十九款： AntUI： 暂无地址 预览码： [图片] 第二十款： BleuUI：暂无地址 预览码： [图片] 第二十一款： uniydUI：暂无地址 预览码： [图片] 第二十二款： RovingUI：暂无地址 预览码： [图片] 第二十三款： DojayUI：暂无地址 预览码： [图片] 第二十四款： SkyUI：暂无地址 预览码： [图片] 第二十五款： YuUI：暂无地址 预览码： [图片] 第二十六款： wePyUI：暂无地址 预览码： [图片] 第二十七款： WXDUI：暂无地址 预览码： [图片] 第二十八款： XviewUI：暂无地址 预览码： [图片] 第二十九款： MinaUI：暂无地址 预览码： [图片] 第三十款： InyUI：暂无地址 预览码： [图片] 第三十一款： easyUI：地址 https://github.com/qq865738120/easyUI 预览码: [图片] 第三十二款 Kbone-UI： 地址 https://wechat-miniprogram.github.io/kboneui/ui/#/ 暂无预览码 第三十三款 VtuUi： 地址 https://github.com/jisida/VtuWeapp 预览码： [图片] 第三十四款 Lin-UI 地址：http://doc.mini.talelin.com/ 预览码： [图片] 第三十五款 GraceUI 地址： http://grace.hcoder.net/ 这个是收费的哦～ 预览码： [图片] 第三十六款 anna-remax-ui npm：https://www.npmjs.com/package/anna-remax-ui/v/1.0.12 anna-remax-ui 地址： https://annasearl.github.io/anna-remax-ui/components/general/button 预览码 [图片] 第三十七款 Olympus UI 地址：暂无 网易严选出品。 预览码 [图片] 第三十八款 AiYunXiaoUI 地址暂无 预览码 [图片] 第三十九款 visionUI npm：https://www.npmjs.com/package/vision-ui 预览码： [图片] 第四十款 AnimaUI(灵动UI) 地址：https://github.com/AnimaUI/wechat-miniprogram 预览码： [图片] 第四十一款 uView 地址：http://uviewui.com/components/quickstart.html 预览码： [图片] 第四十二款 firstUI 地址：https://www.firstui.cn/ 预览码： [图片]

比较喜欢IOS/APPSTORE首页列表及其转场动画交互，比较适合一些展示，设计类的场景。 组件化封装 高仿appstore交互方法 基本实现appstore的列表项布局 适用于商品展示场景 [图片] 配置说明 wxml [代码]<view class="container"> <ui-list wx:if="{{appstoreList}}" list="{{appstoreList}}" /> </view> [代码] js [代码]const Pager = require('../../components/aotoo/core/index') const mkAppstoreList = require('../../components/modules/appstorelist') Pager({ data: { appstoreList: mkAppstoreList({ id: '', onOpen: null, onClose: null, data: [] }), } }) [代码] id {Array} 配置实例的Id onOpen {Function} 弹开列表项时的回调方法 onClose {Function} 关闭列表项时的回调方法 data {Array} 设置列表内容 列表内容的属性 title {String|Array} 配置标题，副标题，描述 img {Object} 设置图片 IMG {Object} 设置封面页 banner {Object} 设置封面页的banner条 content {String|Object|Array} 设置详细类容 API closePopView 关闭当前打开的列表项 如何设置 如何获取实例 [代码]data: { appstoreList: mkAppstoreList({ id: 'asLikeList', }) }, onReady(){ let instance = this.asLikeList // 获取列表实例 } [代码] 设置列表项风格1(封面，上标题，上子标题) [图片] [代码]mkAppstoreList({ id: 'id', data: [ { title: [ 'Demo', // 子标题 '仿appstore列表' // 标题 ], IMG: { src: '/images/other/long.jpg'}, //封面图 } ] }), [代码] 设置列表项风格2(深色封面，下标题，下子标题) [图片] [代码]mkAppstoreList({ id: 'id', data: [ { IMG: { src: '/images/other/long.jpg', dark: true }, //封面图，深色模式(深色启用白字) title: [ 'Demo', // 子标题 '仿appstore列表' // 表标题 ], }, ] }), [代码] 设置列表项风格3(深色封面，上标题，上子标题，下描述) [图片] [代码]mkAppstoreList({ id: 'id', data: [ { title: [ 'Demo', // 子标题 '仿appstore列表', //标题 '好好学习，天天向上' // 标题描述 ], IMG: { src: '/images/other/long.jpg', dark: true }, }, ] }), [代码] 设置列表项风格4(图片，上标题，上子标题) [图片] [代码]mkAppstoreList({ id: 'id', data: [ { title: [ 'Demo', '仿appstore列表' ], img: { src: '/images/other/long.jpg' }, }, ] }), [代码] 设置列表项风格5(图片，下标题，下子标题，下标题描述) [图片] [代码]mkAppstoreList({ id: 'id', data: [ { img: { src: 'http://www.agzgz.com/myimgs/other/long.jpg'}, title: [ '演示', '仿appstore列表', '一直很喜欢appstore的效果', ], }, ] }), [代码] 设置列表项风格6(封面，下标题，下banner) [图片] [代码]mkAppstoreList({ id: 'id', data: [ { IMG: { src: 'http://www.agzgz.com/myimgs/other/long.jpg'}, title: '仿appstore列表', banner: { img: { src: '/images/chat.png', itemStyle: 'width: 32px;' }, title: 'banner展示的demo', } }, ] }), [代码] 设置列表项风格7(上标题，上子标题，推荐列表) [图片] [代码]mkAppstoreList({ id: 'id', data: [ { {title: [ 'log', // 子标题 '最近更新日志', // 标题 {"@icon": {type: 'success', size: 32, color: 'red'}, title: ['赞助开源', '新增手持弹幕组件']}, {"@icon": {type: 'info', size: 32, color: 'gray'}, title: ['bug修复', '修复导航面板显示错位的问题']}, {"@icon": {type: 'success', size: 32,}, title: ['评分组件', '快捷评分组件']} ]} ] }), [代码] 如何设置展开内容 列表项展开后需要展示详细信息 [图片] [代码]mkAppstoreList({ id: 'id', data: [ { { img: { src: 'http://www.agzgz.com/myimgs/other/long.jpg'}, title: [ '演示', '仿appstore列表', '一直很喜欢appstore的效果', ], content: `使用markdown编辑所需要的内容，该内容将会在列表项展开后显示，是异步显示方式` }, }, ] }), [代码] DEMO [图片]