- 组件是基于本人实际开发场景,不一定适用于所有人,可借鉴思路
- 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 基于他人组件实现当前所需要图片裁剪功能