New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@smt-ui/component

Package Overview
Dependencies
Maintainers
8
Versions
150
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@smt-ui/component - npm Package Compare versions

Comparing version 0.0.29-alpha.0 to 0.0.30-alpha.0

4

package.json
{
"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|[&#39;点击加载更多&#39;, &#39;正在加载...&#39;, &#39;已经到底啦&#39;, &#39;加载失败 点击重新加载&#39;]|加载状态对应的文案|

@@ -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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc