From aa98303cbe62b8ec96ac62e492da24a05604cae6 Mon Sep 17 00:00:00 2001 From: kawaiiz <690902636@qq.com> Date: Fri, 29 Jan 2021 14:46:59 +0800 Subject: [PATCH] =?UTF-8?q?210129=20=E5=88=A0=E9=99=A4=E9=A1=B9=E7=9B=AE?= =?UTF-8?q?=E4=BE=9D=E8=B5=96=EF=BC=8C=E6=B7=BB=E5=8A=A0scroll-x=E5=8A=9F?= =?UTF-8?q?=E8=83=BD=EF=BC=8C=E4=BF=AE=E6=94=B9readme.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 1 + .../index/components/parameter/parameter.js | 6 +++++ .../index/components/parameter/parameter.ts | 6 +++++ .../public/components/public/table/table.js | 1 - .../public/components/public/table/table.md | 24 +++++++++++++++---- .../public/components/public/table/table.ts | 2 +- 6 files changed, 34 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index bcc59bf..5fe20ab 100644 --- a/README.md +++ b/README.md @@ -18,6 +18,7 @@ |scrollViewHeight|控制可滚动区域高度。|string| 600rpx|false | |tipTitle| 无数据时的提示文本主标题 | string | 提示 | false | |tipSubtitle| 无数据时的提示文本副标题 | string | 暂无数据| false | +|scrollX| 是否需要X轴滚动。 | boolean | false| false | |select| 控制是否出现勾选。 | boolean | false| false | |selectKeys| 勾选的初始值 | any[] | []| false | |generic:action-td| 当列表项内具有操作列，需要在`columns`内添加`type:action`的一项，操作列的内容往往需要自定义，小程序不提供react,vue的`rander函数`，所以使用到了抽象节点，该属性指明抽象节点的组件。操作列位置可以不固定，点击事件由`bindclickaction`触发 | component |undefined | false | diff --git a/miniprogram/pages/index/components/parameter/parameter.js b/miniprogram/pages/index/components/parameter/parameter.js index 805ec60..e198fd4 100644 --- a/miniprogram/pages/index/components/parameter/parameter.js +++ b/miniprogram/pages/index/components/parameter/parameter.js @@ -90,6 +90,12 @@ Component({ type: 'string', init: `暂无数据`, require: false, + }, { + key: 'scrollX', + desc: '是否需要X轴滚动', + type: 'boolean', + init: `false`, + require: false, }, { key: 'select', desc: '控制是否出现勾选。', diff --git a/miniprogram/pages/index/components/parameter/parameter.ts b/miniprogram/pages/index/components/parameter/parameter.ts index 58dfcda..e3689fa 100644 --- a/miniprogram/pages/index/components/parameter/parameter.ts +++ b/miniprogram/pages/index/components/parameter/parameter.ts @@ -115,6 +115,12 @@ Component({ type: 'string', init: `暂无数据`, require: false, + }, { + key: 'scrollX', + desc: '是否需要X轴滚动', + type: 'boolean', + init: `false`, + require: false, }, { key: 'select', desc: '控制是否出现勾选。', diff --git a/miniprogram/public/components/public/table/table.js b/miniprogram/public/components/public/table/table.js index 4ad7a06..2ff2cd2 100644 --- a/miniprogram/public/components/public/table/table.js +++ b/miniprogram/public/components/public/table/table.js @@ -176,7 +176,6 @@ Component({ }); }, handleTouchEnd(e) { - console.log(e); const { scrollX, scrollTag } = this.data; if (!scrollX) return; diff --git a/miniprogram/public/components/public/table/table.md b/miniprogram/public/components/public/table/table.md index 9d648ea..5fe20ab 100644 --- a/miniprogram/public/components/public/table/table.md +++ b/miniprogram/public/components/public/table/table.md @@ -1,8 +1,12 @@ # 使用说明 -该组件具有 列表展示模式，勾选模式 +该组件具有 列表展示模式，勾选模式，展开行模式。 +1. 复制`/miniprogram/public/components/public`下面的三个组件，到你的公共组件文件夹下（其实这三个组件也是也可以合为一体，因为empty与load_more组件是可以单独使用的，所以没有放到table组件中） +2. 在需要使用的页面引入table组件即可。 -1. 属性介绍 +# API + +## prop | 参数 | 说明 | 类型 | 默认值 | 是否必填 | |-----|-----|-----|-----|-----| @@ -14,6 +18,7 @@ |scrollViewHeight|控制可滚动区域高度。|string| 600rpx|false | |tipTitle| 无数据时的提示文本主标题 | string | 提示 | false | |tipSubtitle| 无数据时的提示文本副标题 | string | 暂无数据| false | +|scrollX| 是否需要X轴滚动。 | boolean | false| false | |select| 控制是否出现勾选。 | boolean | false| false | |selectKeys| 勾选的初始值 | any[] | []| false | |generic:action-td| 当列表项内具有操作列，需要在`columns`内添加`type:action`的一项，操作列的内容往往需要自定义，小程序不提供react,vue的`rander函数`，所以使用到了抽象节点，该属性指明抽象节点的组件。操作列位置可以不固定，点击事件由`bindclickaction`触发 | component |undefined | false | @@ -25,7 +30,7 @@ |dynamicValue| 给自定义内容的动态值，用于改变状态 ，建议{value:放的数据} | object | {} |false | -2. 事件介绍 +## event |事件 | 解释| 类型| |-----|-----|-----| @@ -34,4 +39,15 @@ |bindclickaction| 点击抽象节点事件 |Function(e); e.detail.value = {type:(这个按钮的含义字段，如‘close’),index:(当前的行),item:(当前行的数据)};(这是我这里定义的结构，具体可以自己定义在action-td里)}| |bindcheckkey| 勾选事件 返回被勾选项的rowKey数组 |Function(e); e.detail.value = any[]//(数组内每一项是rowKey字段定义的数据的toString()结果)| |bindscrolltolower| 滚动触底 | Function() | -|bindscrolltoupper| 滚动触顶 | Function() | \ No newline at end of file +|bindscrolltoupper| 滚动触顶 | Function() | + +## column +列描述数据对象，是 columns 中的一项，Column 使用相同的 API。 + +|事件 | 解释| 类型| 必填| +|-----|-----|-----|-----| +|title|字段名中文含义|string| true| +|key|字段名|string| true| +|width|单元格宽度|string| false| +|type|判断字段是否是自定义组件|'action'/undefined | false| +|render|td内内容由函数返回 (value: any, item: any, index: number, data?: 当前页面的this.data) => any,// 设置内容|function| false| \ No newline at end of file diff --git a/miniprogram/public/components/public/table/table.ts b/miniprogram/public/components/public/table/table.ts index 497f4f8..3cf5e90 100644 --- a/miniprogram/public/components/public/table/table.ts +++ b/miniprogram/public/components/public/table/table.ts @@ -241,7 +241,7 @@ Component({ }, // 主要是为了监听横向滚动 handleTouchEnd(e) { - console.log(e) + // console.log(e) const { scrollX, scrollTag } = this.data if (!scrollX) return const { tag } = e.currentTarget.dataset