- 组件是基于本人实际开发场景，不一定适用于所有人，可借鉴思路
- github代码更新一定比uniapp插件市场更新及时，全面(本人比较懒,懒得去单独拆分，单独写文档)
- github代码为所有组件使用示例集合
- 下载的小伙伴们，点个小星星可好(#^.^#)
组件列表 所有组件都仅测试微信小程序 若测试其它会有说明
- xyz-tab 顶部导航(长度5以下将平均分配距离，超出屏幕将会滚动)
- xyz-choose-image 图片选择 (兼容头条)
- xyz-swiper 轮播图 可自己定义圆点样式 (兼容头条)
- xyz-masonry 瀑布流 (css方式实现的在数据改变的情况下会造成布局闪动)
- xyz-share 生成卡片 朋友圈海报
- xyz-input 支持数字统计 手机号/邮箱校验(可自己添加其它规则) (兼容头条)
- xyz-textarea 支持数字统计 (兼容头条)
- xyz-modal 自定义提示框 可自定义按钮文字 (兼容头条)
- xyz-navbar 自定义导航栏样式 支持自定义返回按钮功能 添加返回文字 (兼容头条)
- xyz-scroll-view 下拉刷新/上拉加载 可修改加载文字及图标 返回顶部 跳转指定位置 右侧索引列表
- xyz-user-auth 用户授权 与 store 联用
- xyz-handle-image 图片裁剪
- xyz-img-tt 图片裁剪
- uParse 富文本编辑（来自插件市场）
- 新增utils文件夹，将store中 部分方法提至utils文件，项目目录更加清晰
- xyz-swiper 更新 新增previousMargin、nextMargin属性
- 增加富文本解析组件（来自插件市场）
- 新增组件 xyz-navbar / xyz-scroll-view / xyz-swiper / xyz-user-auth
- 新增组件 xyz-choose-image / xyz-handle-image / xyz-tab / xyz-input / xyz-textarea / xyz-modal / xyz-masonry / xyz-share
- http 封装请求方法 可配置拦截器
- util 封装公共方法 提示框(showToast) 界面跳转
- common 项目中频繁调用的接口
- index store主目录
- actions 异步操作函数，可以调用mutations(commit) 也可调用action(dispatch)
- mutations 必须为同步函数 commit提交更改state(唯一更改state方法)
- getters 类似computed属性
~~ apis api接口统一目录 (08-22 移至 utils/util) ~~
~~ interceptors 拦截器设置 若启用拦截器 isUse为true即可 (08-22 移至 utils/util) ~~
| 字段/方法名 | 字段/方法名说明 |
| ---登录流程涉及--- | ------ |
| apiRequest()(08-22 移至 utils/util) | 统一请求方法入口可以设置拦截器 |
| responseError()(08-22 移至 utils/util) | 对apiRequest()响应成功之后错误数据的处理 |
| getUserinfo() | 获取用户信息方法中默认用户授权之后直接getToken()获取token getProvider('oauth')|
| getToken() | 与后台交互获取token |
| getLoginCode() | 获取code值，code只能使用一次，未设置state |
| ~~getProvider() ~~ | 获取服务供应商 |
| ~~isGetUserInfo() ~~ | 用户是否已授权获取信息 getUserSetting('scope.userInfo') |
getUserSetting() |
验证是否获取用户某项授权设置 |
| ~~userAuthorize() ~~ |
用户授权申请 除userinfo外可提前发出请求 |
getImageInfo()(08-22 移至 utils/util) |
获取图片信息 |
| 字段/方法名 |
字段/方法名说明 |
| tabList |
导航栏数据 |
| tabActiveIdx |
激活导航栏 |
| ------ |
------ |
| tabSelect() |
点击事件，并且emit绑定 |
监听函数是为了监听其它操作，可选择是否使用（比如，根据滑动屏幕来切换导航）
| 字段/方法名 |
字段/方法名说明 |
| size |
图片尺寸 |
| num |
图片数量 |
| isSave |
是否记录用户已选择图片 |
| saveStr |
缓存记录时字段 |
| isBase64 |
结果是否转base64 (V1.0.2移除) |
| ------ |
------ |
| chooseImage() |
调用getImage，并且emit绑定 |
| getImage() |
调用uni.chooseImage选择本地相册图片或者拍照 |
| delImg() |
删除图片 |
| viewImg() |
调用uni.previewImage预览图片 |
- V1.0.2 编译模式修改 增加头条小程序 (只支持小程序)
组件中 isBase64 字段移除（页面间传值数据有大小限制，有转base64需求的在$emit事件中转化即可 show.vue界面具体示例）
| 字段/方法名 |
字段/方法名说明 |
| indicatorDots |
是否显示面板指示点(原生) |
| indicatorColor |
指示点颜色 |
| indicatorActiveColor |
当前选中的指示点颜色 |
| autoplay |
是否自动切换 |
| interval |
自动切换时间间隔 |
| duration |
滑动动画时长 |
| circular |
是否采用衔接滑动 |
| isDiyDots |
是否自定义小圆点样式 true时 indicatorDots必须设为false |
| arrList |
数据 |
| previousMargin |
前边距 |
| nextMargin |
后边距 |
| dotBottom |
自定义指示点距离底部距离 |
| height |
轮播图高度 |
| ------ |
------ |
| dotsChange() |
小圆点变换 |
| goWebView() |
轮播图页面跳转 |
| 字段 |
字段说明 |
| mode |
图片尺寸 |
| imgWidth |
图片宽度 |
| masonryList |
数据集合 [{src:图片路径，size:[宽，高]}] |
| isSize |
数据集合是否包含有图片的宽高信息，false时，将自动读取宽高 |
| borderRadius |
图片圆角 默认0无圆角 |
| ------ |
------ |
| handleData() |
处理并分组数据 |
| getImageInfo() |
调用uni.getImageInfo获取图片信息 |
| watch |
通过监听数据变化实现触底加载更多 |
| 字段 |
字段说明 |
| isWhiteSpace |
是否留白 |
| padding |
四周留白距离 |
| borderRadius |
卡片圆角 |
| shareImg |
卡片主图 |
| shareImgW |
卡片主图宽 |
| shareImgH |
卡片主图高 |
| imgScan |
卡片右下角图 |
| imgScanW |
卡片右下角图宽 |
| imgType |
保存图片类型 仅支持png/jpg |
| title |
底部标题 |
| author |
底部作者 |
| bottomType |
底部作者区域显示类型 |
| bottomH |
底部高度 |
| bottomPadding |
底部四周留白 |
| bgColor |
背景颜色 |
| textColor |
字体颜色 |
| ------ |
------ |
| drawImage() |
canvas绘图，对图片进行缩放处理，及卡片排版 |
| savePhoto() |
调用uni.canvasToTempFilePath绘制图片，uni.saveImageToPhotosAlbum保存图片 |
| drawRoundRect |
绘制卡片圆角 |
| getImageInfo() |
调用uni.getImageInfo获取图片信息 |
| 字段/方法名 |
字段/方法名说明 |
| inputType |
type类型 |
| placeholder |
未输入提示 |
| maxlength |
最大字数限制 |
| limit |
右下角字数统计 |
| isSaveMess |
是否本地缓存用户信息 |
| saveMessStr |
本地缓存用户信息字段 |
| value |
limit为true时必须传入该字段 统计字数 |
| isValidate |
是否校验输入内容 |
| validateType |
校验值类型 phone/email |
| ------ |
------ |
| input() |
input事件 |
| initStroge() |
初始化本地已有缓存信息 |
| 字段/方法名 |
字段/方法名说明 |
| textarea |
ios中input事件不生效，加if判断生效，原因不明 |
| placeholder |
未输入提示 |
| maxlength |
最大字数限制 |
| limit |
右下角字数统计 |
| isSaveMess |
是否本地缓存用户信息 |
| saveMessStr |
本地缓存用户信息字段 |
| value |
limit为true时必须传入该字段 统计字数 |
| ------ |
------ |
| input() |
input事件 |
| initStroge() |
初始化本地已有缓存信息 |
| 字段/方法名 |
字段/方法名说明 |
| title |
提示框文字 |
| isShow |
modal提示框的显示与隐藏 |
| cancelTxt |
取消按钮文字 |
| okTxt |
确认按钮文字 |
| ------ |
------ |
| modalClick() |
取消/确定事件 |
| 字段/方法名 |
字段/方法名说明 |
| isBack |
是否直接返回上一级 true直接返回 false其它操作 |
| isBackBtn |
是否显示返回按钮（一级页面无返回，其它页面） |
| backTxt |
返回按钮文字 |
| navbarTitle |
导航栏标题 |
| height |
标题栏高度（不包含状态栏 默认100） |
| bgColor |
导航栏颜色 |
| ------ |
------ |
| goBack() |
返回事件 |
xyz-scroll-view 自定义下拉刷新/上拉加载
| 字段/方法名 |
字段/方法名说明 |
| scrollX |
是否直接返回上一级 true直接返回 false其它操作 |
| scrollY |
是否显示返回按钮（一级页面无返回，其它页面） |
| upperT |
距顶部/左边多远时（单位px），触发 scrolltoupper 事件 |
| lowerT |
距底部/右边多远时（单位px），触发 scrolltolower 事件 |
| scrollTop |
设置竖向滚动条位置 同时实现原有scroll-into-view功能 |
| scrollL |
设置横向滚动条位置 |
| scrollWA |
在设置滚动条位置时使用动画过渡 |
| enableBTT |
iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向 |
| pullStatus |
监听状态变化 true 显示下拉加载区域 |
| upStatus |
监听状态变化 true 显示上拉加载区域 |
| dataStatus |
监听数据状态变化 true有更多数据 |
| isGoTop |
是否显示返回顶部按钮 |
| goTopVal |
滚动距离后显示按钮 |
| isUseIdx |
是否使用右侧索引 |
| useIdxList |
索引数据列表 |
| ------ |
------ |
| scroll() |
滚动事件 |
| scrolltolower() |
滚动至底部 |
| scrolltoupper() |
滚动至顶部 |
| touchstart() |
触摸移动开始 |
| touchmove() |
触摸移动中 |
| touchend() |
触摸移动结束 |
| goTop() |
返回顶部 |
| goIdx() |
索引跳转 调用scrollIntoView()方法 |
| scrollIntoView() |
scroll-into-view 方法实现 该方法需要在父组件中实现 通过组件watch 监听scrollTop值变化实现 |
scrollIntoView(id) {
let _this = this;
uni.createSelectorQuery()
.in(this)
.select('#' + id)
.boundingClientRect(function(res) {
_this.scrollTop = res.top;
})
.exec();
}
xyz-handle-image 自定义图片移动裁剪
xyz-img-tt 基于他人组件实现当前所需要图片裁剪功能
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent