@smt-ui/component
Advanced tools
Comparing version 0.0.29-alpha.0 to 0.0.30-alpha.0
{ | ||
"name": "@smt-ui/component", | ||
"version": "0.0.29-alpha.0", | ||
"version": "0.0.30-alpha.0", | ||
"description": "extension base", | ||
@@ -36,3 +36,3 @@ "author": "jialipeng <jialipeng@baidu.com>", | ||
}, | ||
"gitHead": "64ce99882809399e6d9960c0aefa7cf9453fc0a4" | ||
"gitHead": "d1c7689e49ca30d1d032230fd6e3dd6f84fd7866" | ||
} |
@@ -1,1 +0,1 @@ | ||
{"npmPackageName":"@smt-ui/component","npmPackageVersion":"0.0.28-alpha.0","componentsList":[{"name":"layout","label":"布局组件","icon":"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NiA2NiI+PHBhdGggZD0iTTIzLjkgMjUuOGMtMS40IDAtMi41IDEuMS0yLjUgMi41VjM5YzAgMS40IDEuMSAyLjUgMi41IDIuNXMyLjUtMS4xIDIuNS0yLjVWMjguM2MwLTEuNC0xLjEtMi41LTIuNS0yLjV6TTQ1LjkgMjYuOWMtMS0xLTIuNS0xLTMuNSAwTDM4IDMxLjNjLS42LjYtLjkgMS40LS44IDIuMi0uMS44LjIgMS42LjggMi4xbDQuNCA0LjRjLjUuNSAxLjEuNyAxLjguN3MxLjMtLjMgMS44LS43LjctMS4xLjctMS44LS4zLTEuMy0uNy0xLjhsLTMtMyAzLTNjLjktLjkuOS0yLjUtLjEtMy41eiIvPjxwYXRoIGQ9Ik01MC44IDE0LjdjLTMuNy0xLjgtMTAuNC0zLjEtMTcuNi0zLjItNy4yLjEtMTQgMS4zLTE3LjcgMy4yLTUuNyAyLjctOCA4LjMtOCAxOS4yIDAgOC43IDIuNCAxNSA2LjUgMTcuMiA1LjMgMi43IDEwLjEgMy42IDE5LjEgMy42IDkuMSAwIDEzLjktLjkgMTktMy41IDQuMi0yLjMgNi42LTguNyA2LjYtMTcuMyAwLTEwLjgtMi40LTE2LjUtNy45LTE5LjJ6bTIuOSAxOS4xYzAgNy40LTIgMTEuOC0zLjkgMTIuOS0zLjggMS45LTcuNiAyLjktMTYuNyAyLjktOSAwLTEyLjktMS0xNi44LTIuOS0xLjktMS0zLjgtNS41LTMuOC0xMi45IDAtOC43IDEuNS0xMi45IDUuMS0xNC44IDMtMS41IDkuMi0yLjYgMTUuNS0yLjYgNi4zLjEgMTIuNSAxLjIgMTUuNSAyLjYgMy42IDEuOSA1LjEgNi4xIDUuMSAxNC44eiIvPjwvc3ZnPg==","components":[{"name":"smt-feed-item","label":"信息流子项","description":"信息流子项:包括左文右图、纯文本、上文下图、多图及视频模式。","codeSnap":"<smt-feed-item theme='default' content='title: '宠物自己在家时, 如何帮助它度过孤独时光',infoSource: '萌宠在家',commentsNum: 2' status='0'></smt-feed-item>","groups":"layout","fragement":"swanide://fragment/afebdafc13cda2201207a3d6721577481577175550244","properties":{"attributes":[{"name":"theme","type":"string","description":"信息流子项的主题","required":"true","default":"default"},{"name":"content","type":"Object","description":"信息流子项目的内容","required":"true","default":"{title: '标题',infoSource: '网易新闻',commentsNum: 2,images: []}"},{"name":"video","type":"Object","description":"是否为视频和视频信息","required":"false","default":"{isVideo: true, time: '05:00'}"},{"name":"status","type":"String","description":"阅读状态:0未读,1已读","required":"false","default":"0"}],"events":[{"name":"bindfeeditemtap","type":"Event","description":"点击feed-item之后的回调","required":"false","default":"-"}]},"type":"component","doc":"https://smartprogram.baidu.com/docs/develop/component/smt-feed-item","demoUri":"https://b.bdstatic.com/miniapp/assets/images/doc_demo//smt-feed-item.png","usingComponents":{"smt-feed-item":"@smt-ui/component/src/feed-item"}},{"name":"smt-feed","label":"信息流","description":"信息流组件,可配置下拉刷新、列表加载、上滑加载功能,适合于feed信息场景,并可放置在页面的任何部分;同时组件包含手势下拉以及api调用两种使用方式\n* 注意:\n1. 和scroll-view一样,信息流组件作为局部滚动组件,必须在它的父级或本身指定高度\n2. 组件本身使用了async/await语法,如出现regenerater等报错,请在开发者工具“项目信息”中开启“增强编译”\n3. 当同时启用下拉刷新和上滑加载且请求不稳定时,可使用CancelToken取消先前的请求","codeSnap":"<smt-feed></smt-feed>","groups":"layout","properties":{"attributes":[{"name":"theme","type":"String","description":"主题配置,默认浅色;深色主题请指定dark","required":"false","default":"-"},{"name":"loadingHeight","type":"Number","description":"加载、话术区域高度,单位为设备px,转换方法: import {upx2dpx} from '@smt-ui/component/src/common/utils/px';","required":"false","default":"192px(设计稿宽度为1242)"},{"name":"pullToRefresh","type":"Boolean","description":"是否开启手势下拉刷新; 默认只能通过组件api调起","required":"false","default":"false"},{"name":"lowerThreshold","type":"Number","description":"触发scrolltolower事件的阈值","required":"false","default":"150px(设备上的px)"},{"name":"text","type":"String","description":"加载成功时的展示话术","required":"false","default":"建议最多显示18个汉字,超出内容截断"},{"name":"refresh","type":"EventHandle","description":"手势滑动触发加载时,响应该onRefresh事件; 通过调用api加载,不会触发该事件","required":"false","default":""},{"name":"startRefresh","type":"EventHandle","description":"手动调用该api,触发加载","required":"false","default":""},{"name":"stopRefresh","type":"EventHandle","description":"手动调用该api,停止加载,并弹出加载提示(对应属性text);可使用await等待关闭动画结束","required":"false","default":""},{"name":"closeLoading","type":"EventHandle","description":"手动调用该api,立即关闭加载,不弹出加载提示;例如接口异常,建义直接关闭加载(小球交替一次大约为500ms,调用前可加延时避免关闭太快)","required":"false","default":""},{"name":"ext-cls-feed","type":"externalClass","description":"组件整体class名","required":"false","default":"-"},{"name":"ext-cls-loading","type":"externalClass","description":"加载区域class名","required":"false","default":"-"},{"name":"ext-cls-circle-left","type":"externalClass","description":"加载中左侧小球class名","required":"false","default":"-"},{"name":"ext-cls-circle-right","type":"externalClass","description":"加载中右侧小球class名","required":"false","default":"-"},{"name":"ext-cls-content","type":"externalClass","description":"滚动区域class名","required":"false","default":"-"},{"name":"ext-cls-result","type":"externalClass","description":"加载话术外框class名","required":"false","default":"-"},{"name":"ext-cls-result-text","type":"externalClass","description":"加载话术文字class名","required":"false","default":"-"}],"events":[{"name":"bindscroll","type":"Event","description":"滚动时触发,返回当前组件的值","required":"false","default":"-"}]},"type":"component","doc":"https://smartprogram.baidu.com/docs/develop/component/smt-feed","demoUri":"https://b.bdstatic.com/miniapp/assets/images/doc_demo//smt-feed.png","usingComponents":{"smt-feed":"@smt-ui/component/src/feed"}},{"name":"smt-icon","label":"图标","description":"包括天气、系统设置、互动社交、生活服务、书籍影音、政务服务、交通出行7个行业类别的图标。请扫描示例二维码查看图标全集。","codeSnap":"<smt-icon name='add'></smt-icon>","groups":"layout","properties":{"attributes":[{"name":"name","type":"String","description":"icon的英文名称","required":"true"},{"name":"color","type":"String, Array.<String>","description":"icon的颜色,多色图标支持传入色值的数组"},{"name":"size","type":"Number","description":"icon的尺寸,单位px","default":25}],"events":[]},"type":"component","doc":"https://smartprogram.baidu.com/docs/develop/component/smt-icon","demoUri":"https://b.bdstatic.com/miniapp/assets/images/doc_demo//smt-icon.png","usingComponents":{"smt-icon":"@smt-ui/component/src/icon"}},{"name":"smt-page-status","label":"空态/缺省组件","description":"空态/缺省组件,可用于全屏和半屏。用于展示页面加载,页面异常-有操作、页面异常-无操作三种页面状态。","codeSnap":"<page-status></page-status>","groups":"layout","properties":{"attributes":[{"name":"theme","type":"String","description":"主题配置,默认浅色;深色主题请指定dark","required":"false","default":""},{"name":"loading","type":"Boolean","description":"页面状态配置,默认不展示加载状态页面","required":"false","default":"false"},{"name":"icon","type":"String","description":"空态/缺省页面下的图标名称","required":"false","default":"content"},{"name":"loadingTitle","type":"String","description":"加载页面下的标题文案","required":"false","default":"正在加载..."},{"name":"title","type":"String","description":"空态/缺省页面下的标题文案","required":"false","default":"单行标题"},{"name":"desc","type":"String","description":"空态/缺省页面下的描述文案","required":"false","default":""},{"name":"showBtn","type":"Boolean","description":"是否展示空态/缺省页面下的操作按钮,默认展示","required":"false","default":"true"},{"name":"btnText","type":"String","description":"空态/缺省页面下,操作按钮的描述文案,建议最多显示4个汉字,超出内容截断","required":"false","default":"重新加载"},{"name":"reloading","type":"EventHandle","description":"空态/缺省页面下,点击操作按钮时触发","required":"false","default":""}],"events":[]},"type":"component","doc":"https://smartprogram.baidu.com/docs/develop/component/smt-page-status","demoUri":"https://b.bdstatic.com/miniapp/assets/images/doc_demo//smt-page-status.png","usingComponents":{"smt-page-status":"@smt-ui/component/src/page-status"}},{"name":"smt-refresh","label":"刷新","description":"可用于页面任意区域,不包含手势交互;建议直接使用smt-feed下拉刷新,该组件包含下拉功能。","codeSnap":"<smt-refresh offset-y=\"{{0}}\" status=\"{{1}}\" text=\"为你推荐15条更新\"></smt-refresh>","fragement":"swanide://fragment/51f1e7d8841665748fa17a940eab12de1577181667851","groups":"layout","properties":{"attributes":[{"name":"theme","type":"String","description":"主题配置,默认浅色;深色主题请指定dark","required":"false","default":"-"},{"name":"loadingHgt","type":"Number","description":"加载区域高度","required":"false","default":"192px(需转换为设备尺寸)"},{"name":"offsetY","type":"Number","description":"垂直移动距离,*建议后续在sjs中使用","required":"false","default":"0"},{"name":"status","type":"Number","description":"加载状态 0: 未开始 1: 加载中 2: 展示话术","required":"false","default":"0"},{"name":"text","type":"String","description":"加载成功时的展示话术","required":"false","default":"建议最多显示18个汉字,超出内容截断"}],"events":[]},"type":"component","doc":"https://smartprogram.baidu.com/docs/develop/component/smt-refresh","demoUri":"https://b.bdstatic.com/miniapp/assets/images/doc_demo//smt-refresh.png","usingComponents":{"smt-refresh":"@smt-ui/component/src/refresh"}},{"name":"smt-spin","label":"加载","description":"加载组件,可用于全屏和半屏。用于展示加载状态,点击加载、正在加载、加载完成、重新加载四种状态。","codeSnap":"<spin></spin>","groups":"layout","properties":{"attributes":[{"name":"theme","type":"String","description":"主题配置,默认浅色;深色主题请指定dark","required":"false","default":""},{"name":"status","type":"Number","description":"加载状态配置,默认正在加载","required":"false","default":"1"},{"name":"textConfig","type":"Array","description":"加载状态对应的文案","required":"false","default":"['点击加载更多', '正在加载...', '已经到底啦', '加载失败 点击重新加载']"},{"name":"secureBottom","type":"Boolean","description":"默认兼容iPhoneX 及以上型号底部安全区,非全屏可关闭","required":"false","default":"true"}],"events":[]},"type":"component","doc":"https://smartprogram.baidu.com/docs/develop/component/smt-spin","demoUri":"https://b.bdstatic.com/miniapp/assets/images/doc_demo//smt-spin.png","usingComponents":{"smt-spin":"@smt-ui/component/src/spin"}}]}]} | ||
{"npmPackageName":"@smt-ui/component","npmPackageVersion":"0.0.26-alpha.0","componentsList":[{"name":"layout","label":"布局组件","icon":"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NiA2NiI+PHBhdGggZD0iTTIzLjkgMjUuOGMtMS40IDAtMi41IDEuMS0yLjUgMi41VjM5YzAgMS40IDEuMSAyLjUgMi41IDIuNXMyLjUtMS4xIDIuNS0yLjVWMjguM2MwLTEuNC0xLjEtMi41LTIuNS0yLjV6TTQ1LjkgMjYuOWMtMS0xLTIuNS0xLTMuNSAwTDM4IDMxLjNjLS42LjYtLjkgMS40LS44IDIuMi0uMS44LjIgMS42LjggMi4xbDQuNCA0LjRjLjUuNSAxLjEuNyAxLjguN3MxLjMtLjMgMS44LS43LjctMS4xLjctMS44LS4zLTEuMy0uNy0xLjhsLTMtMyAzLTNjLjktLjkuOS0yLjUtLjEtMy41eiIvPjxwYXRoIGQ9Ik01MC44IDE0LjdjLTMuNy0xLjgtMTAuNC0zLjEtMTcuNi0zLjItNy4yLjEtMTQgMS4zLTE3LjcgMy4yLTUuNyAyLjctOCA4LjMtOCAxOS4yIDAgOC43IDIuNCAxNSA2LjUgMTcuMiA1LjMgMi43IDEwLjEgMy42IDE5LjEgMy42IDkuMSAwIDEzLjktLjkgMTktMy41IDQuMi0yLjMgNi42LTguNyA2LjYtMTcuMyAwLTEwLjgtMi40LTE2LjUtNy45LTE5LjJ6bTIuOSAxOS4xYzAgNy40LTIgMTEuOC0zLjkgMTIuOS0zLjggMS45LTcuNiAyLjktMTYuNyAyLjktOSAwLTEyLjktMS0xNi44LTIuOS0xLjktMS0zLjgtNS41LTMuOC0xMi45IDAtOC43IDEuNS0xMi45IDUuMS0xNC44IDMtMS41IDkuMi0yLjYgMTUuNS0yLjYgNi4zLjEgMTIuNSAxLjIgMTUuNSAyLjYgMy42IDEuOSA1LjEgNi4xIDUuMSAxNC44eiIvPjwvc3ZnPg==","components":[{"name":"smt-feed-item","label":"信息流子项","description":"信息流子项:包括左文右图、纯文本、上文下图、多图及视频模式。","codeSnap":"<smt-feed-item theme='default' content='title: '宠物自己在家时, 如何帮助它度过孤独时光',infoSource: '萌宠在家',commentsNum: 2' status='0'></smt-feed-item>","groups":"layout","fragement":"swanide://fragment/afebdafc13cda2201207a3d6721577481577175550244","properties":{"attributes":[{"name":"theme","type":"string","description":"信息流子项的主题","required":"true","default":"default"},{"name":"content","type":"Object","description":"信息流子项目的内容","required":"true","default":"{title: '标题',infoSource: '网易新闻',commentsNum: 2,images: []}"},{"name":"video","type":"Object","description":"是否为视频和视频信息","required":"false","default":"{isVideo: true, time: '05:00'}"},{"name":"status","type":"String","description":"阅读状态:0未读,1已读","required":"false","default":"0"}],"events":[{"name":"bindfeeditemtap","type":"Event","description":"点击feed-item之后的回调","required":"false","default":"-"}]},"type":"component","doc":"https://smartprogram.baidu.com/docs/develop/component/smt-feed-item","demoUri":"https://b.bdstatic.com/miniapp/assets/images/doc_demo//smt-feed-item.png","usingComponents":{"smt-feed-item":"@smt-ui/component/src/feed-item"}},{"name":"smt-feed","label":"信息流","description":"信息流组件,可配置下拉刷新、列表加载、上滑加载功能,适合于feed信息场景,并可放置在页面的任何部分;同时组件包含手势下拉以及api调用两种使用方式\n* 注意:\n1. 和scroll-view一样,信息流组件作为局部滚动组件,必须在它的父级或本身指定高度\n2. 组件本身使用了async/await语法,如出现regenerater等报错,请在开发者工具“项目信息”中开启“增强编译”\n3. 当同时启用下拉刷新和上滑加载且请求不稳定时,可使用CancelToken取消先前的请求","codeSnap":"<smt-feed></smt-feed>","groups":"layout","properties":{"attributes":[{"name":"theme","type":"String","description":"主题配置,默认浅色;深色主题请指定dark","required":"false","default":"-"},{"name":"loadingHeight","type":"Number","description":"加载、话术区域高度,单位为设备px,转换方法: import {upx2dpx} from '@smt-ui/component/src/common/utils/px';","required":"false","default":"192px(设计稿宽度为1242)"},{"name":"pullToRefresh","type":"Boolean","description":"是否开启手势下拉刷新; 默认只能通过组件api调起","required":"false","default":"false"},{"name":"lowerThreshold","type":"Number","description":"触发scrolltolower事件的阈值","required":"false","default":"150px(设备上的px)"},{"name":"text","type":"String","description":"加载成功时的展示话术","required":"false","default":"建议最多显示18个汉字,超出内容截断"},{"name":"refresh","type":"EventHandle","description":"手势滑动触发加载时,响应该onRefresh事件; 通过调用api加载,不会触发该事件","required":"false","default":""},{"name":"startRefresh","type":"EventHandle","description":"手动调用该api,触发加载","required":"false","default":""},{"name":"stopRefresh","type":"EventHandle","description":"手动调用该api,停止加载,并弹出加载提示(对应属性text);可使用await等待关闭动画结束","required":"false","default":""},{"name":"closeLoading","type":"EventHandle","description":"手动调用该api,立即关闭加载,不弹出加载提示;例如接口异常,建义直接关闭加载(小球交替一次大约为500ms,调用前可加延时避免关闭太快)","required":"false","default":""},{"name":"ext-cls-feed","type":"externalClass","description":"组件整体class名","required":"false","default":"-"},{"name":"ext-cls-loading","type":"externalClass","description":"加载区域class名","required":"false","default":"-"},{"name":"ext-cls-circle-left","type":"externalClass","description":"加载中左侧小球class名","required":"false","default":"-"},{"name":"ext-cls-circle-right","type":"externalClass","description":"加载中右侧小球class名","required":"false","default":"-"},{"name":"ext-cls-content","type":"externalClass","description":"滚动区域class名","required":"false","default":"-"},{"name":"ext-cls-result","type":"externalClass","description":"加载话术外框class名","required":"false","default":"-"},{"name":"ext-cls-result-text","type":"externalClass","description":"加载话术文字class名","required":"false","default":"-"}],"events":[{"name":"bindscroll","type":"Event","description":"滚动时触发,返回当前组件的值","required":"false","default":"-"}]},"type":"component","doc":"https://smartprogram.baidu.com/docs/develop/component/smt-feed","demoUri":"https://b.bdstatic.com/miniapp/assets/images/doc_demo//smt-feed.png","usingComponents":{"smt-feed":"@smt-ui/component/src/feed"}},{"name":"smt-icon","label":"图标","description":"包括天气、系统设置、互动社交、生活服务、书籍影音、政务服务、交通出行7个行业类别的图标。请扫描示例二维码查看图标全集。","codeSnap":"<smt-icon name='add'></smt-icon>","groups":"layout","properties":{"attributes":[{"name":"name","type":"String","description":"icon的英文名称","required":"true"},{"name":"color","type":"String, Array.<String>","description":"icon的颜色,多色图标支持传入色值的数组"},{"name":"size","type":"Number","description":"icon的尺寸,单位px","default":25}],"events":[]},"type":"component","doc":"https://smartprogram.baidu.com/docs/develop/component/smt-icon","demoUri":"https://b.bdstatic.com/miniapp/assets/images/doc_demo//smt-icon.png","usingComponents":{"smt-icon":"@smt-ui/component/src/icon"}},{"name":"smt-page-status","label":"空态/缺省组件","description":"空态/缺省组件,可用于全屏和半屏。用于展示页面加载,页面异常-有操作、页面异常-无操作三种页面状态。","codeSnap":"<page-status></page-status>","groups":"layout","properties":{"attributes":[{"name":"theme","type":"String","description":"主题配置,默认浅色;深色主题请指定dark","required":"false","default":""},{"name":"loading","type":"Boolean","description":"页面状态配置,默认不展示加载状态页面","required":"false","default":"false"},{"name":"icon","type":"String","description":"空态/缺省页面下的图标名称","required":"false","default":"content"},{"name":"loadingTitle","type":"String","description":"加载页面下的标题文案","required":"false","default":"正在加载..."},{"name":"title","type":"String","description":"空态/缺省页面下的标题文案","required":"false","default":"单行标题"},{"name":"desc","type":"String","description":"空态/缺省页面下的描述文案","required":"false","default":""},{"name":"showBtn","type":"Boolean","description":"是否展示空态/缺省页面下的操作按钮,默认展示","required":"false","default":"true"},{"name":"btnText","type":"String","description":"空态/缺省页面下,操作按钮的描述文案,建议最多显示4个汉字,超出内容截断","required":"false","default":"重新加载"},{"name":"reloading","type":"EventHandle","description":"空态/缺省页面下,点击操作按钮时触发","required":"false","default":""}],"events":[]},"type":"component","doc":"https://smartprogram.baidu.com/docs/develop/component/smt-page-status","demoUri":"https://b.bdstatic.com/miniapp/assets/images/doc_demo//smt-page-status.png","usingComponents":{"smt-page-status":"@smt-ui/component/src/page-status"}},{"name":"smt-refresh","label":"刷新","description":"可用于页面任意区域,不包含手势交互;建议直接使用smt-feed下拉刷新,该组件包含下拉功能。","codeSnap":"<smt-refresh offset-y=\"{{0}}\" status=\"{{1}}\" text=\"为你推荐15条更新\"></smt-refresh>","fragement":"swanide://fragment/51f1e7d8841665748fa17a940eab12de1577181667851","groups":"layout","properties":{"attributes":[{"name":"theme","type":"String","description":"主题配置,默认浅色;深色主题请指定dark","required":"false","default":"-"},{"name":"loadingHgt","type":"Number","description":"加载区域高度","required":"false","default":"192px(需转换为设备尺寸)"},{"name":"offsetY","type":"Number","description":"垂直移动距离,*建议后续在sjs中使用","required":"false","default":"0"},{"name":"status","type":"Number","description":"加载状态 0: 未开始 1: 加载中 2: 展示话术","required":"false","default":"0"},{"name":"text","type":"String","description":"加载成功时的展示话术","required":"false","default":"建议最多显示18个汉字,超出内容截断"}],"events":[]},"type":"component","doc":"https://smartprogram.baidu.com/docs/develop/component/smt-refresh","demoUri":"https://b.bdstatic.com/miniapp/assets/images/doc_demo//smt-refresh.png","usingComponents":{"smt-refresh":"@smt-ui/component/src/refresh"}},{"name":"smt-spin","label":"加载","description":"加载组件,可用于全屏和半屏。用于展示加载状态,点击加载、正在加载、加载完成、重新加载四种状态。","codeSnap":"<spin status='1'></spin>","groups":"layout","fragement":"swanide://fragment/25af44248f8aad73b64e274ead38d6151577191316430","properties":{"attributes":[{"name":"status","type":"Number","description":"加载状态配置","required":"true"},{"name":"theme","type":"String","description":"主题配置,默认浅色;深色主题请指定dark","required":"false","default":""},{"name":"textConfig","type":"Array","description":"加载状态对应的文案","required":"false","default":"['点击加载更多', '正在加载...', '已经到底啦', '加载失败 点击重新加载']"},{"name":"secureBottom","type":"Boolean","description":"默认兼容iPhoneX 及以上型号底部安全区,非全屏可关闭","required":"false","default":"true"}],"events":[]},"type":"component","doc":"https://smartprogram.baidu.com/docs/develop/component/smt-spin","demoUri":"https://b.bdstatic.com/miniapp/assets/images/doc_demo//smt-spin.png","usingComponents":{"smt-spin":"@smt-ui/component/src/spin"}}]}]} |
@@ -0,1 +1,13 @@ | ||
"use strict"; | ||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); | ||
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator")); | ||
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator")); | ||
var _px = require("../../common/utils/px"); | ||
var _index = require("../../common/utils/index"); | ||
/** | ||
@@ -6,358 +18,531 @@ * @file 下拉刷新 | ||
*/ | ||
import {upx2dpx} from '../../common/utils/px'; | ||
import {calcCircle, linearAccu, promiseDebounce, syncSetData} from '../../common/utils/index'; | ||
const STATUS = { | ||
IDLE: 0, | ||
LOADING: 1, | ||
SHOWTEXT: 2 | ||
var STATUS = { | ||
IDLE: 0, | ||
LOADING: 1, | ||
SHOWTEXT: 2 | ||
}; | ||
Component({ | ||
externalClasses: [ | ||
'smt-feed-container', | ||
'smt-feed-loading', | ||
'smt-feed-content', | ||
externalClasses: ['smt-feed-container', 'smt-feed-loading', 'smt-feed-content', 'smt-refresh-circle-left', 'smt-refresh-circle-right', 'smt-refresh-result-container', 'smt-refresh-result-text'], | ||
properties: { | ||
// 是否开启下拉刷新 | ||
pullToRefresh: { | ||
type: Boolean, | ||
value: false | ||
}, | ||
// loading加载区域高度 * 必须是device px | ||
loadingHeight: { | ||
type: Number, | ||
value: (0, _px.upx2dpx)(192), | ||
observer: function observer(n) { | ||
if (typeof n !== 'number') { | ||
throw 'loadingHeight 必须是数字类型!否则下拉可造成卡顿闪屏'; | ||
} | ||
} | ||
}, | ||
// 距底部距离 触发 scrolltolower 事件 | ||
lowerThreshold: { | ||
type: Number, | ||
value: 150 | ||
}, | ||
// 加载成功话术 * 不要默认值,prop抖动 | ||
text: { | ||
type: String, | ||
value: '', | ||
observer: function observer(n) { | ||
this.clipText(n); | ||
} | ||
}, | ||
theme: { | ||
type: String, | ||
value: '' | ||
}, | ||
// 禁止下拉 * 场景:处于滚动页面且api加载(demo示例平台) | ||
disableTouch: { | ||
type: Boolean, | ||
value: false | ||
} | ||
}, | ||
data: { | ||
circle: { | ||
// 小球尺寸 * device px防止变形 | ||
size: (0, _px.upx2dpx)(21), | ||
// 小球移动距离 | ||
offsetX: (0, _px.upx2dpx)(33), | ||
// 左右渐隐(有先后) | ||
opacityL: 0, | ||
opacityR: 0, | ||
// 左右距离(有先后) | ||
xL: 0, | ||
xR: 0 | ||
}, | ||
enableScroll: true, | ||
offsetY: 0, | ||
lower: false, | ||
// 最长18个汉字 | ||
clipedText: '', | ||
// 0: 未开始 1: 加载中 2: 展示话术 | ||
status: STATUS.IDLE, | ||
// 滚动高度 | ||
scrollTop: 0 | ||
}, | ||
methods: { | ||
/** | ||
* 截取18位文字 | ||
* @param {string} str 传入的文字 | ||
*/ | ||
clipText: function clipText(str) { | ||
this.setData({ | ||
clipedText: str.slice(0, 18) | ||
}); | ||
}, | ||
scrollHdl: function scrollHdl(_ref) { | ||
var _this = this; | ||
'smt-refresh-circle-left', | ||
'smt-refresh-circle-right', | ||
'smt-refresh-result-container', | ||
'smt-refresh-result-text' | ||
], | ||
var detail = _ref.detail; | ||
this.scrollTop = detail.scrollTop; // 如果是ios惯性,就禁掉回弹 | ||
properties: { | ||
// 是否开启下拉刷新 | ||
pullToRefresh: { | ||
type: Boolean, | ||
value: false | ||
}, | ||
if (this.data.pullToRefresh && this.scrollTop < 0 && this.data.enableScroll && this.offsetY === 0) { | ||
this.setData({ | ||
enableScroll: false | ||
}, function () { | ||
_this.setData({ | ||
enableScroll: true | ||
}); | ||
}); | ||
} | ||
// loading加载区域高度 * 必须是device px | ||
loadingHeight: { | ||
type: Number, | ||
value: upx2dpx(192), | ||
observer(n) { | ||
if (typeof n !== 'number') { | ||
throw 'loadingHeight 必须是数字类型!否则下拉可造成卡顿闪屏'; | ||
this.triggerEvent('scroll', detail); | ||
}, | ||
touchHdl: function () { | ||
var _touchHdl = (0, _asyncToGenerator2["default"])( | ||
/*#__PURE__*/ | ||
_regenerator["default"].mark(function _callee(_ref2) { | ||
var _this2 = this; | ||
var type, _ref2$changedTouches, changedTouches, _ref2$manual, manual, ids, last, y, disabled, identifier, distance, pullDown, offsetY, circleInfo, setOffsetY, shouldLoad, result; | ||
return _regenerator["default"].wrap(function _callee$(_context) { | ||
while (1) { | ||
switch (_context.prev = _context.next) { | ||
case 0: | ||
type = _ref2.type, _ref2$changedTouches = _ref2.changedTouches, changedTouches = _ref2$changedTouches === void 0 ? [] : _ref2$changedTouches, _ref2$manual = _ref2.manual, manual = _ref2$manual === void 0 ? false : _ref2$manual; | ||
if (!(this.closing || this.data.disableTouch && !manual)) { | ||
_context.next = 3; | ||
break; | ||
} | ||
} | ||
}, | ||
// 距底部距离 触发 scrolltolower 事件 | ||
lowerThreshold: { | ||
type: Number, | ||
value: 150 | ||
}, | ||
return _context.abrupt("return"); | ||
// 加载成功话术 * 不要默认值,prop抖动 | ||
text: { | ||
type: String, | ||
value: '', | ||
observer(n) { | ||
this.clipText(n); | ||
} | ||
}, | ||
case 3: | ||
ids = changedTouches.map(function (_ref3) { | ||
var identifier = _ref3.identifier; | ||
return identifier; | ||
}); | ||
last = changedTouches.length - 1; | ||
y = changedTouches[last] && changedTouches[last].pageY; // ue规定: 如果api调用下拉刷新,则不启用手势刷新 | ||
theme: { | ||
type: String, | ||
value: '' | ||
}, | ||
disabled = !this.data.pullToRefresh && !manual && this.status === STATUS.IDLE; // 禁用多点触控 | ||
// 禁止下拉 * 场景:处于滚动页面且api加载(demo示例平台) | ||
disableTouch: { | ||
type: Boolean, | ||
value: false | ||
} | ||
}, | ||
_context.t0 = type; | ||
_context.next = _context.t0 === 'touchstart' ? 10 : _context.t0 === 'touchmove' ? 17 : _context.t0 === 'touchend' ? 33 : 42; | ||
break; | ||
data: { | ||
circle: { | ||
// 小球尺寸 * device px防止变形 | ||
size: upx2dpx(21), | ||
// 小球移动距离 | ||
offsetX: upx2dpx(33), | ||
// 左右渐隐(有先后) | ||
opacityL: 0, | ||
opacityR: 0, | ||
// 左右距离(有先后) | ||
xL: 0, | ||
xR: 0 | ||
}, | ||
case 10: | ||
identifier = changedTouches[last].identifier; | ||
this.identifier = identifier; | ||
enableScroll: true, | ||
if (ids.includes(this.identifier)) { | ||
_context.next = 14; | ||
break; | ||
} | ||
offsetY: 0, | ||
return _context.abrupt("return"); | ||
lower: false, | ||
case 14: | ||
this.startY = y + this.scrollTop; | ||
this.lastOffsetY = this.offsetY; | ||
return _context.abrupt("break", 42); | ||
// 最长18个汉字 | ||
clipedText: '', | ||
case 17: | ||
if (ids.includes(this.identifier)) { | ||
_context.next = 19; | ||
break; | ||
} | ||
// 0: 未开始 1: 加载中 2: 展示话术 | ||
status: STATUS.IDLE, | ||
return _context.abrupt("return"); | ||
// 滚动高度 | ||
scrollTop: 0 | ||
}, | ||
case 19: | ||
distance = y - this.startY; | ||
pullDown = distance > 0; | ||
offsetY = this.offsetY = distance * .6 + this.lastOffsetY; // 没loading动画时下拉计算动画 | ||
methods: { | ||
/** | ||
* 截取18位文字 | ||
* @param {string} str 传入的文字 | ||
*/ | ||
clipText(str) { | ||
this.setData({ | ||
clipedText: str.slice(0, 18) | ||
}); | ||
}, | ||
if (this.status === STATUS.IDLE) { | ||
circleInfo = (0, _index.calcCircle)(offsetY, this.data.loadingHeight); | ||
circleInfo && this.setData(circleInfo); | ||
} // 向上划要收起loading, 设置20px防误触 | ||
scrollHdl({detail}) { | ||
this.scrollTop = detail.scrollTop; | ||
// 如果是ios惯性,就禁掉回弹 | ||
if (this.data.pullToRefresh && this.scrollTop < 0 && this.data.enableScroll && this.offsetY === 0) { | ||
if (!(!pullDown && Math.abs(y - this.startY) > 20)) { | ||
_context.next = 29; | ||
break; | ||
} | ||
this.fadeCircle(); | ||
this.setData({ | ||
enableScroll: false | ||
}, () => { | ||
this.setData({ | ||
enableScroll: true | ||
}); | ||
status: STATUS.IDLE, | ||
offsetY: 0 | ||
}); | ||
} | ||
this.triggerEvent('scroll', detail); | ||
}, | ||
this.status = STATUS.IDLE; | ||
this.lastOffsetY = this.offsetY = 0; | ||
return _context.abrupt("return"); | ||
async touchHdl({type, changedTouches = [], manual = false}) { // eslint-disable-line fecs-max-statements | ||
// 如果上一次没完全关闭,禁止下拉 | ||
if (this.closing || (this.data.disableTouch && !manual)) { | ||
return; | ||
} | ||
const ids = changedTouches.map(({identifier}) => identifier); | ||
const last = changedTouches.length - 1; | ||
const y = changedTouches[last] && changedTouches[last].pageY; | ||
// ue规定: 如果api调用下拉刷新,则不启用手势刷新 | ||
const disabled = !this.data.pullToRefresh && !manual && this.status === STATUS.IDLE; | ||
case 29: | ||
if (!disabled) { | ||
_context.next = 31; | ||
break; | ||
} | ||
// 禁用多点触控 | ||
switch (type) { | ||
case 'touchstart': { | ||
const identifier = changedTouches[last].identifier; | ||
this.identifier = identifier; | ||
if (!ids.includes(this.identifier)) { | ||
return; | ||
} | ||
this.startY = y + this.scrollTop; | ||
this.lastOffsetY = this.offsetY; | ||
break; | ||
return _context.abrupt("return"); | ||
case 31: | ||
if (pullDown && this.scrollTop <= 0 && this.scrollTop - offsetY <= 0) { | ||
setOffsetY = function setOffsetY() { | ||
return _this2.setData({ | ||
offsetY: offsetY | ||
}); | ||
}; // 如果已经禁止滚动&&还往下拉,直接赋值 | ||
if (!this.data.enableScroll) { | ||
setOffsetY(); | ||
} else { | ||
this.setData({ | ||
// 该setData 不会多次执行 | ||
enableScroll: false | ||
}, setOffsetY); | ||
} | ||
} | ||
case 'touchmove': { | ||
if (!ids.includes(this.identifier)) { | ||
return; | ||
} | ||
const distance = y - this.startY; | ||
const pullDown = distance > 0; | ||
let offsetY = this.offsetY = distance * .6 + this.lastOffsetY; | ||
// 没loading动画时下拉计算动画 | ||
if (this.status === STATUS.IDLE) { | ||
const circleInfo = calcCircle(offsetY, this.data.loadingHeight); | ||
circleInfo && this.setData(circleInfo); | ||
} | ||
// 向上划要收起loading, 设置20px防误触 | ||
if (!pullDown && Math.abs(y - this.startY) > 20) { | ||
this.fadeCircle(); | ||
this.setData({ | ||
status: STATUS.IDLE, | ||
offsetY: 0 | ||
}); | ||
this.status = STATUS.IDLE; | ||
this.lastOffsetY = this.offsetY = 0; | ||
return; | ||
} | ||
return _context.abrupt("break", 42); | ||
if (disabled) { | ||
return; | ||
} | ||
case 33: | ||
if (!(ids.length > 0 && !ids.includes(this.identifier) || this.offsetY === 0 || disabled)) { | ||
_context.next = 35; | ||
break; | ||
} | ||
if (pullDown && this.scrollTop <= 0 && this.scrollTop - offsetY <= 0) { | ||
const setOffsetY = () => this.setData({offsetY}); | ||
// 如果已经禁止滚动&&还往下拉,直接赋值 | ||
if (!this.data.enableScroll) { | ||
setOffsetY(); | ||
} | ||
else { | ||
this.setData({ // 该setData 不会多次执行 | ||
enableScroll: false | ||
}, setOffsetY); | ||
} | ||
} | ||
break; | ||
} | ||
case 'touchend': { | ||
// ids.lenght === 0 说明手动触发;offsetY === 0 说明关闭主动置零 | ||
if (ids.length > 0 && !ids.includes(this.identifier) || this.offsetY === 0 || disabled) { | ||
return; | ||
} | ||
this.lastOffsetY = this.offsetY; | ||
// 判断是否加载 | ||
const shouldLoad = this.scrollTop <= 0 && this.offsetY >= this.data.loadingHeight; | ||
let result = 0; | ||
if (shouldLoad) { | ||
// 只有status === 0时,触发加载 | ||
if (this.status === STATUS.IDLE) { | ||
this.startRefreshTime = Date.now(); | ||
this.triggerEvent('refresh'); | ||
this.setData({status: STATUS.LOADING}); | ||
this.status = STATUS.LOADING; | ||
} | ||
result = this.data.loadingHeight; | ||
} | ||
else { | ||
this.fadeCircle(); | ||
} | ||
return _context.abrupt("return"); | ||
case 35: | ||
this.lastOffsetY = this.offsetY; // 判断是否加载 | ||
shouldLoad = this.scrollTop <= 0 && this.offsetY >= this.data.loadingHeight; | ||
result = 0; | ||
if (shouldLoad) { | ||
// 只有status === 0时,触发加载 | ||
if (this.status === STATUS.IDLE) { | ||
this.startRefreshTime = Date.now(); | ||
this.triggerEvent('refresh'); | ||
this.setData({ | ||
enableScroll: true | ||
}, | ||
() => { | ||
this.setData({ | ||
offsetY: result | ||
}); | ||
status: STATUS.LOADING | ||
}); | ||
this.lastOffsetY = this.offsetY = result; | ||
break; | ||
this.status = STATUS.LOADING; | ||
} | ||
result = this.data.loadingHeight; | ||
} else { | ||
this.fadeCircle(); | ||
} | ||
this.setData({ | ||
enableScroll: true | ||
}, function () { | ||
_this2.setData({ | ||
offsetY: result | ||
}); | ||
}); | ||
this.lastOffsetY = this.offsetY = result; | ||
return _context.abrupt("break", 42); | ||
case 42: | ||
case "end": | ||
return _context.stop(); | ||
} | ||
}, | ||
} | ||
}, _callee, this); | ||
})); | ||
/** | ||
* circle渐隐 | ||
*/ | ||
fadeCircle() { | ||
return linearAccu((y, callback) => { | ||
const circleInfo = calcCircle(y, this.data.loadingHeight); | ||
if (circleInfo) { | ||
this.setData(circleInfo, callback); | ||
function touchHdl(_x) { | ||
return _touchHdl.apply(this, arguments); | ||
} | ||
return touchHdl; | ||
}(), | ||
/** | ||
* circle渐隐 | ||
*/ | ||
fadeCircle: function fadeCircle() { | ||
var _this3 = this; | ||
return (0, _index.linearAccu)(function (y, callback) { | ||
var circleInfo = (0, _index.calcCircle)(y, _this3.data.loadingHeight); | ||
if (circleInfo) { | ||
_this3.setData(circleInfo, callback); | ||
} else { | ||
callback(); | ||
} | ||
}, this.data.loadingHeight, 0); | ||
}, | ||
/** | ||
* 渐隐loadingbar | ||
*/ | ||
closeLoading: function () { | ||
var _closeLoading = (0, _asyncToGenerator2["default"])( | ||
/*#__PURE__*/ | ||
_regenerator["default"].mark(function _callee2() { | ||
return _regenerator["default"].wrap(function _callee2$(_context2) { | ||
while (1) { | ||
switch (_context2.prev = _context2.next) { | ||
case 0: | ||
// 防止关闭后,touchend还在触发中 | ||
this.closing = true; | ||
this.offsetY = 0; | ||
if (this.data.enableScroll) { | ||
_context2.next = 5; | ||
break; | ||
} | ||
else { | ||
callback(); | ||
} | ||
}, this.data.loadingHeight, 0); | ||
}, | ||
/** | ||
* 渐隐loadingbar | ||
*/ | ||
async closeLoading() { | ||
// 防止关闭后,touchend还在触发中 | ||
this.closing = true; | ||
this.offsetY = 0; | ||
if (!this.data.enableScroll) { | ||
await syncSetData(this, {enableScroll: true}); | ||
_context2.next = 5; | ||
return (0, _index.syncSetData)(this, { | ||
enableScroll: true | ||
}); | ||
case 5: | ||
_context2.next = 7; | ||
return (0, _index.syncSetData)(this, { | ||
offsetY: 0 | ||
}); | ||
case 7: | ||
_context2.next = 9; | ||
return new Promise(function (r) { | ||
return setTimeout(r, 200); | ||
}); | ||
case 9: | ||
_context2.next = 11; | ||
return (0, _index.syncSetData)(this, { | ||
status: STATUS.IDLE | ||
}); | ||
case 11: | ||
this.status = STATUS.IDLE; | ||
this.lastOffsetY = this.offsetY = 0; | ||
this.closing = false; | ||
case 14: | ||
case "end": | ||
return _context2.stop(); | ||
} | ||
await syncSetData(this, {offsetY: 0}); | ||
// 关闭动画200ms | ||
await new Promise(r => setTimeout(r, 200)); | ||
// 放在后面防止小球和text重叠 | ||
await syncSetData(this, {status: STATUS.IDLE}); | ||
this.status = STATUS.IDLE; | ||
this.lastOffsetY = this.offsetY = 0; | ||
this.closing = false; | ||
}, | ||
} | ||
}, _callee2, this); | ||
})); | ||
/** | ||
* 调用模拟下拉刷新 | ||
*/ | ||
async startRefresh() { | ||
// 未关闭又调用 | ||
if (this.status !== STATUS.IDLE) { | ||
function closeLoading() { | ||
return _closeLoading.apply(this, arguments); | ||
} | ||
return closeLoading; | ||
}(), | ||
/** | ||
* 调用模拟下拉刷新 | ||
*/ | ||
startRefresh: function () { | ||
var _startRefresh = (0, _asyncToGenerator2["default"])( | ||
/*#__PURE__*/ | ||
_regenerator["default"].mark(function _callee3() { | ||
var _this4 = this; | ||
return _regenerator["default"].wrap(function _callee3$(_context3) { | ||
while (1) { | ||
switch (_context3.prev = _context3.next) { | ||
case 0: | ||
if (!(this.status !== STATUS.IDLE)) { | ||
_context3.next = 4; | ||
break; | ||
} | ||
this.debCloseLoading.cancel(); | ||
await this.closeLoading(); | ||
} | ||
this.status = STATUS.LOADING; | ||
this.setData({ | ||
enableScroll: false, | ||
status: STATUS.LOADING | ||
}, () => { | ||
if (this.closing) { | ||
_context3.next = 4; | ||
return this.closeLoading(); | ||
case 4: | ||
this.status = STATUS.LOADING; | ||
this.setData({ | ||
enableScroll: false, | ||
status: STATUS.LOADING | ||
}, function () { | ||
if (_this4.closing) { | ||
return; | ||
} | ||
this.offsetY = this.data.loadingHeight; | ||
this.touchHdl({type: 'touchend', manual: true}); | ||
}); | ||
}, | ||
} | ||
/** | ||
* 停止当前刷新 | ||
*/ | ||
async stopRefresh() { | ||
// 用户下拉,至少保证小球转3圈 | ||
let time = 1500 - (Date.now() - this.startRefreshTime); | ||
time = time > 0 ? time : 0; | ||
await new Promise(r => setTimeout(r, time)); | ||
this.status = STATUS.SHOWTEXT; | ||
this.setData({ | ||
status: STATUS.SHOWTEXT | ||
}); | ||
await this.debCloseLoading(); | ||
}, | ||
_this4.offsetY = _this4.data.loadingHeight; | ||
/** | ||
* 滚动到底部时触发 | ||
* @param {Object} param detail 事件 | ||
*/ | ||
scrollToLower({detail}) { | ||
this.triggerEvent('scrolltolower', detail); | ||
}, | ||
_this4.touchHdl({ | ||
type: 'touchend', | ||
manual: true | ||
}); | ||
}); | ||
setScrollTop(scrollTop) { | ||
this.setData({ | ||
scrollTop | ||
}); | ||
} | ||
case 6: | ||
case "end": | ||
return _context3.stop(); | ||
} | ||
} | ||
}, _callee3, this); | ||
})); | ||
function startRefresh() { | ||
return _startRefresh.apply(this, arguments); | ||
} | ||
return startRefresh; | ||
}(), | ||
/** | ||
* 停止当前刷新 | ||
*/ | ||
stopRefresh: function () { | ||
var _stopRefresh = (0, _asyncToGenerator2["default"])( | ||
/*#__PURE__*/ | ||
_regenerator["default"].mark(function _callee4() { | ||
var time; | ||
return _regenerator["default"].wrap(function _callee4$(_context4) { | ||
while (1) { | ||
switch (_context4.prev = _context4.next) { | ||
case 0: | ||
// 用户下拉,至少保证小球转3圈 | ||
time = 1500 - (Date.now() - this.startRefreshTime); | ||
time = time > 0 ? time : 0; | ||
_context4.next = 4; | ||
return new Promise(function (r) { | ||
return setTimeout(r, time); | ||
}); | ||
case 4: | ||
this.status = STATUS.SHOWTEXT; | ||
this.setData({ | ||
status: STATUS.SHOWTEXT | ||
}); | ||
_context4.next = 8; | ||
return this.debCloseLoading(); | ||
case 8: | ||
case "end": | ||
return _context4.stop(); | ||
} | ||
} | ||
}, _callee4, this); | ||
})); | ||
function stopRefresh() { | ||
return _stopRefresh.apply(this, arguments); | ||
} | ||
return stopRefresh; | ||
}(), | ||
/** | ||
* 滚动到底部时触发 | ||
* @param {Object} param detail 事件 | ||
*/ | ||
scrollToLower: function scrollToLower(_ref4) { | ||
var detail = _ref4.detail; | ||
this.triggerEvent('scrolltolower', detail); | ||
}, | ||
setScrollTop: function setScrollTop(scrollTop) { | ||
this.setData({ | ||
scrollTop: scrollTop | ||
}); | ||
} | ||
}, | ||
created: function created() { | ||
var _this5 = this; | ||
created() { | ||
this.setData({ | ||
max: upx2dpx(this.data.maxDistance) | ||
}); | ||
this.setData({ | ||
max: (0, _px.upx2dpx)(this.data.maxDistance) | ||
}); | ||
this.clipText(this.data.text); // 记录用户下拉开始时间,到加载结束至少保证小球转3圈 | ||
this.clipText(this.data.text); | ||
// 记录用户下拉开始时间,到加载结束至少保证小球转3圈 | ||
this.startRefreshTime = 0; | ||
this.startRefreshTime = 0; // 滚动高度,用于计算是否触顶下拉 | ||
// 滚动高度,用于计算是否触顶下拉 | ||
this.scrollTop = 0; | ||
this.scrollTop = 0; // 手指开始位置 | ||
// 手指开始位置 | ||
this.startY = 0; | ||
this.startY = 0; // 上次结束位置 | ||
// 上次结束位置 | ||
this.lastOffsetY = 0; | ||
this.lastOffsetY = 0; // 手指移动位置 * 用这个来判断是否手机离开屏幕 | ||
// 手指移动位置 * 用这个来判断是否手机离开屏幕 | ||
this.offsetY = 0; | ||
this.offsetY = 0; // 0: 未开始 1: 加载中 2: 展示话术 | ||
// 0: 未开始 1: 加载中 2: 展示话术 | ||
this.status = STATUS.IDLE; | ||
this.status = STATUS.IDLE; // 是否正在关闭 | ||
// 是否正在关闭 | ||
this.closing = false; | ||
this.closing = false; // 循环检测是否要关闭loading | ||
// 循环检测是否要关闭loading | ||
this.debOffsetCheck = () => new Promise(resolve => { | ||
const timer = setInterval(() => { | ||
if (this.offsetY > this.data.loadingHeight) { | ||
return; | ||
} | ||
clearInterval(timer); | ||
resolve(); | ||
}, 300); | ||
}); | ||
this.debOffsetCheck = function () { | ||
return new Promise(function (resolve) { | ||
var timer = setInterval(function () { | ||
if (_this5.offsetY > _this5.data.loadingHeight) { | ||
return; | ||
} | ||
// 关闭loading bar; text显示时长: 800ms | ||
this.debCloseLoading = promiseDebounce(async drag => { | ||
await this.debOffsetCheck(); | ||
await new Promise(r => setTimeout(r, 800)); | ||
await this.closeLoading(); | ||
}, 100); | ||
} | ||
}); | ||
clearInterval(timer); | ||
resolve(); | ||
}, 300); | ||
}); | ||
}; // 关闭loading bar; text显示时长: 800ms | ||
this.debCloseLoading = (0, _index.promiseDebounce)( | ||
/*#__PURE__*/ | ||
function () { | ||
var _ref5 = (0, _asyncToGenerator2["default"])( | ||
/*#__PURE__*/ | ||
_regenerator["default"].mark(function _callee5(drag) { | ||
return _regenerator["default"].wrap(function _callee5$(_context5) { | ||
while (1) { | ||
switch (_context5.prev = _context5.next) { | ||
case 0: | ||
_context5.next = 2; | ||
return _this5.debOffsetCheck(); | ||
case 2: | ||
_context5.next = 4; | ||
return new Promise(function (r) { | ||
return setTimeout(r, 800); | ||
}); | ||
case 4: | ||
_context5.next = 6; | ||
return _this5.closeLoading(); | ||
case 6: | ||
case "end": | ||
return _context5.stop(); | ||
} | ||
} | ||
}, _callee5); | ||
})); | ||
return function (_x2) { | ||
return _ref5.apply(this, arguments); | ||
}; | ||
}(), 100); | ||
} | ||
}); |
{ | ||
"name": "page-status", | ||
"version": "1.0.0-alpha.1", | ||
"description": "空态/缺省组件", | ||
"main": "src/index.js", | ||
"scripts": { | ||
"test": "echo \"Error: no test specified\" && exit 1" | ||
}, | ||
"keywords": [], | ||
"author": "", | ||
"license": "ISC" | ||
} | ||
"name": "page-status", | ||
"version": "1.0.0-alpha.1", | ||
"description": "空态/缺省组件", | ||
"main": "src/index.js", | ||
"scripts": { | ||
"test": "echo \"Error: no test specified\" && exit 1" | ||
}, | ||
"keywords": [], | ||
"author": "", | ||
"license": "ISC" | ||
} | ||
@@ -5,7 +5,8 @@ { | ||
"description": "加载组件,可用于全屏和半屏。用于展示加载状态,点击加载、正在加载、加载完成、重新加载四种状态。", | ||
"codeSnap": "<spin></spin>", | ||
"codeSnap": "<spin status='1'></spin>", | ||
"groups": "layout", | ||
"fragement": "swanide://fragment/25af44248f8aad73b64e274ead38d6151577191316430", | ||
"demoCode": { | ||
"s": "<smt-spin status=\"{{status}}\">\n</smt-spin>", | ||
"js": "Page({\n data: {\n status: 0\n }\n});", | ||
"js": "Page({\n data: {\n status: 1\n }\n});", | ||
"css": "" | ||
@@ -16,2 +17,8 @@ }, | ||
{ | ||
"name": "status", | ||
"type": "Number", | ||
"description": "加载状态配置", | ||
"required": "true" | ||
}, | ||
{ | ||
"name": "theme", | ||
@@ -24,9 +31,2 @@ "type": "String", | ||
{ | ||
"name": "status", | ||
"type": "Number", | ||
"description": "加载状态配置,默认正在加载", | ||
"required": "false", | ||
"default": "1" | ||
}, | ||
{ | ||
"name": "textConfig", | ||
@@ -33,0 +33,0 @@ "type": "Array", |
@@ -10,4 +10,4 @@ #### 组件名称 | ||
|---|---|---|---|---| | ||
|status |Number |true||加载状态配置| | ||
|theme |String |false||主题配置,默认浅色;深色主题请指定dark| | ||
|status |Number |false|1|加载状态配置,默认正在加载| | ||
|textConfig |Array |false|['点击加载更多', '正在加载...', '已经到底啦', '加载失败 点击重新加载']|加载状态对应的文案| | ||
@@ -26,3 +26,3 @@ |secureBottom |Boolean |false|true|默认兼容iPhoneX 及以上型号底部安全区,非全屏可关闭| | ||
data: { | ||
status: 0 | ||
status: 1 | ||
} | ||
@@ -29,0 +29,0 @@ }); |
@@ -1,1 +0,1 @@ | ||
{"name":"component","label":"布局组件","type":"component","configPath":"./smart-design-config.json","version":"0.0.28-alpha.0"} | ||
{"name":"component","label":"布局组件","type":"component","configPath":"./smart-design-config.json","version":"0.0.26-alpha.0"} |
Sorry, the diff of this file is not supported yet
880658
2732
80