@smt-ui/component - npm Package Compare versions

Comparing version 0.0.10-alpha.0 to 0.0.11-alpha.0

package.json

 {
   "name": "@smt-ui/component",
-  "version": "0.0.10-alpha.0",
+  "version": "0.0.11-alpha.0",
   "description": "extension base",
@@ -36,3 +36,3 @@ "author": "jialipeng <[e-mail]>",
   },
-  "gitHead": "54b91356eebe613c44b6542a16ce4740466aaa6a"
+  "gitHead": "914bc319e386ad7d5c0b117e901bedf306a883ce"
 }

smart-design-config.json

@@ -1,1 +0,1 @@
-{"npmPackageName":"@smt-ui/component","npmPackageVersion":"0.0.9-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","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":["bindfeeditemtap"]},"type":"component","doc":"https://smartprogram.baidu.com/docs/develop/component/smt-feed-item","demoUri":"https://b.bdstatic.com/searchbox/icms/searchbox/img/ide-qrcode/smt-feed-item.png","usingComponents":["@smt-ui/all/smt-feed-item/index"]},{"name":"feed","label":"feed 信息流","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":"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":"onrefresh","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，立即关闭加载，不弹出加载提示；例如接口异常，建义直接关闭加载","required":"false","default":""}],"events":[{"name":"scroll","type":"Event","description":"滚动时触发，返回当前组件的值","required":"false","default":"-"}]},"type":"component","doc":"https://smartprogram.baidu.com/docs/develop/component/feed","demoUri":"https://b.bdstatic.com/searchbox/icms/searchbox/img/ide-qrcode/feed.png","usingComponents":["@smt-ui/all/feed/index"]},{"name":"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/page-status","demoUri":"https://b.bdstatic.com/searchbox/icms/searchbox/img/ide-qrcode/page-status.png","usingComponents":["@smt-ui/all/page-status/index"]},{"name":"refresh","label":"刷新组件，可用于页面顶部，根据手势或点击加载按钮触发内容。提示：smt-feed组件提供完整的手势下拉加载过程，当前组件需根据参数offsetY改变状态","description":"刷新组件基本介绍","codeSnap":"<refresh></refresh>","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/refresh","demoUri":"https://b.bdstatic.com/searchbox/icms/searchbox/img/ide-qrcode/refresh.png","usingComponents":["@smt-ui/all/refresh/index"]}]}]}
+{"npmPackageName":"@smt-ui/component","npmPackageVersion":"0.0.10-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","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":["bindfeeditemtap"]},"type":"component","doc":"https://smartprogram.baidu.com/docs/develop/component/smt-feed-item","demoUri":"https://b.bdstatic.com/searchbox/icms/searchbox/img/ide-qrcode/smt-feed-item.png","usingComponents":["@smt-ui/all/smt-feed-item/index"]},{"name":"feed","label":"feed 信息流","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":"scroll","type":"Event","description":"滚动时触发，返回当前组件的值","required":"false","default":"-"}]},"type":"component","doc":"https://smartprogram.baidu.com/docs/develop/component/feed","demoUri":"https://b.bdstatic.com/searchbox/icms/searchbox/img/ide-qrcode/feed.png","usingComponents":["@smt-ui/all/feed/index"]},{"name":"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/page-status","demoUri":"https://b.bdstatic.com/searchbox/icms/searchbox/img/ide-qrcode/page-status.png","usingComponents":["@smt-ui/all/page-status/index"]},{"name":"refresh","label":"刷新组件，可用于页面顶部，根据手势或点击加载按钮触发内容。提示：smt-feed组件提供完整的手势下拉加载过程，当前组件需根据参数offsetY改变状态","description":"刷新组件基本介绍","codeSnap":"<refresh></refresh>","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/refresh","demoUri":"https://b.bdstatic.com/searchbox/icms/searchbox/img/ide-qrcode/refresh.png","usingComponents":["@smt-ui/all/refresh/index"]}]}]}

src/common/utils/index.js

@@ -15,3 +15,3 @@ /**
  */
