README
ae-task-panel
任务面板
备忘录
完成
- 优化弹出效果,新增背景过渡效果
- 使用rax规范:rpx,组件等
- 解耦组件
- 抽离出弹出层
- 思考并设计业务可能需要的API
- 高定制化,开放众多可用API
- playground页面展示API及demo
- 嵌套滚动禁止
- icon -> img
- 实现全局配置icon,并且支持单独任务自定义配置icon。丰富动态自定义配置
待办:
问题:task的执行按钮根据状态切换是我们封装还是使用者提供?如果使用者提供,需要在执行后的返回值里同样给到按钮的icon 这期的任务都需要跳到其他页面再回来,因此这里面需要增加一个事件监听:document.addEventListener("visibilitychange", this.pageVisible);
需求中要求:跳转回来保持改任务界面,但是数据刷新,比如任务完成数量增加 每次页面重新visible,都需要重新拉去所有的数据 状态切换每次都非常硬核的重新刷新 icon是img url
问题:任务完成时,是否变灰以及禁止点击 这块可能需要开个配置出来了,,,任务完成后是否禁止点击 加配置项
数据的fetch及真实数据的操作
任务的执行动作(跳转,分享等)及成功后对数据的更新
API及演示Demo查看方式
- 查看API测试环境以及Demo的示例
- npm install
- npm start
打开
http://localhost:3333/index
- API测试用代码在
/demo
中
Demo示例页
// 当前页面渲染demo示例
import demo from 'ae-task-panel/demo'
使用方式
import TaskPanel from 'ae-task-panel';
TaskPanel.show({
config: {
// 关于界面的定制化API:尺寸,背景,宽高度等等
// UI有关配置
// layout config
height: '60%',
overlayBackground: 'rgba(0, 0, 0, 0.6)',
transitionDuration: 300,
layoutBackground: '#fff',
layoutBorderRadius: '10rpx 10rpx 0 0',
closeButtonEnable: true,
closeButtonColor: '#000',
closeButtonBackground: 'transparent',
closeButtonMarginRight: '10rpx',
closeButtonWidth: '44rpx',
closeButtonHeight: '44rpx',
eventThroughTopImage: true,
// header config
headerHeight: '70rpx',
headerFontSize: '44rpx',
headerFontColor: '#000',
headerBackground: '',
headerMiddleDiffWidth: '80rpx',
headerMiddleHeight: '200rpx',
headerMiddleImage: '',
headerInfoEnable: true,
headerInfoHeight: '60rpx',
headerInfoBackground: '',
headerInfoFontSize: '30rpx',
headerInfoFontColor: '#000',
scrollViewBackground: '',
// task config
taskItemHeight: '180rpx',
taskItemMargin: '20rpx',
taskItemBorderRadius: '10rpx',
taskItemBoxShadow: '',
taskItemFilter: '',
taskItemBackground: '#fedf46',
taskItemLeftWidth: '180rpx',
taskItemLeftHeight: '100%',
taskItemLeftPadding: '20rpx',
taskItemLeftBackground: '',
taskItemLeftFontColor: '#000',
taskItemMiddlePadding: '15rpx 10rpx',
taskItemMiddleBackground: '',
taskItemMiddleTitleFontColor: '#000',
taskItemMiddleDescFontColor: '#807024',
taskItemMiddlePointFontColor: '#000',
taskItemRightWidth: '140rpx',
taskItemRightHeight: '100%',
taskItemRightPadding: '20rpx',
taskItemRightBackground: '',
taskItemRightFontColor: '#757575',
},
// 数据有关配置
options: {
title: 'Task List',
info: 'Complete mission and win more within 24hrs',
// 全局默认Icon
doingIcon: '//ae01.alicdn.com/kf/H53110de130c946c5a64bcc0cc1798266v.png',
doneIcon: '//ae01.alicdn.com/kf/H4276c5213bb64ec58eda0695b399741dL.png',
pointIcon: '//ae01.alicdn.com/kf/Ha6041fca017e46d697c105417241aa62X.png',
}
})
- 其中,Icon的配置可以被单独的任务覆盖修改,实现不同任务匹配不同Icon的定制需求