-export const selComponent = async (context, selector) =>
+export const selComponent = (context, selector) =>
     new Promise((r, j) => {
@@ -18,0 +18,0 @@ if (!context || !selector) {

src/common/utils/px.js

@@ -8,13 +8,3 @@ /**
 /* global swan */
-/**
- * 平台信息
- */
-const systemInfo = (() => {
-    let info = {};
-    try {
-        info = swan.getSystemInfoSync();
-    }
-    catch (e) {}
-    return info;
-})();
+import {systemInfo} from './index';
 
@@ -98,1 +88,3 @@ // 屏幕宽度
 };
+
+

src/feed-item/src/index.js

@@ -42,3 +42,3 @@ /**
     },
-    attached() {
+    created() {
         // 解决iphoneX的图片bug
@@ -45,0 +45,0 @@ this.setData('showList', true);

src/feed/atomic-index.json

@@ -8,3 +8,3 @@ {
     "demoCode": {
-        "s": "<tabs\n        tabs-background-color=\"#3388ff\"\n        tabs-underline-color = \"#fff\"\n        tabs-inactive-text-color=\"#fff\"\n        tabs-active-text-color=\"#fff\"\n        bindtabchange=\"tabChange\"\n        active-name=\"{{activeName}}\">\n        <tab-item\n            s-for=\"item in ['下拉刷新', '自动刷新']\"\n            name=\"{{item}}\"\n            label=\"{{item}}\"\n        />\n    </tabs>\n    <!-- 下拉刷新 -->\n    <smt-feed\n        s-if=\"{{activeName === '下拉刷新'}}\"\n        class=\"smt-feed pull-down-refresh\"\n        pull-to-refresh\n        bind:onrefresh=\"onRefresh\"\n        bind:scrolltolower=\"scrollToLower\"\n        text=\"{{text}}\"\n    >\n        <list list=\"{{list}}\"></list>\n        <smt-spin status=\"{{status}}\" bind:tap=\"reload\"></smt-spin>\n    </smt-feed>\n\n    <!-- 自动刷新 -->\n    <smt-feed\n        s-elif=\"{{activeName === '自动刷新'}}\"\n        class=\"smt-feed auto-refresh\"\n        text=\"{{text}}\"\n    >\n        <list list=\"{{list}}\"></list>\n    </smt-feed>",
+        "s": "<tabs\n        tabs-background-color=\"#3388ff\"\n        tabs-underline-color = \"#fff\"\n        tabs-inactive-text-color=\"#fff\"\n        tabs-active-text-color=\"#fff\"\n        bindtabchange=\"tabChange\"\n        active-name=\"{{activeName}}\">\n        <tab-item\n            s-for=\"item in ['下拉刷新', '自动刷新']\"\n            name=\"{{item}}\"\n            label=\"{{item}}\"\n        />\n    </tabs>\n    <!-- 下拉刷新 -->\n    <smt-feed\n        s-if=\"{{activeName === '下拉刷新'}}\"\n        class=\"smt-feed pull-down-refresh\"\n        pull-to-refresh\n        bind:refresh=\"onRefresh\"\n        bind:scrolltolower=\"scrollToLower\"\n        text=\"{{text}}\"\n    >\n        <list list=\"{{list}}\"></list>\n        <smt-spin status=\"{{status}}\" bind:tap=\"reload\"></smt-spin>\n    </smt-feed>\n\n    <!-- 自动刷新 -->\n    <smt-feed\n        s-elif=\"{{activeName === '自动刷新'}}\"\n        class=\"smt-feed auto-refresh\"\n        text=\"{{text}}\"\n    >\n        <list list=\"{{list}}\"></list>\n    </smt-feed>",
         "js": "import {selComponent, syncSetData} from '../../../../../src/common/utils/index';\n\nPage({\n    data: {\n        activeName: '下拉刷新',\n        list: Array.from({length: 15}, (_, i) => i),\n        text: '',\n        status: 1\n    },\n\n    tabChange({detail}) {\n        console.log(detail);\n        this.setData({\n            activeName: detail.name\n        },\n        () => this.autoRefresh(detail.name));\n    },\n\n    /**\n     * 请求时长1200ms\n     */\n    async fetchData(ms = 1200) {\n        const empty = Math.random() > .7;\n        const fail = Math.random() > .9;\n        const data = {\n            code: fail ? -1 : 0,\n            data: fail || empty ? null : Array.from({length: Math.random() * 10 + 10 | 0}, (_, i) => i)\n        };\n        return new Promise(r => setTimeout(() => r(data), ms));\n    },\n\n    async onRefresh() {\n        console.log('触发 onRefresh');\n        const refresh = await selComponent(this, '.pull-down-refresh');\n        const {code, data: list} = await this.fetchData();\n        if (code !== 0) {\n            swan.showToast({title: '网络错误', mask: true, icon: 'none'});\n            refresh.closeLoading();\n            return;\n        }\n        await syncSetData(this, {\n            status: 1,\n            list: list || this.data.list,\n            text: list ? `本次共加载${list.length}条数据！` : '暂时没有更新，休息一下'\n        });\n        refresh.stopRefresh();\n    },\n\n    async autoRefresh() {\n        if (this.data.activeName === '自动刷新') {\n            const clkRefresh = await selComponent(this, '.auto-refresh');\n            const autoLoad = async () => {\n                clkRefresh.startRefresh();\n                const {code, data: list} = await this.fetchData();\n                if (code !== 0) {\n                    swan.showToast({title: '网络错误', mask: true, icon: 'none'});\n                    clkRefresh.closeLoading();\n                    return;\n                }\n                await syncSetData(this, {\n                    status: 0,\n                    list: list || this.data.list,\n                    text: list ? `本次共加载${list.length}条数据！` : '暂时没有更新，休息一下'\n                });\n                await new Promise(r => setTimeout(r, 1500)); // 1500ms 之后再关闭： 手动关闭不需要等小球转3圈\n                await clkRefresh.stopRefresh();\n                await new Promise(r => setTimeout(r, 500)); // 加载完一轮等500ms\n                this.data.activeName === '自动刷新' && await autoLoad();\n            };\n            autoLoad();\n        }\n    },\n\n    async scrollToLower() {\n        const {code, data: list} = await this.fetchData();\n        const fail = code !== 0;\n        const end = !list;\n        if (fail || end) {\n            this.setData({\n                status: fail ? 3 : 2\n            });\n            return;\n        }\n        await syncSetData(this, {\n            list: list.concat(this.data.list || [])\n        });\n    },\n\n    async reload() {\n        if (this.data.status !== 0 && this.data.status !== 3) {\n            return;\n        }\n        await syncSetData(this, {status: 1});\n        this.scrollToLower();\n    }\n});\n",
@@ -23,2 +23,9 @@ "css": ".smt-feed {\n    display: block;\n    height: calc(100vh - 40px);\n}"
             {
+                "name": "loadingHeight",
+                "type": "Number",
+                "description": "加载、话术区域高度，单位为设备px，转换方法: import {upx2dpx} from '@smt-ui/component/src/common/utils/px';",
+                "required": "false",
+                "default": "192px(设计稿宽度为1242)"
+            },
+            {
                 "name": "pullToRefresh",
@@ -45,3 +52,3 @@ "type": "Boolean",
             {
-                "name": "onrefresh",
+                "name": "refresh",
                 "type": "EventHandle",
@@ -69,5 +76,54 @@ "description": "手势滑动触发加载时，响应该onRefresh事件; 通过调用api加载，不会触发该事件",
                 "type": "EventHandle",
-                "description": "手动调用该api，立即关闭加载，不弹出加载提示；例如接口异常，建义直接关闭加载",
+                "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": "-"
             }
@@ -74,0 +130,0 @@ ],

src/feed/README.md

@@ -11,9 +11,17 @@ #### 组件名称
 |theme |String |false|-|主题配置，默认浅色；深色主题请指定dark|
+|loadingHeight |Number |false|192px(设计稿宽度为1242)|加载、话术区域高度，单位为设备px，转换方法: import {upx2dpx} from '@smt-ui/component/src/common/utils/px';|
 |pullToRefresh |Boolean |false|false|是否开启手势下拉刷新; 默认只能通过组件api调起|
 |lowerThreshold |Number |false|150px（设备上的px）|触发scrolltolower事件的阈值|
 |text |String |false|建议最多显示18个汉字，超出内容截断|加载成功时的展示话术|
-|onrefresh |EventHandle |false||手势滑动触发加载时，响应该onRefresh事件; 通过调用api加载，不会触发该事件|
+|refresh |EventHandle |false||手势滑动触发加载时，响应该onRefresh事件; 通过调用api加载，不会触发该事件|
 |startRefresh |EventHandle |false||手动调用该api，触发加载|
 |stopRefresh |EventHandle |false||手动调用该api，停止加载，并弹出加载提示（对应属性text）；可使用await等待关闭动画结束|
-|closeLoading |EventHandle |false||手动调用该api，立即关闭加载，不弹出加载提示；例如接口异常，建义直接关闭加载|
+|closeLoading |EventHandle |false||手动调用该api，立即关闭加载，不弹出加载提示；例如接口异常，建义直接关闭加载（小球交替一次大约为500ms，调用前可加延时避免关闭太快）|
+|ext-cls-feed |externalClass |false|-|组件整体class名|
+|ext-cls-loading |externalClass |false|-|加载区域class名|
+|ext-cls-circle-left |externalClass |false|-|加载中左侧小球class名|
+|ext-cls-circle-right |externalClass |false|-|加载中右侧小球class名|
+|ext-cls-content |externalClass |false|-|滚动区域class名|
+|ext-cls-result |externalClass |false|-|加载话术外框class名|
+|ext-cls-result-text |externalClass |false|-|加载话术文字class名|
 
@@ -41,3 +49,3 @@ #### 代码示例
         pull-to-refresh
-        bind:onrefresh="onRefresh"
+        bind:refresh="onRefresh"
         bind:scrolltolower="scrollToLower"
@@ -44,0 +52,0 @@ text="{{text}}"

src/feed/src/index.js

 /**
- * @file index.js
+ * @file 下拉刷新
  * @author LipengJia ([e-mail])
- * @desc 下拉刷新
+ * @date 2019-12-19
  */
 import {upx2dpx} from '../../common/utils/px';
-import {calcCircle, linearAccu, promiseDebounce, systemInfo} from '../../common/utils/index';
-const {windowHeight} = systemInfo;
+import {calcCircle, linearAccu, promiseDebounce, syncSetData} from '../../common/utils/index';
 
+const STATUS = {
+    IDLE: 0,
+    LOADING: 1,
+    SHOWTEXT: 2
+};
+
 Component({
+    externalClasses: [
+        'smt-feed-container',
+        'smt-feed-loading',
+        'smt-feed-content',
 
-    externalClasses: [
-        'ext-feed',
-        'ext-header',
-        'ext-content'
+        'smt-refresh-circle-left',
+        'smt-refresh-circle-right',
+        'smt-refresh-result-container',
+        'smt-refresh-result-text'
     ],
@@ -25,2 +34,13 @@
 
+        // loading加载区域高度 * 必须是device px
+        loadingHeight: {
+            type: Number,
+            value: upx2dpx(192),
+            observer(n) {
+                if (typeof n !== 'number') {
+                    throw 'loadingHeight 必须是数字类型!否则下拉可造成卡顿闪屏';
+                }
+            }
+        },
+
         // 距底部距离 触发 scrolltolower 事件
@@ -53,5 +73,2 @@ lowerThreshold: {
     data: {
-        // loading加载区域高度
-        loadingHgt: upx2dpx(192),
-
         circle: {
@@ -80,3 +97,3 @@ // 小球尺寸 * device px防止变形
         // 0: 未开始 1: 加载中 2: 展示话术
-        status: 0,
+        status: STATUS.IDLE,
 
@@ -122,3 +139,3 @@ // 滚动高度
             // ue规定： 如果api调用下拉刷新，则不启用手势刷新
-            const disabled = !this.data.pullToRefresh && !manual && this.status === 0;
+            const disabled = !this.data.pullToRefresh && !manual && this.status === STATUS.LOADING;
 
@@ -141,7 +158,8 @@ // 禁用多点触控
                     }
-                    const pullDown = y - this.startY > 0;
-                    let offsetY = this.offsetY = (y - this.startY) * .6 + this.lastOffsetY;
+                    const distance = y - this.startY;
+                    const pullDown = distance > 0;
+                    let offsetY = this.offsetY = distance * .6 + this.lastOffsetY;
                     // 没loading动画时下拉计算动画
-                    if (this.status === 0) {
-                        const circleInfo = calcCircle(offsetY);
+                    if (this.status === STATUS.IDLE) {
+                        const circleInfo = calcCircle(offsetY, this.data.loadingHeight);
                         circleInfo && this.setData(circleInfo);
@@ -152,8 +170,8 @@ }
                     if (!pullDown && Math.abs(y - this.startY) > 20) {
-                        this.hideCircle();
+                        this.fadeCircle();
                         this.setData({
-                            status: 0,
+                            status: STATUS.LOADING,
                             offsetY: 0
                         });
-                        this.status = 0;
+                        this.status = STATUS.LOADING;
                         this.lastOffsetY = this.offsetY = 0;
@@ -188,16 +206,16 @@ return;
                     // 判断是否加载
-                    const shouldLoad = this.scrollTop <= 0 && this.offsetY >= this.data.loadingHgt;
+                    const shouldLoad = this.scrollTop <= 0 && this.offsetY >= this.data.loadingHeight;
                     let result = 0;
                     if (shouldLoad) {
                         // 只有status === 0时，触发加载
-                        if (this.status === 0) {
+                        if (this.status === STATUS.IDLE) {
                             this.startRefreshTime = Date.now();
-                            this.triggerEvent('onrefresh');
-                            this.setData({status: 1});
-                            this.status = 1;
+                            this.triggerEvent('refresh');
+                            this.setData({status: STATUS.LOADING});
+                            this.status = STATUS.LOADING;
                         }
-                        result = this.data.loadingHgt;
+                        result = this.data.loadingHeight;
                     }
                     else {
-                        this.hideCircle();
+                        this.fadeCircle();
                     }
@@ -221,5 +239,5 @@ this.setData({
          */
-        async hideCircle() {
-            return await linearAccu(async (y, callback) => {
-                const circleInfo = calcCircle(y);
+        fadeCircle() {
+            return linearAccu(async (y, callback) => {
+                const circleInfo = calcCircle(y, this.data.loadingHeight);
                 if (circleInfo) {
@@ -231,3 +249,3 @@ this.setData(circleInfo, callback);
                 }
-            }, this.data.loadingHgt, 0);
+            }, this.data.loadingHeight, 0);
         },
@@ -238,22 +256,17 @@
          */
-        closeLoading() {
-            return new Promise(r => {
-                this.closing = true;
-                // 防止关闭后，touchend还在触发中
-                const resetFlag = () => {
-                    this.setData({
-                        status: 0
-                    }, () => {
-                        this.status = 0;
-                        this.lastOffsetY = this.offsetY = 0;
-                        this.closing = false;
-                        r();
-                    });
-                };
-                // 关闭动画200ms, 需要延时
-                this.offsetY = 0;
-                this.setData({
-                    offsetY: 0
-                }, () => setTimeout(resetFlag, 200));
-            });
+        async closeLoading() {
+            // 防止关闭后，touchend还在触发中
+            this.closing = true;
+            this.offsetY = 0;
+            if (!this.data.enableScroll) {
+                await syncSetData(this, {enableScroll: true});
+            }
+            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;
         },
@@ -266,10 +279,10 @@
             // 未关闭又调用
-            if (this.status !== 0) {
+            if (this.status !== STATUS.IDLE) {
                 this.debCloseLoading.cancel();
                 await this.closeLoading();
             }
-            this.status = 1;
+            this.status = STATUS.LOADING;
             this.setData({
                 enableScroll: false,
-                status: 1
+                status: STATUS.LOADING
             }, () => {
@@ -279,3 +292,3 @@ if (this.closing) {
                 }
-                this.offsetY = this.data.loadingHgt;
+                this.offsetY = this.data.loadingHeight;
                 this.touchHdl({type: 'touchend', manual: true});
@@ -293,5 +306,5 @@ });
             await new Promise(r => setTimeout(r, time));
-            this.status = 2;
+            this.status = STATUS.SHOWTEXT;
             this.setData({
-                status: 2
+                status: STATUS.SHOWTEXT
             });
@@ -338,3 +351,3 @@ await this.debCloseLoading();
         // 0: 未开始 1: 加载中 2: 展示话术
-        this.status = 0;
+        this.status = STATUS.IDLE;
 
@@ -347,3 +360,3 @@ // 是否正在关闭
             const timer = setInterval(() => {
-                if (this.offsetY > this.data.loadingHgt) {
+                if (this.offsetY > this.data.loadingHeight) {
                     return;
@@ -350,0 +363,0 @@ }

src/refresh/atomic-index.json

@@ -8,3 +8,3 @@ {
     "demoCode": {
-        "s": "<tabs\n        tabs-background-color=\"#3388ff\"\n        tabs-underline-color = \"#fff\"\n        tabs-inactive-text-color=\"#fff\"\n        tabs-active-text-color=\"#fff\"\n        bindtabchange=\"tabChange\"\n        active-name=\"{{activeName}}\">\n        <tab-item\n            s-for=\"item in ['下拉刷新', '自动刷新']\"\n            name=\"{{item}}\"\n            label=\"{{item}}\"\n        />\n    </tabs>\n    <!-- 下拉刷新 -->\n    <smt-feed\n        s-if=\"{{activeName === '下拉刷新'}}\"\n        class=\"smt-feed pull-down-refresh\"\n        pull-to-refresh\n        bind:onrefresh=\"onRefresh\"\n        bind:scrolltolower=\"scrollToLower\"\n        text=\"{{text}}\"\n    >\n        <list list=\"{{list}}\"></list>\n        <smt-spin status=\"{{status}}\" bind:tap=\"reload\"></smt-spin>\n    </smt-feed>\n\n    <!-- 自动刷新 -->\n    <smt-feed\n        s-elif=\"{{activeName === '自动刷新'}}\"\n        class=\"smt-feed auto-refresh\"\n        text=\"{{text}}\"\n    >\n        <list list=\"{{list}}\"></list>\n    </smt-feed>",
+        "s": "<tabs\n        tabs-background-color=\"#3388ff\"\n        tabs-underline-color = \"#fff\"\n        tabs-inactive-text-color=\"#fff\"\n        tabs-active-text-color=\"#fff\"\n        bindtabchange=\"tabChange\"\n        active-name=\"{{activeName}}\">\n        <tab-item\n            s-for=\"item in ['下拉刷新', '自动刷新']\"\n            name=\"{{item}}\"\n            label=\"{{item}}\"\n        />\n    </tabs>\n    <!-- 下拉刷新 -->\n    <smt-feed\n        s-if=\"{{activeName === '下拉刷新'}}\"\n        class=\"smt-feed pull-down-refresh\"\n        pull-to-refresh\n        bind:refresh=\"onRefresh\"\n        bind:scrolltolower=\"scrollToLower\"\n        text=\"{{text}}\"\n    >\n        <list list=\"{{list}}\"></list>\n        <smt-spin status=\"{{status}}\" bind:tap=\"reload\"></smt-spin>\n    </smt-feed>\n\n    <!-- 自动刷新 -->\n    <smt-feed\n        s-elif=\"{{activeName === '自动刷新'}}\"\n        class=\"smt-feed auto-refresh\"\n        text=\"{{text}}\"\n    >\n        <list list=\"{{list}}\"></list>\n    </smt-feed>",
         "js": "import {selComponent, syncSetData} from '../../../../../src/common/utils/index';\n\nPage({\n    data: {\n        activeName: '下拉刷新',\n        list: Array.from({length: 15}, (_, i) => i),\n        text: '',\n        status: 1\n    },\n\n    tabChange({detail}) {\n        console.log(detail);\n        this.setData({\n            activeName: detail.name\n        },\n        () => this.autoRefresh(detail.name));\n    },\n\n    /**\n     * 请求时长1200ms\n     */\n    async fetchData(ms = 1200) {\n        const empty = Math.random() > .7;\n        const fail = Math.random() > .9;\n        const data = {\n            code: fail ? -1 : 0,\n            data: fail || empty ? null : Array.from({length: Math.random() * 10 + 10 | 0}, (_, i) => i)\n        };\n        return new Promise(r => setTimeout(() => r(data), ms));\n    },\n\n    async onRefresh() {\n        console.log('触发 onRefresh');\n        const refresh = await selComponent(this, '.pull-down-refresh');\n        const {code, data: list} = await this.fetchData();\n        if (code !== 0) {\n            swan.showToast({title: '网络错误', mask: true, icon: 'none'});\n            refresh.closeLoading();\n            return;\n        }\n        await syncSetData(this, {\n            status: 1,\n            list: list || this.data.list,\n            text: list ? `本次共加载${list.length}条数据！` : '暂时没有更新，休息一下'\n        });\n        refresh.stopRefresh();\n    },\n\n    async autoRefresh() {\n        if (this.data.activeName === '自动刷新') {\n            const clkRefresh = await selComponent(this, '.auto-refresh');\n            const autoLoad = async () => {\n                clkRefresh.startRefresh();\n                const {code, data: list} = await this.fetchData();\n                if (code !== 0) {\n                    swan.showToast({title: '网络错误', mask: true, icon: 'none'});\n                    clkRefresh.closeLoading();\n                    return;\n                }\n                await syncSetData(this, {\n                    status: 0,\n                    list: list || this.data.list,\n                    text: list ? `本次共加载${list.length}条数据！` : '暂时没有更新，休息一下'\n                });\n                await new Promise(r => setTimeout(r, 1500)); // 1500ms 之后再关闭： 手动关闭不需要等小球转3圈\n                await clkRefresh.stopRefresh();\n                await new Promise(r => setTimeout(r, 500)); // 加载完一轮等500ms\n                this.data.activeName === '自动刷新' && await autoLoad();\n            };\n            autoLoad();\n        }\n    },\n\n    async scrollToLower() {\n        const {code, data: list} = await this.fetchData();\n        const fail = code !== 0;\n        const end = !list;\n        if (fail || end) {\n            this.setData({\n                status: fail ? 3 : 2\n            });\n            return;\n        }\n        await syncSetData(this, {\n            list: list.concat(this.data.list || [])\n        });\n    },\n\n    async reload() {\n        if (this.data.status !== 0 && this.data.status !== 3) {\n            return;\n        }\n        await syncSetData(this, {status: 1});\n  "
@@ -11,0 +11,0 @@ },

src/refresh/README.md

@@ -37,3 +37,3 @@ #### 组件名称
         pull-to-refresh
-        bind:onrefresh="onRefresh"
+        bind:refresh="onRefresh"
         bind:scrolltolower="scrollToLower"
@@ -40,0 +40,0 @@ text="{{text}}"

src/refresh/src/index.js

 /**
- * @file index.js
+ * @file 下拉刷新
  * @author LipengJia ([e-mail])
- * @desc 下拉刷新
+ * @date 2019-12-19
  */
@@ -12,7 +12,7 @@
     externalClasses: [
-        'ext-refresh',
-        'ext-circle-left',
-        'ext-circle-right',
-        'ext-result',
-        'ext-result-text'
+        'smt-refresh-container',
+        'smt-refresh-circle-left',
+        'smt-refresh-circle-right',
+        'smt-refresh-result',
+        'smt-refresh-result-text'
     ],
@@ -28,3 +28,3 @@
         // loading加载区域高度
-        loadingHgt: {
+        loadingHeight: {
             type: Number,
@@ -39,3 +39,3 @@ value: upx2dpx(192)
             observer(n) {
-                const circleInfo = calcCircle(n, this.data.loadingHgt);
+                const circleInfo = calcCircle(n, this.data.loadingHeight);
                 if (circleInfo) {
@@ -42,0 +42,0 @@ this.setData(circleInfo);

src/spin/src/index.js

 /**
- * @file index.js
+ * @file 上滑加载
  * @author huangzilong([e-mail])
- * @desc 上滑加载
+ * @date 2019-12-19
  */
@@ -10,3 +10,3 @@
 Component({
-    externalClasses: ['custom-class'],
+    externalClasses: ['smt-spin-wrap', 'smt-spin-text'],
 
@@ -29,2 +29,7 @@ properties: {
             value: ''
+        },
+
+        secureBottom: {
+            type: Boolean,
+            value: true
         }
@@ -31,0 +36,0 @@ },

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

676826

increased by207.22%

Number of package files

63

increased by1.61%

Lines of code

15366

increased by666%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes