From 597b107cf781f72a123f9a059ab3c21cb8e5b8c3 Mon Sep 17 00:00:00 2001 From: limqhz Date: Wed, 16 Nov 2022 16:49:45 +0800 Subject: [PATCH] project init --- app.json | 7 +- components/behaviors/dom.d.ts | 2 - components/behaviors/dom.js | 27 --- components/behaviors/touch.d.ts | 2 - components/behaviors/touch.js | 35 --- components/cell/README.md | 57 ----- components/cell/cell.d.ts | 14 -- components/cell/cell.js | 51 ----- components/cell/cell.json | 6 - components/cell/cell.wxml | 40 ---- components/cell/cell.wxss | 121 ----------- components/cell/props.d.ts | 3 - components/cell/props.js | 51 ----- components/cell/type.d.ts | 72 ------- components/cell/type.js | 1 - components/mixins/page-scroll.d.ts | 7 - components/mixins/page-scroll.js | 50 ----- components/mixins/transition.d.ts | 1 - components/mixins/transition.js | 123 ----------- components/scroll/index.js | 213 ++++++++++++++++++ components/scroll/index.json | 4 + components/scroll/index.scss | 300 ++++++++++++++++++++++++++ components/scroll/index.wxml | 79 +++++++ components/scroll/index.wxss | 196 +++++++++++++++++ components/sticky/README.md | 56 ----- components/sticky/index.d.ts | 3 - components/sticky/index.js | 3 - components/sticky/props.d.ts | 3 - components/sticky/props.js | 21 -- components/sticky/sticky.d.ts | 30 --- components/sticky/sticky.js | 118 ---------- components/sticky/sticky.json | 4 - components/sticky/sticky.wxml | 5 - components/sticky/sticky.wxss | 33 --- components/sticky/type.d.ts | 27 --- components/sticky/type.js | 2 - components/swipe-cell/README.md | 46 ---- components/swipe-cell/props.d.ts | 3 - components/swipe-cell/props.js | 17 -- components/swipe-cell/swipe-cell.d.ts | 23 -- components/swipe-cell/swipe-cell.js | 77 ------- components/swipe-cell/swipe-cell.json | 3 - components/swipe-cell/swipe-cell.wxml | 46 ---- components/swipe-cell/swipe-cell.wxs | 176 --------------- components/swipe-cell/swipe-cell.wxss | 45 ---- components/swipe-cell/type.d.ts | 30 --- components/swipe-cell/type.js | 3 - components/tab/index.js | 126 +++++++++++ components/tab/index.json | 3 + components/tab/index.scss | 67 ++++++ components/tab/index.wxml | 19 ++ components/tab/index.wxss | 45 ++++ components/tabs/README.en-US.md | 34 --- components/tabs/README.md | 141 ------------ components/tabs/props.d.ts | 3 - components/tabs/props.js | 35 --- components/tabs/tab-panel-props.d.ts | 3 - components/tabs/tab-panel-props.js | 21 -- components/tabs/tab-panel.d.ts | 17 -- components/tabs/tab-panel.js | 54 ----- components/tabs/tab-panel.json | 4 - components/tabs/tab-panel.wxml | 9 - components/tabs/tab-panel.wxss | 37 ---- components/tabs/tabs.d.ts | 49 ----- components/tabs/tabs.js | 241 --------------------- components/tabs/tabs.json | 6 - components/tabs/tabs.wxml | 53 ----- components/tabs/tabs.wxs | 24 --- components/tabs/tabs.wxss | 175 --------------- components/tabs/type.d.ts | 65 ------ components/tabs/type.js | 1 - images/add.png | Bin 0 -> 1562 bytes pages/foot-tab/foot-tab.json | 2 + pages/today/index.js | 148 ++++++++++--- pages/today/index.json | 4 +- pages/today/index.wxml | 71 +++--- pages/today/index.wxss | 63 +++--- utils/api.js | 2 +- 78 files changed, 1234 insertions(+), 2524 deletions(-) delete mode 100644 components/behaviors/dom.d.ts delete mode 100644 components/behaviors/dom.js delete mode 100644 components/behaviors/touch.d.ts delete mode 100644 components/behaviors/touch.js delete mode 100644 components/cell/README.md delete mode 100644 components/cell/cell.d.ts delete mode 100644 components/cell/cell.js delete mode 100644 components/cell/cell.json delete mode 100644 components/cell/cell.wxml delete mode 100644 components/cell/cell.wxss delete mode 100644 components/cell/props.d.ts delete mode 100644 components/cell/props.js delete mode 100644 components/cell/type.d.ts delete mode 100644 components/cell/type.js delete mode 100644 components/mixins/page-scroll.d.ts delete mode 100644 components/mixins/page-scroll.js delete mode 100644 components/mixins/transition.d.ts delete mode 100644 components/mixins/transition.js create mode 100644 components/scroll/index.js create mode 100644 components/scroll/index.json create mode 100644 components/scroll/index.scss create mode 100644 components/scroll/index.wxml create mode 100644 components/scroll/index.wxss delete mode 100644 components/sticky/README.md delete mode 100644 components/sticky/index.d.ts delete mode 100644 components/sticky/index.js delete mode 100644 components/sticky/props.d.ts delete mode 100644 components/sticky/props.js delete mode 100644 components/sticky/sticky.d.ts delete mode 100644 components/sticky/sticky.js delete mode 100644 components/sticky/sticky.json delete mode 100644 components/sticky/sticky.wxml delete mode 100644 components/sticky/sticky.wxss delete mode 100644 components/sticky/type.d.ts delete mode 100644 components/sticky/type.js delete mode 100644 components/swipe-cell/README.md delete mode 100644 components/swipe-cell/props.d.ts delete mode 100644 components/swipe-cell/props.js delete mode 100644 components/swipe-cell/swipe-cell.d.ts delete mode 100644 components/swipe-cell/swipe-cell.js delete mode 100644 components/swipe-cell/swipe-cell.json delete mode 100644 components/swipe-cell/swipe-cell.wxml delete mode 100644 components/swipe-cell/swipe-cell.wxs delete mode 100644 components/swipe-cell/swipe-cell.wxss delete mode 100644 components/swipe-cell/type.d.ts delete mode 100644 components/swipe-cell/type.js create mode 100644 components/tab/index.js create mode 100644 components/tab/index.json create mode 100644 components/tab/index.scss create mode 100644 components/tab/index.wxml create mode 100644 components/tab/index.wxss delete mode 100644 components/tabs/README.en-US.md delete mode 100644 components/tabs/README.md delete mode 100644 components/tabs/props.d.ts delete mode 100644 components/tabs/props.js delete mode 100644 components/tabs/tab-panel-props.d.ts delete mode 100644 components/tabs/tab-panel-props.js delete mode 100644 components/tabs/tab-panel.d.ts delete mode 100644 components/tabs/tab-panel.js delete mode 100644 components/tabs/tab-panel.json delete mode 100644 components/tabs/tab-panel.wxml delete mode 100644 components/tabs/tab-panel.wxss delete mode 100644 components/tabs/tabs.d.ts delete mode 100644 components/tabs/tabs.js delete mode 100644 components/tabs/tabs.json delete mode 100644 components/tabs/tabs.wxml delete mode 100644 components/tabs/tabs.wxs delete mode 100644 components/tabs/tabs.wxss delete mode 100644 components/tabs/type.d.ts delete mode 100644 components/tabs/type.js create mode 100644 images/add.png diff --git a/app.json b/app.json index e13ed22..44e5032 100644 --- a/app.json +++ b/app.json @@ -7,12 +7,7 @@ "pages/message/index" ], "usingComponents": { - "t-tab-bar": "/components/tab-bar/tab-bar", - "t-tab-bar-item": "/components/tab-bar/tab-bar-item", - "t-cell": "/components/cell/cell", - "t-swipe-cell": "/components/swipe-cell/swipe-cell", - "t-tabs": "/components/tabs/tabs", - "t-tab-panel": "/components/tabs/tab-panel" + "t-icon": "/components/icon/icon" }, "window": { "backgroundTextStyle": "light", diff --git a/components/behaviors/dom.d.ts b/components/behaviors/dom.d.ts deleted file mode 100644 index ae80eca..0000000 --- a/components/behaviors/dom.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare const _default: string; -export default _default; diff --git a/components/behaviors/dom.js b/components/behaviors/dom.js deleted file mode 100644 index 4aa85ff..0000000 --- a/components/behaviors/dom.js +++ /dev/null @@ -1,27 +0,0 @@ -export default Behavior({ - methods: { - gettingBoundingClientRect(selector, all) { - return new Promise((resolve, reject) => { - try { - wx.createSelectorQuery() - .in(this)[all ? 'selectAll' : 'select'](selector) - .boundingClientRect((rect) => { - if (all && Array.isArray(rect) && rect.length) { - resolve(rect); - } - else if (!all && rect) { - resolve(rect); - } - else { - reject(); - } - }) - .exec(); - } - catch (err) { - reject(err); - } - }); - }, - }, -}); diff --git a/components/behaviors/touch.d.ts b/components/behaviors/touch.d.ts deleted file mode 100644 index ae80eca..0000000 --- a/components/behaviors/touch.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare const _default: string; -export default _default; diff --git a/components/behaviors/touch.js b/components/behaviors/touch.js deleted file mode 100644 index cbabccc..0000000 --- a/components/behaviors/touch.js +++ /dev/null @@ -1,35 +0,0 @@ -const MinDistance = 10; -const getDirection = (x, y) => { - if (x > y && x > MinDistance) { - return 'horizontal'; - } - if (y > x && y > MinDistance) { - return 'vertical'; - } - return ''; -}; -export default Behavior({ - methods: { - resetTouchStatus() { - this.direction = ''; - this.deltaX = 0; - this.deltaY = 0; - this.offsetX = 0; - this.offsetY = 0; - }, - touchStart(event) { - this.resetTouchStatus(); - const [touch] = event.touches; - this.startX = touch.clientX; - this.startY = touch.clientY; - }, - touchMove(event) { - const [touch] = event.touches; - this.deltaX = touch.clientX - this.startX; - this.deltaY = touch.clientY - this.startY; - this.offsetX = Math.abs(this.deltaX); - this.offsetY = Math.abs(this.deltaY); - this.direction = getDirection(this.offsetX, this.offsetY); - }, - }, -}); diff --git a/components/cell/README.md b/components/cell/README.md deleted file mode 100644 index 4bdc541..0000000 --- a/components/cell/README.md +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Cell 单元格 -description: 用于各个类别行的信息展示。 -spline: data -isComponent: true ---- - - -## 引入 - -全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。 - -```json -"usingComponents": { - "t-cell": "tdesign-miniprogram/cell/cell" -} -``` - -## 代码演示 - -### 单行单元格 - - - -{{ base }} - -### 多行单元格 - - - -{{ multiple }} - -## API -### Cell Props - -名称 | 类型 | 默认值 | 说明 | 必传 --- | -- | -- | -- | -- -align | String | middle | 内容的对齐方式，默认居中对齐。可选项：top/middle/bottom | N -arrow | Boolean | false | 是否显示右侧箭头 | N -bordered | Boolean | true | 是否显示下边框 | N -description | String / Slot | - | 下方内容描述 | N -external-classes | Array | - | 组件类名，分别用于设置 组件外层类名、标题类名、下方描述内容类名、右侧说明文字类名、激活态类名、图片类名、左侧内容、左侧图标类名、右侧内容、右侧图标类名 等。`['t-class', 't-class-title', 't-class-description', 't-class-note', 't-class-hover', 't-class-image', 't-class-left', 't-class-left-icon', 't-class-right', 't-class-right-icon']` | N -hover | Boolean | - | 是否开启点击反馈 | N -image | String / Slot | - | 主图 | N -jump-type | String | navigateTo | 链接跳转类型。可选项：switchTab/reLaunch/redirectTo/navigateTo | N -left-icon | String / Slot | - | 左侧图标，出现在单元格标题的左侧 | N -note | String / Slot | - | 和标题同行的说明文字 | N -required | Boolean | false | 是否显示表单必填星号 | N -right-icon | String / Slot | - | 最右侧图标 | N -title | String / Slot | - | 标题 | N -url | String | - | 点击后跳转链接地址。如果值为空，则表示不需要跳转 | N - -### Cell Events - -名称 | 参数 | 描述 --- | -- | -- -click | - | 右侧内容 diff --git a/components/cell/cell.d.ts b/components/cell/cell.d.ts deleted file mode 100644 index 92eb1c9..0000000 --- a/components/cell/cell.d.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { SuperComponent } from '../common/src/index'; -export default class Cell extends SuperComponent { - externalClasses: string[]; - options: { - multipleSlots: boolean; - }; - properties: import("./type").TdCellProps; - data: { - prefix: string; - classPrefix: string; - }; - onClick(e: any): void; - jumpLink(urlKey?: string, link?: string): void; -} diff --git a/components/cell/cell.js b/components/cell/cell.js deleted file mode 100644 index 7950416..0000000 --- a/components/cell/cell.js +++ /dev/null @@ -1,51 +0,0 @@ -var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { - var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; - if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); - else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; - return c > 3 && r && Object.defineProperty(target, key, r), r; -}; -import { SuperComponent, wxComponent } from '../common/src/index'; -import config from '../common/config'; -import props from './props'; -const { prefix } = config; -const name = `${prefix}-cell`; -let Cell = class Cell extends SuperComponent { - constructor() { - super(...arguments); - this.externalClasses = [ - `${prefix}-class`, - `${prefix}-class-title`, - `${prefix}-class-description`, - `${prefix}-class-note`, - `${prefix}-class-hover`, - `${prefix}-class-image`, - `${prefix}-class-left`, - `${prefix}-class-left-icon`, - `${prefix}-class-right`, - `${prefix}-class-right-icon`, - ]; - this.options = { - multipleSlots: true, - }; - this.properties = props; - this.data = { - prefix, - classPrefix: name, - }; - } - onClick(e) { - this.triggerEvent('click', e.detail); - this.jumpLink(); - } - jumpLink(urlKey = 'url', link = 'jumpType') { - const url = this.data[urlKey]; - const jumpType = this.data[link]; - if (url) { - wx[jumpType]({ url }); - } - } -}; -Cell = __decorate([ - wxComponent() -], Cell); -export default Cell; diff --git a/components/cell/cell.json b/components/cell/cell.json deleted file mode 100644 index 049940c..0000000 --- a/components/cell/cell.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "component": true, - "usingComponents": { - "t-icon": "../icon/icon" - } -} diff --git a/components/cell/cell.wxml b/components/cell/cell.wxml deleted file mode 100644 index c3ba655..0000000 --- a/components/cell/cell.wxml +++ /dev/null @@ -1,40 +0,0 @@ - - - - - - - - - - {{ title}} - - -  * - - - - - {{description}} - - - - - - {{note}} - - - - - - - - - - - diff --git a/components/cell/cell.wxss b/components/cell/cell.wxss deleted file mode 100644 index fa30bf4..0000000 --- a/components/cell/cell.wxss +++ /dev/null @@ -1,121 +0,0 @@ -.t-float-left { - float: left; -} -.t-float-right { - float: right; -} -@keyframes tdesign-fade-out { - from { - opacity: 1; - } - to { - opacity: 0; - } -} -.hotspot-expanded.relative { - position: relative; -} -.hotspot-expanded::after { - content: ''; - display: block; - position: absolute; - left: 0; - top: 0; - right: 0; - bottom: 0; - transform: scale(1.5); -} -.t-cell { - position: relative; - display: flex; - box-sizing: border-box; - width: 100%; - padding: 24rpx 32rpx; - font-size: 32rpx; - line-height: 48rpx; - color: rgba(0, 0, 0, 0.9); - background-color: #ffffff; -} -.t-cell::after { - position: absolute; - box-sizing: border-box; - content: ' '; - pointer-events: none; - right: 0; - left: 0; - bottom: 0; - border-bottom: 1px solid #e7e7e7; - transform: scaleY(0.5); - left: 32rpx; -} -.t-cell--borderless::after { - display: none; -} -.t-cell__description { - font-size: 28rpx; - line-height: 44rpx; - color: rgba(0, 0, 0, 0.4); -} -.t-cell__description-text { - margin-top: 8rpx; -} -.t-cell__note { - display: flex; - align-items: center; - justify-content: flex-end; - overflow: hidden; - color: rgba(0, 0, 0, 0.4); -} -.t-cell__title, -.t-cell__note { - flex: 1 1 auto; -} -.t-cell__title:empty, -.t-cell__note:empty { - display: none; -} -.t-cell__title-text { - display: flex; -} -.t-cell__left, -.t-cell__right { - display: flex; - align-items: center; - font-size: 48rpx; - line-height: 48rpx; -} -.t-cell__left :not(:empty) { - margin-right: 16rpx; -} -.t-cell__left-icon { - font-size: 48rpx; -} -.t-cell__left-image { - height: 112rpx; - width: 112rpx; -} -.t-cell__right { - margin-left: 8rpx; - color: #bbb; -} -.t-cell__right-icon { - color: #bbb; - font-size: 48rpx; - line-height: 48rpx; -} -.t-cell--hover.t-cell--hover-class { - background-color: #f2f3f5; -} -.t-cell--required { - font-size: 32rpx; - color: #e34d59; -} -.t-cell--middle { - align-items: center; -} -.t-cell--top { - align-items: flex-start; -} -.t-cell--bottom { - align-items: flex-end; -} diff --git a/components/cell/props.d.ts b/components/cell/props.d.ts deleted file mode 100644 index ad657e5..0000000 --- a/components/cell/props.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { TdCellProps } from './type'; -declare const props: TdCellProps; -export default props; diff --git a/components/cell/props.js b/components/cell/props.js deleted file mode 100644 index 8e741e8..0000000 --- a/components/cell/props.js +++ /dev/null @@ -1,51 +0,0 @@ -const props = { - align: { - type: String, - value: 'middle', - }, - arrow: { - type: Boolean, - value: false, - }, - bordered: { - type: Boolean, - value: true, - }, - description: { - type: String, - }, - externalClasses: { - type: Array, - }, - hover: { - type: Boolean, - }, - image: { - type: String, - }, - jumpType: { - type: String, - value: 'navigateTo', - }, - leftIcon: { - type: String, - }, - note: { - type: String, - }, - required: { - type: Boolean, - value: false, - }, - rightIcon: { - type: String, - }, - title: { - type: String, - }, - url: { - type: String, - value: '', - }, -}; -export default props; diff --git a/components/cell/type.d.ts b/components/cell/type.d.ts deleted file mode 100644 index 00d874b..0000000 --- a/components/cell/type.d.ts +++ /dev/null @@ -1,72 +0,0 @@ -export interface TdCellProps { - align?: { - type: StringConstructor; - value?: 'top' | 'middle' | 'bottom'; - required?: boolean; - }; - arrow?: { - type: BooleanConstructor; - value?: boolean; - required?: boolean; - }; - bordered?: { - type: BooleanConstructor; - value?: boolean; - required?: boolean; - }; - description?: { - type: StringConstructor; - value?: string; - required?: boolean; - }; - externalClasses?: { - type: ArrayConstructor; - value?: ['t-class', 't-class-title', 't-class-note', 't-class-description', 't-class-thumb', 't-class-hover', 't-class-left', 't-class-right']; - required?: boolean; - }; - hover?: { - type: BooleanConstructor; - value?: boolean; - required?: boolean; - }; - image?: { - type: StringConstructor; - value?: string; - required?: boolean; - }; - jumpType?: { - type: StringConstructor; - value?: 'switchTab' | 'reLaunch' | 'redirectTo' | 'navigateTo'; - required?: boolean; - }; - leftIcon?: { - type: StringConstructor; - value?: string; - required?: boolean; - }; - note?: { - type: StringConstructor; - value?: string; - required?: boolean; - }; - required?: { - type: BooleanConstructor; - value?: boolean; - required?: boolean; - }; - rightIcon?: { - type: StringConstructor; - value?: string; - required?: boolean; - }; - title?: { - type: StringConstructor; - value?: string; - required?: boolean; - }; - url?: { - type: StringConstructor; - value?: string; - required?: boolean; - }; -} diff --git a/components/cell/type.js b/components/cell/type.js deleted file mode 100644 index cb0ff5c..0000000 --- a/components/cell/type.js +++ /dev/null @@ -1 +0,0 @@ -export {}; diff --git a/components/mixins/page-scroll.d.ts b/components/mixins/page-scroll.d.ts deleted file mode 100644 index efe4f63..0000000 --- a/components/mixins/page-scroll.d.ts +++ /dev/null @@ -1,7 +0,0 @@ -/// -/// -declare type IPageScrollOption = WechatMiniprogram.Page.IPageScrollOption; -declare type Scroller = (this: WechatMiniprogram.Component.TrivialInstance, event?: IPageScrollOption) => void; -export declare const pageScrollMixin: (scroller: Scroller) => string; -export declare const getRect: (context: any, selector: string) => Promise; -export {}; diff --git a/components/mixins/page-scroll.js b/components/mixins/page-scroll.js deleted file mode 100644 index 2cf9fc4..0000000 --- a/components/mixins/page-scroll.js +++ /dev/null @@ -1,50 +0,0 @@ -const getCurrentPage = function () { - const pages = getCurrentPages(); - return pages[pages.length - 1]; -}; -const onPageScroll = function (event) { - const page = getCurrentPage(); - if (!page) - return; - const { pageScroller } = page; - pageScroller.forEach((scroller) => { - if (typeof scroller === 'function') { - scroller(event); - } - }); -}; -export const pageScrollMixin = (scroller) => { - let bindScroller = scroller; - return Behavior({ - attached() { - const page = getCurrentPage(); - if (!page) - return; - bindScroller = scroller.bind(this); - if (Array.isArray(page.pageScroller)) { - page.pageScroller.push(bindScroller); - } - else { - page.pageScroller = - typeof page.onPageScroll === 'function' ? [page.onPageScroll.bind(page), bindScroller] : [bindScroller]; - } - page.onPageScroll = onPageScroll; - }, - detached() { - var _a; - const page = getCurrentPage(); - if (!page) - return; - page.pageScroller = ((_a = page.pageScroller) === null || _a === void 0 ? void 0 : _a.filter((item) => item !== scroller)) || []; - }, - }); -}; -export const getRect = function (context, selector) { - return new Promise((resolve) => { - wx.createSelectorQuery() - .in(context) - .select(selector) - .boundingClientRect() - .exec((rect = []) => resolve(rect[0])); - }); -}; diff --git a/components/mixins/transition.d.ts b/components/mixins/transition.d.ts deleted file mode 100644 index 8c23e35..0000000 --- a/components/mixins/transition.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function transition(): string; diff --git a/components/mixins/transition.js b/components/mixins/transition.js deleted file mode 100644 index ee5215a..0000000 --- a/components/mixins/transition.js +++ /dev/null @@ -1,123 +0,0 @@ -import config from '../common/config'; -const { prefix } = config; -export default function transition() { - return Behavior({ - properties: { - visible: { - type: Boolean, - value: null, - observer: 'watchVisible', - }, - appear: Boolean, - name: { - type: String, - value: 'fade', - }, - durations: { - type: Number, - optionalTypes: [Array], - }, - }, - data: { - transitionClass: '', - transitionDurations: 300, - className: '', - realVisible: false, - }, - created() { - this.status = ''; - this.transitionT = 0; - }, - attached() { - this.durations = this.getDurations(); - if (this.data.visible) { - this.enter(); - } - this.inited = true; - }, - detached() { - clearTimeout(this.transitionT); - }, - methods: { - watchVisible(curr, prev) { - if (this.inited && curr !== prev) { - curr ? this.enter() : this.leave(); - } - }, - getDurations() { - const { durations } = this.data; - if (Array.isArray(durations)) { - return durations.map((item) => Number(item)); - } - return [Number(durations), Number(durations)]; - }, - enter() { - const { name } = this.data; - const [duration] = this.durations; - this.status = 'entering'; - this.setData({ - realVisible: true, - transitionClass: `${prefix}-${name}-enter ${prefix}-${name}-enter-active`, - }); - setTimeout(() => { - this.setData({ - transitionClass: `${prefix}-${name}-enter-active ${prefix}-${name}-enter-to`, - }); - }, 30); - if (typeof duration === 'number' && duration > 0) { - this.transitionT = setTimeout(this.entered.bind(this), duration + 30); - } - }, - entered() { - this.customDuration = false; - clearTimeout(this.transitionT); - this.status = 'entered'; - this.setData({ - transitionClass: '', - }); - }, - leave() { - const { name } = this.data; - const [, duration] = this.durations; - this.status = 'leaving'; - this.setData({ - transitionClass: `${prefix}-${name}-leave ${prefix}-${name}-leave-active`, - }); - clearTimeout(this.transitionT); - setTimeout(() => { - this.setData({ - transitionClass: `${prefix}-${name}-leave-active ${prefix}-${name}-leave-to`, - }); - }, 30); - if (typeof duration === 'number' && duration > 0) { - this.customDuration = true; - this.transitionT = setTimeout(this.leaved.bind(this), duration + 30); - } - }, - leaved() { - this.customDuration = false; - this.triggerEvent('leaved'); - clearTimeout(this.transitionT); - this.status = 'leaved'; - this.setData({ - transitionClass: '', - }); - }, - onTransitionEnd() { - if (this.customDuration) { - return; - } - clearTimeout(this.transitionT); - if (this.status === 'entering' && this.data.visible) { - this.entered(); - } - else if (this.status === 'leaving' && !this.data.visible) { - this.leaved(); - this.setData({ - realVisible: false, - }); - } - }, - }, - }); -} diff --git a/components/scroll/index.js b/components/scroll/index.js new file mode 100644 index 0000000..0cd9e7f --- /dev/null +++ b/components/scroll/index.js @@ -0,0 +1,213 @@ +Component({ + properties: { + // 加载中 + requesting: { + type: Boolean, + value: false, + observer: 'requestingEnd', + }, + // 加载完毕 + end: { + type: Boolean, + value: false, + }, + // 控制空状态的显示 + emptyShow: { + type: Boolean, + value: false, + }, + // 当前列表长度 + listCount: { + type: Number, + value: 0, + }, + // 空状态的图片 + emptyUrl: { + type: String, + value: "/assets/image/empty/empty.png" + }, + // 空状态的文字提示 + emptyText: { + type: String, + value: "未找到数据" + }, + // 是否有header + hasTop: { + type: Boolean, + value: false + }, + // 下拉刷新的高度 + refreshSize: { + type: Number, + value: 90, + observer: 'refreshChange' + }, + // 底部高度 + bottomSize: { + type: Number, + value: 0, + }, + // 颜色 + color: { + type: String, + value: "" + }, + // iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向 + enableBackToTop: { + type: Boolean, + value: false + } + }, + data: { + /* 未渲染数据 */ + mode: 'refresh', // refresh 和 more 两种模式 + successShow: false, // 显示success + successTran: false, // 过度success + refreshStatus: 1, // 1: 下拉刷新, 2: 松开更新, 3: 加载中, 4: 加载完成 + move: -45, // movable-view 偏移量 + scrollHeight1: 0, // refresh view 高度负值 + scrollHeight2: 0, // refresh view - success view 高度负值 + timer: null, + + /* 渲染数据 */ + scrollTop: 0, + overOnePage: false + }, + methods: { + /** + * 处理 bindscrolltolower 失效情况 + */ + scroll(e) { + // 可以触发滚动表示超过一屏 + this.setData({ + overOnePage: true + }); + clearTimeout(this.data.timer); + this.setData({ + timer: setTimeout(() => { + this.setData({ + scrollTop: e.detail.scrollTop + }) + }, 100) + }); + }, + /** + * movable-view 滚动监听 + */ + change(e) { + let refreshStatus = this.data.refreshStatus, + diff = e.detail.y; + + if (refreshStatus >= 3) return; + + if (diff > -10) { + this.setData({ + refreshStatus: 2 + }); + } else { + this.setData({ + refreshStatus: 1 + }); + } + }, + /** + * movable-view 触摸结束事件 + */ + touchend() { + let refreshStatus = this.data.refreshStatus; + + if (refreshStatus >= 3) return; + + if (refreshStatus === 2) { + wx.vibrateShort(); + this.setData({ + refreshStatus: 3, + move: 0, + mode: 'refresh' + }); + this.triggerEvent('refresh'); + } else if (refreshStatus === 1) { + this.setData({ + move: this.data.scrollHeight1 + }); + } + }, + /** + * 加载更多 + */ + more() { + if (!this.properties.end) { + this.setData({ + mode: 'more' + }); + this.triggerEvent('more'); + } + }, + /** + * 监听 requesting 字段变化, 来处理下拉刷新对应的状态变化 + */ + requestingEnd(newVal, oldVal) { + if (this.data.mode === 'more') return; + + if (oldVal === true && newVal === false) { + setTimeout(() => { + this.setData({ + successShow: true, + refreshStatus: 4, + move: this.data.scrollHeight2 + }); + setTimeout(() => { + this.setData({ + successTran: true, + move: this.data.scrollHeight1 + }); + setTimeout(() => { + this.setData({ + refreshStatus: 1, + successShow: false, + successTran: false, + move: this.data.scrollHeight1 + }); + }, 350) + }, 1500) + }, 600) + } else { + if (this.data.refreshStatus !== 3) { + this.setData({ + refreshStatus: 3, + move: 0 + }); + } + } + }, + /** + * 监听下拉刷新高度变化, 如果改变重新初始化参数, 最小高度80rpx + */ + refreshChange(newVal, oldVal) { + if (newVal <= 80) { + this.setData({ + refreshSize: 80 + }); + } + // 异步加载数据时候, 延迟执行 init 方法, 防止基础库 2.7.1 版本及以下无法正确获取 dom 信息 + setTimeout(() => this.init(), 10); + }, + /** + * 初始化scroll组件参数, 动态获取 下拉刷新区域 和 success 的高度 + */ + init() { + let {windowWidth} = wx.getSystemInfoSync(); + let successHeight = (windowWidth || 375) / 750 * 70; + + this.createSelectorQuery().select("#refresh").boundingClientRect((res) => { + this.setData({ + scrollHeight1: -res.height, + scrollHeight2: successHeight - res.height + }); + }).exec(); + }, + }, + ready() { + this.init(); + } +}); diff --git a/components/scroll/index.json b/components/scroll/index.json new file mode 100644 index 0000000..ac28323 --- /dev/null +++ b/components/scroll/index.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": {} +} diff --git a/components/scroll/index.scss b/components/scroll/index.scss new file mode 100644 index 0000000..501bed5 --- /dev/null +++ b/components/scroll/index.scss @@ -0,0 +1,300 @@ +@import "../../assets/css/variables"; + +$refresh-height: 90rpx; +$success-height: 70rpx; +$success-top: $refresh-height - $success-height; +$loading-color: #a5a5a5; + +.movable-area { + width: 100%; + height: 100vh; +} + +.scroll { + width: 100%; + height: calc(100vh + #{$refresh-height}); + + &__view { + height: 100%; + position: relative; + box-sizing: border-box; + } + + &__refresh { + height: $refresh-height; + position: relative; + + &--hidden { + visibility: hidden; + } + } + + &__bottom { + position: relative; + height: 40rpx; + padding: 40rpx 0; + } + + &__loading { + position: absolute; + top: 50%; + left: 0; + right: 0; + transform: translateY(-50%); + text-align: center; + color: #999999; + .text { + display: inline-block; + vertical-align: middle; + margin-left: 40rpx; + } + } +} + +.success { + position: absolute; + z-index: 9; + top: $success-top; + left: 0; + width: 100%; + height: $success-height; + line-height: $success-height; + font-size: 24rpx; + text-align: center; + opacity: 0; + transform: scale(0); + color: $theme-color; + + &:after { + content: " "; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: currentColor; + opacity: 0.7; + transform: scaleX(0); + transition: transform 0.3s ease-in-out; + z-index: 0; + } + + & > .info { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; + color: #ffffff; + } + + &--show { + opacity: 1; + transform: scale(1); + + &:after { + transform: scaleX(1); + } + } + + &--tran { + opacity: 0; + transform: translateY(-100%); + transition: opacity 0.35s linear, transform 0.35s linear; + } +} + + +.empty { + padding: 30rpx; + text-align: center; + + &__image { + width: 200rpx; + height: 200rpx; + margin: 160rpx auto 60rpx; + } + + &__text { + color: #999999; + } +} + +.arrow { + position: relative; + border-radius: 4rpx; + width: 4rpx; + height: 30rpx; + background: $loading-color; + transition: transform 0.15s ease-in-out; + display: inline-block; + vertical-align: middle; + + &:before { + position: absolute; + content: ""; + bottom: -4rpx; + right: 50%; + width: 4rpx; + height: 16rpx; + transform: rotate(45deg); + transform-origin: 100% 100%; + background: $loading-color; + border-radius: 4rpx; + } + + &:after { + position: absolute; + content: ""; + bottom: -4rpx; + left: 50%; + width: 4rpx; + height: 16rpx; + transform: rotate(-45deg); + transform-origin: 0% 100%; + background: $loading-color; + border-radius: 4rpx; + } + + &.rotate { + transform: rotate(-180deg); + } +} + +.loading { + position: relative; + display: inline-block; + vertical-align: middle; + width: 36rpx; + height: 36rpx; + margin-right: -14rpx; + + &__item { + position: absolute; + top: 0; + left: 0; + width: 36rpx; + height: 36rpx; + + &:before { + content: ""; + display: block; + margin: 0 auto; + width: 4rpx; + height: 8rpx; + background-color: $loading-color; + border-radius: 4rpx; + animation: fadeDelay 1.2s infinite ease-in-out both; + } + + &:nth-child(2) { + transform: rotate(30deg); + + &:before { + animation-delay: -1.1s; + } + } + + &:nth-child(3) { + transform: rotate(60deg); + + &:before { + animation-delay: -1s; + } + } + + &:nth-child(4) { + transform: rotate(90deg); + + &:before { + animation-delay: -0.9s; + } + } + + &:nth-child(5) { + transform: rotate(120deg); + + &:before { + animation-delay: -0.8s; + } + } + + &:nth-child(6) { + transform: rotate(150deg); + + &:before { + animation-delay: -0.7s; + } + } + + &:nth-child(7) { + transform: rotate(180deg); + + &:before { + animation-delay: -0.6s; + } + } + + &:nth-child(8) { + transform: rotate(210deg); + + &:before { + animation-delay: -0.5s; + } + } + + &:nth-child(9) { + transform: rotate(240deg); + + &:before { + animation-delay: -0.4s; + } + } + + &:nth-child(10) { + transform: rotate(270deg); + + &:before { + animation-delay: -0.3s; + } + } + + &:nth-child(11) { + transform: rotate(300deg); + + &:before { + animation-delay: -0.2s; + } + } + + &:nth-child(12) { + transform: rotate(330deg); + + &:before { + animation-delay: -0.1s; + } + } + } + + @keyframes fadeDelay { + 0%, 39%, 100% { + opacity: 0.2; + } + 40% { + opacity: 1; + } + } + + @-webkit-keyframes fadeDelay { + 0%, 39%, 100% { + opacity: 0.2; + } + 40% { + opacity: 1; + } + } +} + + + diff --git a/components/scroll/index.wxml b/components/scroll/index.wxml new file mode 100644 index 0000000..d034166 --- /dev/null +++ b/components/scroll/index.wxml @@ -0,0 +1,79 @@ + + + 刷新成功 + + + + + + + + + + + + + + + + + + + + + + 下拉刷新 + 松开更新 + 加载中... + + + + + + {{emptyText}} + + + + 已全部加载 + + + + + + + + + + + + + + + + + 加载中... + + + + + + diff --git a/components/scroll/index.wxss b/components/scroll/index.wxss new file mode 100644 index 0000000..9efb8d7 --- /dev/null +++ b/components/scroll/index.wxss @@ -0,0 +1,196 @@ +.movable-area { + width: 100%; + height: 100vh; } + +.scroll { + width: 100%; + height: calc(100vh + 90rpx); } + .scroll__view { + height: 100%; + position: relative; + box-sizing: border-box; } + .scroll__refresh { + height: 90rpx; + position: relative; } + .scroll__refresh--hidden { + visibility: hidden; } + .scroll__bottom { + position: relative; + height: 40rpx; + padding: 40rpx 0; } + .scroll__loading { + position: absolute; + top: 50%; + left: 0; + right: 0; + transform: translateY(-50%); + text-align: center; + color: #999999; } + .scroll__loading .text { + display: inline-block; + vertical-align: middle; + margin-left: 40rpx; } + +.success { + position: absolute; + z-index: 9; + top: 20rpx; + left: 0; + width: 100%; + height: 70rpx; + line-height: 70rpx; + font-size: 24rpx; + text-align: center; + opacity: 0; + transform: scale(0); + color: #3F82FD; } + .success:after { + content: " "; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: currentColor; + opacity: 0.7; + transform: scaleX(0); + transition: transform 0.3s ease-in-out; + z-index: 0; } + .success > .info { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; + color: #ffffff; } + .success--show { + opacity: 1; + transform: scale(1); } + .success--show:after { + transform: scaleX(1); } + .success--tran { + opacity: 0; + transform: translateY(-100%); + transition: opacity 0.35s linear, transform 0.35s linear; } + +.empty { + padding: 30rpx; + text-align: center; } + .empty__image { + width: 200rpx; + height: 200rpx; + margin: 160rpx auto 60rpx; } + .empty__text { + color: #999999; } + +.arrow { + position: relative; + border-radius: 4rpx; + width: 4rpx; + height: 30rpx; + background: #a5a5a5; + transition: transform 0.15s ease-in-out; + display: inline-block; + vertical-align: middle; } + .arrow:before { + position: absolute; + content: ""; + bottom: -4rpx; + right: 50%; + width: 4rpx; + height: 16rpx; + transform: rotate(45deg); + transform-origin: 100% 100%; + background: #a5a5a5; + border-radius: 4rpx; } + .arrow:after { + position: absolute; + content: ""; + bottom: -4rpx; + left: 50%; + width: 4rpx; + height: 16rpx; + transform: rotate(-45deg); + transform-origin: 0% 100%; + background: #a5a5a5; + border-radius: 4rpx; } + .arrow.rotate { + transform: rotate(-180deg); } + +.loading { + position: relative; + display: inline-block; + vertical-align: middle; + width: 36rpx; + height: 36rpx; + margin-right: -14rpx; } + .loading__item { + position: absolute; + top: 0; + left: 0; + width: 36rpx; + height: 36rpx; } + .loading__item:before { + content: ""; + display: block; + margin: 0 auto; + width: 4rpx; + height: 8rpx; + background-color: #a5a5a5; + border-radius: 4rpx; + animation: fadeDelay 1.2s infinite ease-in-out both; } + .loading__item:nth-child(2) { + transform: rotate(30deg); } + .loading__item:nth-child(2):before { + animation-delay: -1.1s; } + .loading__item:nth-child(3) { + transform: rotate(60deg); } + .loading__item:nth-child(3):before { + animation-delay: -1s; } + .loading__item:nth-child(4) { + transform: rotate(90deg); } + .loading__item:nth-child(4):before { + animation-delay: -0.9s; } + .loading__item:nth-child(5) { + transform: rotate(120deg); } + .loading__item:nth-child(5):before { + animation-delay: -0.8s; } + .loading__item:nth-child(6) { + transform: rotate(150deg); } + .loading__item:nth-child(6):before { + animation-delay: -0.7s; } + .loading__item:nth-child(7) { + transform: rotate(180deg); } + .loading__item:nth-child(7):before { + animation-delay: -0.6s; } + .loading__item:nth-child(8) { + transform: rotate(210deg); } + .loading__item:nth-child(8):before { + animation-delay: -0.5s; } + .loading__item:nth-child(9) { + transform: rotate(240deg); } + .loading__item:nth-child(9):before { + animation-delay: -0.4s; } + .loading__item:nth-child(10) { + transform: rotate(270deg); } + .loading__item:nth-child(10):before { + animation-delay: -0.3s; } + .loading__item:nth-child(11) { + transform: rotate(300deg); } + .loading__item:nth-child(11):before { + animation-delay: -0.2s; } + .loading__item:nth-child(12) { + transform: rotate(330deg); } + .loading__item:nth-child(12):before { + animation-delay: -0.1s; } +@keyframes fadeDelay { + 0%, 39%, 100% { + opacity: 0.2; } + 40% { + opacity: 1; } } +@-webkit-keyframes fadeDelay { + 0%, 39%, 100% { + opacity: 0.2; } + 40% { + opacity: 1; } } diff --git a/components/sticky/README.md b/components/sticky/README.md deleted file mode 100644 index ec56105..0000000 --- a/components/sticky/README.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Sticky 吸顶容器 -description: 用于常驻页面顶部的信息、操作展示。 -spline: data -isComponent: true ---- - - -## 引入 - -全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。 - -```json -"usingComponents": { - "t-sticky": "/components/sticky/sticky" -} -``` - -## 代码演示 - -将内容包裹在 `Sticky` 组件内 - - - -### 基础吸顶 - -{{ base }} - - -### 吸顶距离 - -{{ offset }} - -### 指定容器 - -{{ container }} - - - -## API - -### Sticky Props - -| 名称 | 类型 | 默认值 | 说明 | 必传 | -| ---------------- | -------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------- | ---- | -| container | Function | - | 函数返回容器对应的 NodesRef 节点，将对应节点指定为组件的外部容器，滚动时组件会始终保持在容器范围内，当组件即将超出容器底部时，会返回原位置。 | N | -| disabled | Boolean | false | 是否禁用组件 | N | -| external-classes | Array | - | 根结点外部样式。`['t-class']` | N | -| offset-top | Number | 0 | 吸顶时与顶部的距离，单位`px` | N | -| z-index | Number | 99 | 吸顶时的 z-index | N | - -### Sticky Events - -| 名称 | 参数 | 描述 | -| ------ | --------------------------------------------------- | ------------------------------------------------------ | -| scroll | `(detail: { scrollTop: number, isFixed: boolean })` | 滚动时触发，scrollTop: 距离顶部位置，isFixed: 是否吸顶 | diff --git a/components/sticky/index.d.ts b/components/sticky/index.d.ts deleted file mode 100644 index a6df66d..0000000 --- a/components/sticky/index.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './props'; -export * from './type'; -export * from './sticky'; diff --git a/components/sticky/index.js b/components/sticky/index.js deleted file mode 100644 index a6df66d..0000000 --- a/components/sticky/index.js +++ /dev/null @@ -1,3 +0,0 @@ -export * from './props'; -export * from './type'; -export * from './sticky'; diff --git a/components/sticky/props.d.ts b/components/sticky/props.d.ts deleted file mode 100644 index 175af72..0000000 --- a/components/sticky/props.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { TdStickyProps } from './type'; -declare const props: TdStickyProps; -export default props; diff --git a/components/sticky/props.js b/components/sticky/props.js deleted file mode 100644 index 7e5cb71..0000000 --- a/components/sticky/props.js +++ /dev/null @@ -1,21 +0,0 @@ -const props = { - container: { - type: null, - }, - disabled: { - type: Boolean, - value: false, - }, - externalClasses: { - type: Array, - }, - offsetTop: { - type: Number, - value: 0, - }, - zIndex: { - type: Number, - value: 99, - }, -}; -export default props; diff --git a/components/sticky/sticky.d.ts b/components/sticky/sticky.d.ts deleted file mode 100644 index c2c0138..0000000 --- a/components/sticky/sticky.d.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { SuperComponent } from '../common/src/index'; -import type { TdStickyProps } from './type'; -export interface StickyProps extends TdStickyProps { -} -export default class Sticky extends SuperComponent { - externalClasses: string[]; - properties: TdStickyProps; - behaviors: string[]; - observers: { - 'offsetTop, disabled, container'(): void; - }; - data: { - prefix: string; - containerStyle: string; - contentStyle: string; - classPrefix: string; - }; - ready(): void; - methods: { - onScroll(event?: { - scrollTop: number; - }): void; - setDataAfterDiff(data: { - isFixed: boolean; - height?: number; - transform?: number; - }): void; - getContainerRect(): Promise; - }; -} diff --git a/components/sticky/sticky.js b/components/sticky/sticky.js deleted file mode 100644 index 08999ef..0000000 --- a/components/sticky/sticky.js +++ /dev/null @@ -1,118 +0,0 @@ -var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { - var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; - if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); - else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; - return c > 3 && r && Object.defineProperty(target, key, r), r; -}; -import { SuperComponent, wxComponent } from '../common/src/index'; -import props from './props'; -import config from '../common/config'; -import { pageScrollMixin, getRect } from '../mixins/page-scroll'; -const { prefix } = config; -const ContainerClass = `.${prefix}-sticky`; -let Sticky = class Sticky extends SuperComponent { - constructor() { - super(...arguments); - this.externalClasses = [`${prefix}-class`]; - this.properties = props; - this.behaviors = [ - pageScrollMixin(function (event) { - this.onScroll(event); - }), - ]; - this.observers = { - 'offsetTop, disabled, container'() { - this.onScroll(); - }, - }; - this.data = { - prefix, - containerStyle: '', - contentStyle: '', - classPrefix: `.${prefix}-sticky`, - }; - this.methods = { - onScroll(event) { - const { scrollTop } = event || {}; - const { container, offsetTop, disabled } = this.properties; - if (disabled) { - this.setDataAfterDiff({ - isFixed: false, - transform: 0, - }); - return; - } - this.scrollTop = scrollTop || this.scrollTop; - if (typeof container === 'function') { - Promise.all([getRect(this, ContainerClass), this.getContainerRect()]).then(([root, container]) => { - if (!root || !container) - return; - if (offsetTop + root.height > container.height + container.top) { - this.setDataAfterDiff({ - isFixed: false, - transform: container.height - root.height, - }); - } - else if (offsetTop >= root.top) { - this.setDataAfterDiff({ - isFixed: true, - height: root.height, - transform: 0, - }); - } - else { - this.setDataAfterDiff({ isFixed: false, transform: 0 }); - } - }); - return; - } - getRect(this, ContainerClass).then((root) => { - if (!root) - return; - if (offsetTop >= root.top) { - this.setDataAfterDiff({ isFixed: true, height: root.height }); - this.transform = 0; - } - else { - this.setDataAfterDiff({ isFixed: false }); - } - }); - }, - setDataAfterDiff(data) { - const { offsetTop } = this.properties; - const { containerStyle: prevContainerStyle, contentStyle: prevContentStyle } = this.data; - const { isFixed, height, transform } = data; - wx.nextTick(() => { - let containerStyle = ''; - let contentStyle = ''; - if (isFixed) { - containerStyle += `height:${height}px;`; - contentStyle += `position:fixed;top:${offsetTop}px`; - } - if (transform) { - const translate = `translate3d(0, ${transform}px, 0)`; - contentStyle += `-webkit-transform:${translate};transform:${translate};`; - } - if (prevContainerStyle !== containerStyle || prevContentStyle !== contentStyle) { - this.setData({ containerStyle, contentStyle }); - } - this.triggerEvent('scroll', { - scrollTop: this.scrollTop, - isFixed, - }); - }); - }, - getContainerRect() { - const nodesRef = this.properties.container(); - return new Promise((resolve) => nodesRef.boundingClientRect(resolve).exec()); - }, - }; - } - ready() { - this.onScroll(); - } -}; -Sticky = __decorate([ - wxComponent() -], Sticky); -export default Sticky; diff --git a/components/sticky/sticky.json b/components/sticky/sticky.json deleted file mode 100644 index a89ef4d..0000000 --- a/components/sticky/sticky.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "component": true, - "usingComponents": {} -} diff --git a/components/sticky/sticky.wxml b/components/sticky/sticky.wxml deleted file mode 100644 index c1781f1..0000000 --- a/components/sticky/sticky.wxml +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/components/sticky/sticky.wxss b/components/sticky/sticky.wxss deleted file mode 100644 index 730de8a..0000000 --- a/components/sticky/sticky.wxss +++ /dev/null @@ -1,33 +0,0 @@ -.t-float-left { - float: left; -} -.t-float-right { - float: right; -} -@keyframes tdesign-fade-out { - from { - opacity: 1; - } - to { - opacity: 0; - } -} -.hotspot-expanded.relative { - position: relative; -} -.hotspot-expanded::after { - content: ''; - display: block; - position: absolute; - left: 0; - top: 0; - right: 0; - bottom: 0; - transform: scale(1.5); -} -.t-sticky { - position: relative; -} -.t-sticky__content { - width: 100%; -} diff --git a/components/sticky/type.d.ts b/components/sticky/type.d.ts deleted file mode 100644 index acdbedb..0000000 --- a/components/sticky/type.d.ts +++ /dev/null @@ -1,27 +0,0 @@ -export interface TdStickyProps { - container?: { - type: null; - value?: null; - required?: boolean; - }; - disabled?: { - type: BooleanConstructor; - value?: boolean; - required?: boolean; - }; - externalClasses?: { - type: ArrayConstructor; - value?: ['t-class']; - required?: boolean; - }; - offsetTop?: { - type: NumberConstructor; - value?: number; - required?: boolean; - }; - zIndex?: { - type: NumberConstructor; - value?: number; - required?: boolean; - }; -} diff --git a/components/sticky/type.js b/components/sticky/type.js deleted file mode 100644 index 95da36c..0000000 --- a/components/sticky/type.js +++ /dev/null @@ -1,2 +0,0 @@ -; -export {}; diff --git a/components/swipe-cell/README.md b/components/swipe-cell/README.md deleted file mode 100644 index 0fd1156..0000000 --- a/components/swipe-cell/README.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: SwipeCell 滑动操作 -description: 用于承载列表中的更多操作，通过左右滑动来展示，按钮的宽度固定高度根据列表高度而变化。 -spline: message -isComponent: true ---- - - -## 引入 - -全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。 - -```json -"usingComponents": { - "t-swipe-cell": "tdesign-miniprogram/swipe-cell/swipe-cell" -} -``` - -## 代码演示 - - - -### 往左滑动 - -{{ left }} - -### 往右滑动 - -{{ right }} - -## API - -### SwipeCell Props - -| 名称 | 类型 | 默认值 | 说明| 必传 | -| -------- | --------------- | ------ | -- | --------------- | -| disabled | Boolean | - | 是否禁用滑动| N | -| left | Array / Slot | - | 左侧滑动操作项。所有行为同 `right`。TS 类型：`Array`| N | -| opened | Boolean / Array | false | 操作项是否呈现为打开态，值为数组时表示分别控制左右滑动的展开和收起状态。TS 类型：`boolean| Array` | N | -| right | Array / Slot | - | 右侧滑动操作项。有两种定义方式，一种是使用数组，二种是使用插槽。`right.text` 表示操作文本，`right.className` 表示操作项类名，`right.style` 表示操作项样式，`right.onClick` 表示点击操作项后执行的回调函数。示例：`[{ text: '删除', style: 'background-color: red', onClick: () => { /** TO DO */ } }]`。TS 类型：`Array`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swipe-cell/type.ts) | N | - -### SwipeCell Events - -名称 | 参数 | 描述 --- | -- | -- -click | `(action: SwipeActionItem, source: SwipeSource)` | 操作项点击时触发（插槽写法组件不触发，业务侧自定义内容和事件）。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swipe-cell/type.ts)。
`type SwipeSource = 'left' | 'right'`
diff --git a/components/swipe-cell/props.d.ts b/components/swipe-cell/props.d.ts deleted file mode 100644 index 9a3159c..0000000 --- a/components/swipe-cell/props.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { TdSwipeCellProps } from './type'; -declare const props: TdSwipeCellProps; -export default props; diff --git a/components/swipe-cell/props.js b/components/swipe-cell/props.js deleted file mode 100644 index 5298eef..0000000 --- a/components/swipe-cell/props.js +++ /dev/null @@ -1,17 +0,0 @@ -const props = { - disabled: { - type: Boolean, - }, - left: { - type: Array, - }, - opened: { - type: Boolean, - optionalTypes: [Array], - value: false, - }, - right: { - type: Array, - }, -}; -export default props; diff --git a/components/swipe-cell/swipe-cell.d.ts b/components/swipe-cell/swipe-cell.d.ts deleted file mode 100644 index 4f7a37a..0000000 --- a/components/swipe-cell/swipe-cell.d.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { SuperComponent } from '../common/src/index'; -export default class SwiperCell extends SuperComponent { - behaviors: string[]; - externalClasses: string[]; - options: { - multipleSlots: boolean; - }; - properties: import("./type").TdSwipeCellProps; - data: { - wrapperStyle: string; - closed: boolean; - opened: boolean; - classPrefix: string; - }; - attached(): void; - setSwipeWidth(): Promise; - detached(): void; - open(): void; - close(): void; - closeOther(): void; - onTap(): void; - onActionTap(event: any): void; -} diff --git a/components/swipe-cell/swipe-cell.js b/components/swipe-cell/swipe-cell.js deleted file mode 100644 index 848d2da..0000000 --- a/components/swipe-cell/swipe-cell.js +++ /dev/null @@ -1,77 +0,0 @@ -var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { - var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; - if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); - else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; - return c > 3 && r && Object.defineProperty(target, key, r), r; -}; -var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { - function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } - return new (P || (P = Promise))(function (resolve, reject) { - function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } - function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } - function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } - step((generator = generator.apply(thisArg, _arguments || [])).next()); - }); -}; -import dom from '../behaviors/dom'; -import { SuperComponent, wxComponent } from '../common/src/index'; -import config from '../common/config'; -import props from './props'; -let ARRAY = []; -const { prefix } = config; -let SwiperCell = class SwiperCell extends SuperComponent { - constructor() { - super(...arguments); - this.behaviors = [dom]; - this.externalClasses = ['t-class']; - this.options = { - multipleSlots: true, - }; - this.properties = props; - this.data = { - wrapperStyle: '', - closed: true, - opened: false, - classPrefix: `.${prefix}-swipe-cell`, - }; - } - attached() { - ARRAY.push(this); - wx.nextTick(() => { - this.setSwipeWidth(); - }); - } - setSwipeWidth() { - return __awaiter(this, void 0, void 0, function* () { - const rightRect = yield this.gettingBoundingClientRect(`${this.data.classPrefix}__right`); - const leftRect = yield this.gettingBoundingClientRect(`${this.data.classPrefix}__left`); - this.setData({ - leftWidth: leftRect.width, - rightWidth: rightRect.width, - }); - }); - } - detached() { - ARRAY = ARRAY.filter((item) => item !== this); - } - open() { - this.setData({ opened: true }); - } - close() { - this.setData({ opened: false }); - } - closeOther() { - ARRAY.filter((item) => item !== this).forEach((item) => item.close()); - } - onTap() { - this.close(); - } - onActionTap(event) { - const { currentTarget: { dataset: { action }, }, } = event; - this.triggerEvent('click', action); - } -}; -SwiperCell = __decorate([ - wxComponent() -], SwiperCell); -export default SwiperCell; diff --git a/components/swipe-cell/swipe-cell.json b/components/swipe-cell/swipe-cell.json deleted file mode 100644 index 467ce29..0000000 --- a/components/swipe-cell/swipe-cell.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "component": true -} diff --git a/components/swipe-cell/swipe-cell.wxml b/components/swipe-cell/swipe-cell.wxml deleted file mode 100644 index 170fbf6..0000000 --- a/components/swipe-cell/swipe-cell.wxml +++ /dev/null @@ -1,46 +0,0 @@ - - - - - - - {{item.text}} - - - - - - - {{item.text}} - - - - diff --git a/components/swipe-cell/swipe-cell.wxs b/components/swipe-cell/swipe-cell.wxs deleted file mode 100644 index dbb7fec..0000000 --- a/components/swipe-cell/swipe-cell.wxs +++ /dev/null @@ -1,176 +0,0 @@ -var THRESHOLD = 0.3; -var MIN_DISTANCE = 10; -var owner; -var state; - -var getState = function (ownerInstance) { - owner = ownerInstance; - state = owner.getState(); - state.leftWidth = state.leftWidth || 0; - state.rightWidth = state.rightWidth || 0; - state.offset = state.offset || 0; - state.startOffset = state.startOffset || 0; - state.opened = state.opened || false; -}; - -var initRightWidth = function (newVal, oldVal, ownerInstance) { - getState(ownerInstance); - state.rightWidth = newVal; - initOpen(ownerInstance); -}; - -var initLeftWidth = function (newVal, oldVal, ownerInstance) { - getState(ownerInstance); - state.leftWidth = newVal; - initOpen(ownerInstance); -}; - -var initOpen = function (ownerInstance) { - getState(ownerInstance); - if (state.opened.constructor === 'Boolean') { - // opened为boolen类型，判断默认打开 - if (state.opened && state.rightWidth > 0) { - swipeMove(-state.rightWidth); - } else if (state.opened && state.leftWidth > 0) { - swipeMove(state.leftWidth); - } - } - - if (state.opened.constructor === 'Array') { - // opened为array类型，判断默认打开，同时设定左右action时优先打开右边 - if (state.opened[1] && state.rightWidth > 0) { - swipeMove(-state.rightWidth); - } else if (state.opened[0] && state.leftWidth > 0) { - swipeMove(state.leftWidth); - } - } -}; - -var resetTouchStatus = function () { - state.direction = ''; - state.deltaX = 0; - state.deltaY = 0; - state.offsetX = 0; - state.offsetY = 0; -}; - -var touchMove = function (event) { - var touchPoint = event.touches[0]; - state.deltaX = touchPoint.clientX - state.startX; - state.deltaY = touchPoint.clientY - state.startY; - state.offsetX = Math.abs(state.deltaX); - state.offsetY = Math.abs(state.deltaY); - state.direction = state.direction || getDirection(state.offsetX, state.offsetY); -}; - -var getDirection = function (x, y) { - if (x > y && x > MIN_DISTANCE) { - return 'horizontal'; - } - if (y > x && y > MIN_DISTANCE) { - return 'vertical'; - } - return ''; -}; - -var range = function (num, min, max) { - return Math.min(Math.max(num, min), max); -}; - -var swipeMove = function (_offset) { - if (_offset === undefined) _offset = 0; - state.offset = range(_offset, -state.rightWidth, +state.leftWidth); - var transform = 'translate3d(' + state.offset + 'px, 0, 0)'; - var transition = state.dragging ? 'none' : 'transform .6s cubic-bezier(0.18, 0.89, 0.32, 1)'; - owner.selectComponent('#wrapper').setStyle({ - '-webkit-transform': transform, - '-webkit-transition': transition, - transform: transform, - transition: transition, - }); -}; - -var close = function () { - swipeMove(0); -}; - -var onCloseChange = function (newVal, oldVal, ownerInstance) { - getState(ownerInstance); - if (newVal === oldVal) return; - if (newVal) { - close(); - } -}; - -var onOpenedChange = function (newVal, oldVal, ownerInstance) { - getState(ownerInstance); - state.opened = newVal; - if (newVal === oldVal) return; - if (!newVal) { - close(); - } -}; - -var touchStart = function (event) { - resetTouchStatus(); - state.startOffset = state.offset; - var touchPoint = event.touches[0]; - state.startX = touchPoint.clientX; - state.startY = touchPoint.clientY; - owner.callMethod('closeOther'); -}; - -var startDrag = function (event, ownerInstance) { - getState(ownerInstance); - touchStart(event); -}; - -var onDrag = function (event, ownerInstance) { - getState(ownerInstance); - touchMove(event); - if (state.direction !== 'horizontal') { - return; - } - state.dragging = true; - swipeMove(state.startOffset + state.deltaX); -}; - -var open = function (position) { - var _offset = position === 'left' ? +state.leftWidth : -state.rightWidth; - owner.callMethod('open', { position: position }); - swipeMove(_offset); -}; - -var endDrag = function (event, ownerInstance) { - getState(ownerInstance); - state.dragging = false; - // 左/右侧有可滑动区域，且当前不是已open状态，且滑动幅度超过阈值时open左/右侧（滚动到该侧的最边上） - if ( - +state.rightWidth > 0 && - -state.startOffset < +state.rightWidth && - -state.offset > +state.rightWidth * THRESHOLD - ) { - open('right'); - } else if ( - +state.leftWidth > 0 && - state.startOffset < +state.leftWidth && - state.offset > +state.leftWidth * THRESHOLD - ) { - open('left'); - } else { - // 仅在有发生侧滑的情况下自动关闭（由js控制是否异步关闭） - if (state.startOffset !== state.offset) { - close(); - } - } -}; - -module.exports = { - initLeftWidth: initLeftWidth, - initRightWidth: initRightWidth, - startDrag: startDrag, - onDrag: onDrag, - endDrag: endDrag, - onCloseChange: onCloseChange, - onOpenedChange: onOpenedChange, -}; diff --git a/components/swipe-cell/swipe-cell.wxss b/components/swipe-cell/swipe-cell.wxss deleted file mode 100644 index 1d1ab98..0000000 --- a/components/swipe-cell/swipe-cell.wxss +++ /dev/null @@ -1,45 +0,0 @@ -.t-float-left { - float: left; -} -.t-float-right { - float: right; -} -@keyframes tdesign-fade-out { - from { - opacity: 1; - } - to { - opacity: 0; - } -} -.hotspot-expanded.relative { - position: relative; -} -.hotspot-expanded::after { - content: ''; - display: block; - position: absolute; - left: 0; - top: 0; - right: 0; - bottom: 0; - transform: scale(1.5); -} -.t-swipe-cell { - position: relative; - overflow: hidden; -} -.t-swipe-cell__left, -.t-swipe-cell__right { - position: absolute; - top: 0; - height: 100%; -} -.t-swipe-cell__left { - left: 0; - transform: translate3d(-100%, 0, 0); -} -.t-swipe-cell__right { - right: 0; - transform: translate3d(100%, 0, 0); -} diff --git a/components/swipe-cell/type.d.ts b/components/swipe-cell/type.d.ts deleted file mode 100644 index 27ab05d..0000000 --- a/components/swipe-cell/type.d.ts +++ /dev/null @@ -1,30 +0,0 @@ -export interface TdSwipeCellProps { - disabled?: { - type: BooleanConstructor; - value?: boolean; - required?: boolean; - }; - left?: { - type: ArrayConstructor; - value?: Array; - required?: boolean; - }; - opened?: { - type: BooleanConstructor; - optionalTypes: Array; - value?: boolean | Array; - required?: boolean; - }; - right?: { - type: ArrayConstructor; - value?: Array; - required?: boolean; - }; -} -export interface SwipeActionItem { - text: string; - className?: string; - style?: string; - onClick?: () => void; - [key: string]: any; -} diff --git a/components/swipe-cell/type.js b/components/swipe-cell/type.js deleted file mode 100644 index 5f16a47..0000000 --- a/components/swipe-cell/type.js +++ /dev/null @@ -1,3 +0,0 @@ -; -; -export {}; diff --git a/components/tab/index.js b/components/tab/index.js new file mode 100644 index 0000000..6b865a6 --- /dev/null +++ b/components/tab/index.js @@ -0,0 +1,126 @@ +Component({ + properties: { + // 数据源 + tabData: { + type: Array, + value: [], + observer: "dataChange" + }, + // 是否可以超出滚动 + tabCur: { + type: Number, + value: 0, + observer: "tabCurChange" + }, + // 是否可以超出滚动 + scroll: { + type: Boolean, + value: false + }, + // tab高度 + size: { + type: Number, + value: 90, + observer: "sizeChange" + }, + // 颜色 + color: { + type: String, + value: "" + } + }, + data: { + /* 未渲染数据 */ + windowWidth: 0, // 屏幕宽度 + tabItems: [], // 所有 tab 节点信息 + + /* 渲染数据 */ + scrolling: true, // 控制 scroll-view 滚动以在异步加载数据的时候能正确获得 dom 信息 + needTransition: false, // 下划线是否需要过渡动画 + translateX: 0, // 下划 line 的左边距离 + lineWidth: 0, // 下划 line 宽度 + scrollLeft: 0, // scroll-view 左边滚动距离 + }, + methods: { + /** + * 切换菜单 + */ + toggleTab(e) { + this.triggerEvent('change', {index: e.currentTarget.dataset.index}); + this.scrollByIndex(e.currentTarget.dataset.index); + }, + /** + * 滑动到指定位置 + * @param tabCur: 当前激活的tabItem的索引 + * @param needTransition: 下划线是否需要过渡动画, 第一次进来应设置为false + */ + scrollByIndex(tabCur, needTransition = true) { + let item = this.data.tabItems[tabCur]; + if (!item) return; + let itemWidth = item.width || 0, + itemLeft = item.left || 0; + + this.setData({needTransition: needTransition}); + + if (this.data.scroll) { // 超出滚动的情况 + // 保持滚动后当前 item '尽可能' 在屏幕中间 + let scrollLeft = itemLeft - (this.data.windowWidth - itemWidth) / 2; + + this.setData({ + tabCur: tabCur, + scrollLeft: scrollLeft, + translateX: itemLeft, + lineWidth: itemWidth + }); + } else { // 不超出滚动的情况 + this.setData({ + tabCur: tabCur, + translateX: itemLeft, + lineWidth: itemWidth + }); + } + }, + /** + * 监听数据变化, 如果改变重新初始化参数 + */ + dataChange(newVal, oldVal) { + this.setData({ + scrolling: false + }); + // 异步加载数据时候, 延迟执行 init 方法, 防止基础库 2.7.1 版本及以下无法正确获取 dom 信息 + setTimeout(() => this.init(), 0); + }, + /** + * 监听 tabCur 变化, 做对应处理 + */ + tabCurChange(newVal, oldVal) { + this.scrollByIndex(newVal); + }, + /** + * 监听 tab 高度变化, 最小值为80rpx + */ + sizeChange(newVal, oldVal) { + if (newVal <= 80) { + this.setData({size: 80}); + } + }, + /** + * 初始化函数 + */ + init() { + const {windowWidth} = wx.getSystemInfoSync(); + this.setData({windowWidth: windowWidth || 375}); + + this.createSelectorQuery().selectAll(".tabs__item-child").boundingClientRect((res) => { + this.setData({ + scrolling: true, + tabItems: res + }); + this.scrollByIndex(this.data.tabCur, false); + }).exec(); + } + }, + ready() { + this.init(); + } +}); diff --git a/components/tab/index.json b/components/tab/index.json new file mode 100644 index 0000000..6a1b9ce --- /dev/null +++ b/components/tab/index.json @@ -0,0 +1,3 @@ +{ + "component": true +} diff --git a/components/tab/index.scss b/components/tab/index.scss new file mode 100644 index 0000000..67b34bc --- /dev/null +++ b/components/tab/index.scss @@ -0,0 +1,67 @@ +@import "../../assets/css/variables"; + +$top-height: 90rpx; + +.scroll-view { + width: 100%; + height: $top-height; + overflow: hidden; +} + +.tabs-wrap { + padding-bottom: 20rpx; +} + +.tabs { + position: relative; + height: $top-height; + color: $black3; + display: flex; + + &--scroll { + white-space: nowrap !important; + display: block !important; + } + + &--scroll &__item { + flex: initial !important; + text-align: initial !important; + display: inline-block !important; + padding: 0 30rpx; + } + + &--scroll &__item-child { + display: block !important; + } + + &__item { + flex: 1; + text-align: center; + height: $top-height; + line-height: $top-height; + padding: 0 10rpx; + box-sizing: border-box; + transition: color 0.3s ease-in-out; + + &--cur { + color: $black1; + } + } + + &__item-child { + display: inline-block; + } + + &__line { + position: absolute; + left: 0; + bottom: 0; + background-color: $theme-color; + height: 4rpx; + width: 0rpx; + display: inline-block; + &.transition { + transition: width 0.3s, transform 0.3s; + } + } +} diff --git a/components/tab/index.wxml b/components/tab/index.wxml new file mode 100644 index 0000000..f586ec5 --- /dev/null +++ b/components/tab/index.wxml @@ -0,0 +1,19 @@ + + + + + {{item}} + + + + + diff --git a/components/tab/index.wxss b/components/tab/index.wxss new file mode 100644 index 0000000..2c375e8 --- /dev/null +++ b/components/tab/index.wxss @@ -0,0 +1,45 @@ +.scroll-view { + width: 100%; + height: 90rpx; + overflow: hidden; } + +.tabs-wrap { + padding-bottom: 20rpx; } + +.tabs { + position: relative; + height: 90rpx; + color: #999999; + display: flex; } + .tabs--scroll { + white-space: nowrap !important; + display: block !important; } + .tabs--scroll .tabs__item { + flex: initial !important; + text-align: initial !important; + display: inline-block !important; + padding: 0 30rpx; } + .tabs--scroll .tabs__item-child { + display: block !important; } + .tabs__item { + flex: 1; + text-align: center; + height: 90rpx; + line-height: 90rpx; + padding: 0 10rpx; + box-sizing: border-box; + transition: color 0.3s ease-in-out; } + .tabs__item--cur { + color: #333333; } + .tabs__item-child { + display: inline-block; } + .tabs__line { + position: absolute; + left: 0; + bottom: 0; + background-color: #3F82FD; + height: 4rpx; + width: 0rpx; + display: inline-block; } + .tabs__line.transition { + transition: width 0.3s, transform 0.3s; } diff --git a/components/tabs/README.en-US.md b/components/tabs/README.en-US.md deleted file mode 100644 index cb5f68b..0000000 --- a/components/tabs/README.en-US.md +++ /dev/null @@ -1,34 +0,0 @@ -:: BASE_DOC :: - -## API -### Tabs Props - -name | type | default | description | required --- | -- | -- | -- | -- -animation | Object | - | Typescript：`TabAnimation` `type TabAnimation = { duration: number } & Record`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N -external-classes | Array | - | `['t-class', 't-class-item', 't-class-active', 't-class-track']` | N -placement | String | top | options：left/top | N -show-bottom-line | Boolean | true | \- | N -sticky | Boolean | false | \- | N -sticky-props | Object | - | Typescript：`StickyProps`，[Sticky API Documents](./sticky?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N -swipeable | Boolean | true | \- | N -value | String / Number | - | Typescript：`TabValue` `type TabValue = string | number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N -default-value | String / Number | undefined | uncontrolled property。Typescript：`TabValue` `type TabValue = string | number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N - -### Tabs Events - -name | params | description --- | -- | -- -change | `(value: TabValue, label: string)` | \- -click | `(value: TabValue, label: string)` | \- -scroll | `({ scrollTop: number, isFixed: boolean })` | \- - -### TabPanel Props - -name | type | default | description | required --- | -- | -- | -- | -- -destroy-on-hide | Boolean | true | \- | N -disabled | Boolean | false | \- | N -label | String | - | \- | N -panel | String / Slot | - | \- | N -value | String / Number | - | Typescript：`TabValue` | N diff --git a/components/tabs/README.md b/components/tabs/README.md deleted file mode 100644 index 1e97cfd..0000000 --- a/components/tabs/README.md +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: Tabs 选项卡 -description: 用于内容分类后的展示切换。 -spline: navigation -isComponent: true ---- - - -## 引入 - -全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。 - -```json -"usingComponents": { - "t-tabs": "tdesign-miniprogram/tabs/tabs", - "t-tab-panel": "tdesign-miniprogram/tabs/tab-panel" -} -``` - -## 主题定制 - -CSS 变量名|说明 ---|-- ---td-tab-nav-bg-color | 选项卡背景颜色 ---td-tab-item-color | 选项卡字体颜色 ---td-tab-item-active-color | 选项卡激活时字体颜色 ---td-tab-item-disabled-color | 选项卡禁止状态时字体颜色 ---td-tab-track-color | 选项卡滑块颜色 ---td-tab-track-thickness | 选项卡滑块厚度（水平时为高度，垂直时为宽度） ---td-tab-border-color | 选项卡底部边框颜色 - -## 代码演示 - -### 基础选项卡 - -{{ base }} - -### 超过屏幕滚动 -{{ scroll }} - -### 无下划线 -{{ unline }} - -### 动画时间可调整 -{{ adjust-time }} - -### 选项卡状态 -{{ status }} - -### 竖向选项卡 -{{ vertical }} - -### 选中态文字尺寸规格 -{{ size }} - - - - - - -### 受控用法 - -```html - - 标签一内容 - 标签二内容 - -``` - -```js -Page({ - data: { - value: '0', - }, - onTabsChange(e) { - this.setData({ value: e.detail.value }) - }, -}); -``` - -### 与 Popup 使用 - -```html - - - 标签一内容 - 标签二内容 - 标签三内容 - - -``` - -```js -Page({ - data: { - visible: false - }, - showPopup() { - this.setData({ - visible: true - }, () => { - const tabs = this.selectComponent('tabs'); - - tabs.setTrack(); // 这一步很重要，因为小程序的无法正确执行生命周期，所以需要手动设置下 tabs 的滑块 - }) - } -}) -``` - -## API -### Tabs Props - -名称 | 类型 | 默认值 | 说明 | 必传 --- | -- | -- | -- | -- -animation | Object | - | 动画效果设置。其中 duration 表示动画时长。TS 类型：`TabAnimation` `type TabAnimation = { duration: number } & Record`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N -external-classes | Array | - | 组件类名，分别用于设置 组件外层元素、选项卡单项、选项卡激活态、滚动条样式类名 等类名。`['t-class', 't-class-item', 't-class-active', 't-class-track']` | N -placement | String | top | 选项卡位置。可选项：left/top | N -show-bottom-line | Boolean | true | 是否展示底部激活线条 | N -sticky | Boolean | false | 是否开启粘性布局 | N -sticky-props | Object | - | 透传至 Sticky 组件。TS 类型：`StickyProps`，[Sticky API Documents](./sticky?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N -swipeable | Boolean | true | 是否可以滑动切换 | N -value | String / Number | - | 激活的选项卡值。TS 类型：`TabValue` `type TabValue = string | number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N -default-value | String / Number | undefined | 激活的选项卡值。非受控属性。TS 类型：`TabValue` `type TabValue = string | number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N - -### Tabs Events - -名称 | 参数 | 描述 --- | -- | -- -change | `(value: TabValue, label: string)` | 激活的选项卡发生变化时触发 -click | `(value: TabValue, label: string)` | 点击 tab 选项卡时触发 -scroll | `({ scrollTop: number, isFixed: boolean })` | 页面滚动时触发，scrollTop: 距离顶部位置，isFixed: 是否吸顶 - -### TabPanel Props - -名称 | 类型 | 默认值 | 说明 | 必传 --- | -- | -- | -- | -- -destroy-on-hide | Boolean | true | 选项卡内容隐藏时是否销毁 | N -disabled | Boolean | false | 是否禁用当前选项卡 | N -label | String | - | 选项卡名称 | N -panel | String / Slot | - | 用于自定义选项卡面板内容 | N -value | String / Number | - | 选项卡的值，唯一标识。TS 类型：`TabValue` | N diff --git a/components/tabs/props.d.ts b/components/tabs/props.d.ts deleted file mode 100644 index 215fa49..0000000 --- a/components/tabs/props.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { TdTabsProps } from './type'; -declare const props: TdTabsProps; -export default props; diff --git a/components/tabs/props.js b/components/tabs/props.js deleted file mode 100644 index da54bec..0000000 --- a/components/tabs/props.js +++ /dev/null @@ -1,35 +0,0 @@ -const props = { - animation: { - type: Object, - }, - externalClasses: { - type: Array, - }, - placement: { - type: String, - value: 'top', - }, - showBottomLine: { - type: Boolean, - value: true, - }, - sticky: { - type: Boolean, - value: false, - }, - stickyProps: { - type: Object, - }, - swipeable: { - type: Boolean, - value: true, - }, - value: { - type: null, - value: null, - }, - defaultValue: { - type: null, - }, -}; -export default props; diff --git a/components/tabs/tab-panel-props.d.ts b/components/tabs/tab-panel-props.d.ts deleted file mode 100644 index 9329be0..0000000 --- a/components/tabs/tab-panel-props.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { TdTabPanelProps } from './type'; -declare const props: TdTabPanelProps; -export default props; diff --git a/components/tabs/tab-panel-props.js b/components/tabs/tab-panel-props.js deleted file mode 100644 index c2a6e07..0000000 --- a/components/tabs/tab-panel-props.js +++ /dev/null @@ -1,21 +0,0 @@ -const props = { - destroyOnHide: { - type: Boolean, - value: true, - }, - disabled: { - type: Boolean, - value: false, - }, - label: { - type: String, - value: '', - }, - panel: { - type: String, - }, - value: { - type: null, - }, -}; -export default props; diff --git a/components/tabs/tab-panel.d.ts b/components/tabs/tab-panel.d.ts deleted file mode 100644 index 7403133..0000000 --- a/components/tabs/tab-panel.d.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { SuperComponent, RelationsOptions } from '../common/src/index'; -export default class TabPanel extends SuperComponent { - relations: RelationsOptions; - properties: import("./type").TdTabPanelProps; - data: { - prefix: string; - classPrefix: string; - active: boolean; - hide: boolean; - }; - observers: { - label(): void; - }; - getComputedName(): string; - update(): void; - render(active: Boolean, parent: any): void; -} diff --git a/components/tabs/tab-panel.js b/components/tabs/tab-panel.js deleted file mode 100644 index e24af40..0000000 --- a/components/tabs/tab-panel.js +++ /dev/null @@ -1,54 +0,0 @@ -var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { - var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; - if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); - else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; - return c > 3 && r && Object.defineProperty(target, key, r), r; -}; -import { SuperComponent, wxComponent } from '../common/src/index'; -import props from './tab-panel-props'; -import config from '../common/config'; -const { prefix } = config; -const name = `${prefix}-tab-panel`; -let TabPanel = class TabPanel extends SuperComponent { - constructor() { - super(...arguments); - this.relations = { - './tabs': { - type: 'ancestor', - }, - }; - this.properties = props; - this.data = { - prefix, - classPrefix: name, - active: false, - hide: true, - }; - this.observers = { - label() { - this.update(); - }, - }; - } - getComputedName() { - if (this.properties.value != null) { - return `${this.properties.value}`; - } - return `${this.index}`; - } - update() { - if (this.parent) { - this.parent.updateTabs(); - } - } - render(active, parent) { - this.setData({ - active, - hide: !parent.animated && !active, - }); - } -}; -TabPanel = __decorate([ - wxComponent() -], TabPanel); -export default TabPanel; diff --git a/components/tabs/tab-panel.json b/components/tabs/tab-panel.json deleted file mode 100644 index a89ef4d..0000000 --- a/components/tabs/tab-panel.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "component": true, - "usingComponents": {} -} diff --git a/components/tabs/tab-panel.wxml b/components/tabs/tab-panel.wxml deleted file mode 100644 index ab1f6f2..0000000 --- a/components/tabs/tab-panel.wxml +++ /dev/null @@ -1,9 +0,0 @@ - - - {{panel}} - - diff --git a/components/tabs/tab-panel.wxss b/components/tabs/tab-panel.wxss deleted file mode 100644 index 2a5dd88..0000000 --- a/components/tabs/tab-panel.wxss +++ /dev/null @@ -1,37 +0,0 @@ -.t-float-left { - float: left; -} -.t-float-right { - float: right; -} -@keyframes tdesign-fade-out { - from { - opacity: 1; - } - to { - opacity: 0; - } -} -.hotspot-expanded.relative { - position: relative; -} -.hotspot-expanded::after { - content: ''; - display: block; - position: absolute; - left: 0; - top: 0; - right: 0; - bottom: 0; - transform: scale(1.5); -} -:host { - flex-shrink: 0; - width: 100%; - height: 100%; - box-sizing: border-box; -} -.t-tab-panel { - height: inherit; - width: inherit; -} diff --git a/components/tabs/tabs.d.ts b/components/tabs/tabs.d.ts deleted file mode 100644 index 809620f..0000000 --- a/components/tabs/tabs.d.ts +++ /dev/null @@ -1,49 +0,0 @@ -/// -import { SuperComponent, RelationsOptions } from '../common/src/index'; -export default class Tabs extends SuperComponent { - behaviors: string[]; - externalClasses: string[]; - relations: RelationsOptions; - properties: import("./type").TdTabsProps; - controlledProps: { - key: string; - event: string; - }[]; - observers: { - value(name: any): void; - animation(v: any): void; - placement(): void; - }; - data: { - prefix: string; - classPrefix: string; - tabs: any[]; - currentIndex: number; - trackStyle: string; - isScrollX: boolean; - isScrollY: boolean; - direction: string; - animate: { - duration: number; - }; - offset: number; - }; - created(): void; - attached(): void; - methods: { - adjustPlacement(): void; - }; - updateTabs(cb: any): void; - setCurrentIndexByName(name: any): void; - setCurrentIndex(index: number): void; - getCurrentName(): any; - calcScrollOffset(containerWidth: number, targetLeft: number, targetWidth: number, offset: number, currentIndex: number): number; - setTrack(): void; - onTabTap(event: any): void; - onTouchStart(event: any): void; - onTouchMove(event: any): void; - onTouchEnd(): void; - onTouchScroll(event: WechatMiniprogram.CustomEvent): void; - changeIndex(index: any): void; - getAvailableTabIndex(deltaX: number): number; -} diff --git a/components/tabs/tabs.js b/components/tabs/tabs.js deleted file mode 100644 index d99a014..0000000 --- a/components/tabs/tabs.js +++ /dev/null @@ -1,241 +0,0 @@ -var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { - var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; - if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); - else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; - return c > 3 && r && Object.defineProperty(target, key, r), r; -}; -import dom from '../behaviors/dom'; -import touch from '../behaviors/touch'; -import { SuperComponent, wxComponent } from '../common/src/index'; -import props from './props'; -import config from '../common/config'; -const { prefix } = config; -const name = `${prefix}-tabs`; -var Position; -(function (Position) { - Position["top"] = "top"; - Position["right"] = "right"; - Position["bottom"] = "bottom"; - Position["left"] = "left"; -})(Position || (Position = {})); -const trackLineWidth = 30; -let Tabs = class Tabs extends SuperComponent { - constructor() { - super(...arguments); - this.behaviors = [dom, touch]; - this.externalClasses = [`${prefix}-class`, `${prefix}-class-item`, `${prefix}-class-active`, `${prefix}-class-track`]; - this.relations = { - './tab-panel': { - type: 'descendant', - linked(target) { - this.children.push(target); - target.index = this.children.length - 1; - this.updateTabs(); - }, - unlinked(target) { - this.children = this.children.filter((item) => item.index !== target.index); - this.updateTabs(() => this.setTrack()); - }, - }, - }; - this.properties = props; - this.controlledProps = [ - { - key: 'value', - event: 'change', - }, - ]; - this.observers = { - value(name) { - if (name !== this.getCurrentName()) { - this.setCurrentIndexByName(name); - } - }, - animation(v) { - this.setData({ animate: v }); - }, - placement() { - this.adjustPlacement(); - }, - }; - this.data = { - prefix, - classPrefix: name, - tabs: [], - currentIndex: -1, - trackStyle: '', - isScrollX: true, - isScrollY: false, - direction: 'X', - animate: { duration: 0 }, - offset: 0, - }; - this.methods = { - adjustPlacement() { - const { placement } = this.properties; - let isScrollX = false; - let isScrollY = false; - if (placement === Position.top || placement === Position.bottom) { - isScrollX = true; - } - else { - isScrollY = true; - } - this.setData({ - isScrollX, - isScrollY, - direction: isScrollX ? 'X' : 'Y', - }); - }, - }; - } - created() { - this.children = this.children || []; - } - attached() { - wx.nextTick(() => { - this.setTrack(); - }); - this.adjustPlacement(); - this.gettingBoundingClientRect(`.${name}`, true).then((res) => { - this.containerWidth = res[0].width; - }); - } - updateTabs(cb) { - const { children } = this; - this.setData({ - tabs: children.map((child) => child.data), - }, cb); - this.setCurrentIndexByName(this.properties.value); - } - setCurrentIndexByName(name) { - const { children } = this; - const index = children.findIndex((child) => child.getComputedName() === `${name}`); - if (index > -1) { - this.setCurrentIndex(index); - } - } - setCurrentIndex(index) { - if (index <= -1 || index >= this.children.length) - return; - this.children.forEach((child, idx) => { - const isActive = index === idx; - if (isActive !== child.data.active) { - child.render(isActive, this); - } - }); - if (this.data.currentIndex === index) - return; - this.setData({ - currentIndex: index, - }); - this.setTrack(); - } - getCurrentName() { - if (this.children) { - const activeTab = this.children[this.data.currentIndex]; - if (activeTab) { - return activeTab.getComputedName(); - } - } - } - calcScrollOffset(containerWidth, targetLeft, targetWidth, offset, currentIndex) { - return currentIndex * targetWidth - (1 / 2) * containerWidth + targetWidth / 2; - } - setTrack() { - if (!this.properties.showBottomLine) - return; - const { children } = this; - if (!children) - return; - const { currentIndex, isScrollX, direction } = this.data; - if (currentIndex <= -1) - return; - this.gettingBoundingClientRect(`.${prefix}-tabs__item`, true) - .then((res) => { - const rect = res[currentIndex]; - if (!rect) - return; - let count = 0; - let distance = 0; - for (const item of res) { - if (count < currentIndex) { - distance += isScrollX ? item.width : item.height; - count += 1; - } - } - if (this.containerWidth) { - const offset = this.calcScrollOffset(this.containerWidth, rect.left, rect.width, this.data.offset, currentIndex); - this.setData({ - offset, - }); - } - if (isScrollX) { - distance += (rect.width - trackLineWidth) / 2; - } - let trackStyle = `-webkit-transform: translate${direction}(${distance}px); - transform: translate${direction}(${distance}px); - `; - trackStyle += isScrollX ? `width: ${trackLineWidth}px;` : `height: ${rect.height}px;`; - this.setData({ - trackStyle, - }); - }) - .catch((err) => { - this.triggerEvent('error', err); - }); - } - onTabTap(event) { - const { index } = event.currentTarget.dataset; - this.changeIndex(index); - } - onTouchStart(event) { - if (!this.properties.swipeable) - return; - this.touchStart(event); - } - onTouchMove(event) { - if (!this.properties.swipeable) - return; - this.touchMove(event); - } - onTouchEnd() { - if (!this.properties.swipeable) - return; - const { direction, deltaX, offsetX } = this; - const minSwipeDistance = 50; - if (direction === 'horizontal' && offsetX >= minSwipeDistance) { - const index = this.getAvailableTabIndex(deltaX); - if (index !== -1) { - this.changeIndex(index); - } - } - } - onTouchScroll(event) { - this._trigger('scroll', event.detail); - } - changeIndex(index) { - const currentTab = this.data.tabs[index]; - const { value, label } = currentTab; - if (!(currentTab === null || currentTab === void 0 ? void 0 : currentTab.disabled) && index !== this.data.currentIndex) { - this._trigger('change', { value, label }); - } - this._trigger('click', { value, label }); - } - getAvailableTabIndex(deltaX) { - const step = deltaX > 0 ? -1 : 1; - const { currentIndex, tabs } = this.data; - const len = tabs.length; - for (let i = step; currentIndex + step >= 0 && currentIndex + step < len; i += step) { - const newIndex = currentIndex + i; - if (newIndex >= 0 && newIndex < len && tabs[newIndex] && !tabs[newIndex].disabled) { - return newIndex; - } - } - return -1; - } -}; -Tabs = __decorate([ - wxComponent() -], Tabs); -export default Tabs; diff --git a/components/tabs/tabs.json b/components/tabs/tabs.json deleted file mode 100644 index 93d5828..0000000 --- a/components/tabs/tabs.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "component": true, - "usingComponents": { - "t-sticky": "/components/sticky/sticky" - } -} diff --git a/components/tabs/tabs.wxml b/components/tabs/tabs.wxml deleted file mode 100644 index 34e6a54..0000000 --- a/components/tabs/tabs.wxml +++ /dev/null @@ -1,53 +0,0 @@ - - - - - - - - - {{item.label}} - - - - - - - - - - - - diff --git a/components/tabs/tabs.wxs b/components/tabs/tabs.wxs deleted file mode 100644 index ca86ad5..0000000 --- a/components/tabs/tabs.wxs +++ /dev/null @@ -1,24 +0,0 @@ -/* eslint-disable */ -/* utils */ - -/** - * animate */ -// 为tab切换添加动画 -function animate(options) { - var result = - '-webkit-transition-duration: ' + - options.duration + - 's' + - ';transition-duration: ' + - options.duration + - 's'; - result += - options.direction === 'Y' - ? ';transform: translate3d( 0,' + -100 * options.currentIndex + '%, 0)' - : ';transform: translate3d( ' + -100 * options.currentIndex + '%,0, 0)'; - return result; -} - -module.exports = { - animate: animate, -}; diff --git a/components/tabs/tabs.wxss b/components/tabs/tabs.wxss deleted file mode 100644 index 9f89849..0000000 --- a/components/tabs/tabs.wxss +++ /dev/null @@ -1,175 +0,0 @@ -.t-float-left { - float: left; -} -.t-float-right { - float: right; -} -@keyframes tdesign-fade-out { - from { - opacity: 1; - } - to { - opacity: 0; - } -} -.hotspot-expanded.relative { - position: relative; -} -.hotspot-expanded::after { - content: ''; - display: block; - position: absolute; - left: 0; - top: 0; - right: 0; - bottom: 0; - transform: scale(1.5); -} -page { - --td-tab-nav-bg-color: #fff; - --td-tab-item-color: rgba(0, 0, 0, 0.6); - --td-tab-item-active-color: #0052d9; - --td-tab-item-disabled-color: #c8c9cc; - --td-tab-track-color: #0052d9; - --td-tab-track-thickness: 4rpx; - --td-tab-border-color: rgba(150, 95, 95, 0.12); -} -.t-tabs { - position: relative; - font-size: 28rpx; - background-color: #fff; -} -.t-tabs__wrapper { - display: flex; - overflow: hidden; -} -.t-tabs .t-is-active { - font-weight: 700; - color: var(--td-tab-item-active-color, #0052d9); -} -.t-tabs .t-is-disabled { - color: var(--td-tab-item-disabled-color, #c8c9cc); -} -.t-tabs__item { - flex: 1; - font-weight: 400; - color: var(--td-tab-item-color, rgba(0, 0, 0, 0.6)); -} -.t-tabs__item--top, -.t-tabs__item--bottom { - height: 92rpx; - line-height: 92rpx; - text-align: center; - min-width: 162rpx; -} -.t-tabs__item--left, -.t-tabs__item--right { - text-align: center; - height: 108rpx; - line-height: 108rpx; - width: 208rpx; - background-color: #f3f3f3; -} -.t-tabs__item--left.t-is-active, -.t-tabs__item--right.t-is-active { - background-color: #fff; -} -.t-tabs__content { - overflow: hidden; -} -.t-tabs__nav { - position: relative; - user-select: none; - width: 100%; - display: flex; - flex-wrap: nowrap; - align-items: center; -} -.t-tabs__nav--left, -.t-tabs__nav--right { - flex-direction: column; -} -.t-tabs__track { - position: absolute; - font-weight: 600; - z-index: 1; - transition-duration: 0.3s; - background-color: var(--td-tab-track-color, #0052d9); -} -.t-tabs__track--left { - left: 0; - top: 0; - width: var(--td-tab-track-thickness, 4rpx); -} -.t-tabs__track--right { - right: 0; - top: 0; - width: var(--td-tab-track-thickness, 4rpx); -} -.t-tabs__scroll--top, -.t-tabs__scroll--bottom { - height: 92rpx; - position: relative; - background-color: var(--td-tab-nav-bg-color, #fff); -} -.t-tabs__scroll--top::after, -.t-tabs__scroll--bottom::after { - content: ''; -} -.t-tabs__scroll--top { - border-bottom: solid 1rpx var(--td-tab-border-color, rgba(150, 95, 95, 0.12)); -} -.t-tabs__scroll--left, -.t-tabs__scroll--right { - width: 208rpx; - max-height: 100vh; -} -.t-tabs__content-inner { - display: block; -} -.t-tabs.t-tabs--top, -.t-tabs.t-tabs--bottom { - flex-wrap: wrap; -} -.t-tabs.t-tabs--top .t-tabs__content-inner, -.t-tabs.t-tabs--bottom .t-tabs__content-inner { - position: relative; - width: 100%; - height: 100%; - display: flex; - transition-property: transform; -} -.t-tabs.t-tabs--top .t-tabs__track, -.t-tabs.t-tabs--bottom .t-tabs__track { - left: 0; - bottom: 0; - height: var(--td-tab-track-thickness, 4rpx); -} -.t-tabs.t-tabs--top .t-tabs__content, -.t-tabs.t-tabs--bottom .t-tabs__content { - width: 100%; -} -.t-tabs.t-tabs--bottom { - flex-direction: column-reverse; -} -.t-tabs.t-tabs--left .t-tabs__content-inner, -.t-tabs.t-tabs--right .t-tabs__content-inner { - position: relative; - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - transition-property: transform; -} -.t-tabs.t-tabs--left .t-tabs__content, -.t-tabs.t-tabs--right .t-tabs__content { - width: calc(100% - 208rpx); - height: 100%; - position: absolute; - top: 0; - left: 208rpx; - overflow: hidden; -} -.t-tabs.t-tabs--right { - flex-direction: row-reverse; -} diff --git a/components/tabs/type.d.ts b/components/tabs/type.d.ts deleted file mode 100644 index 38a3313..0000000 --- a/components/tabs/type.d.ts +++ /dev/null @@ -1,65 +0,0 @@ -import { StickyProps } from '../sticky/index'; -export interface TdTabsProps { - animation?: { - type: ObjectConstructor; - value?: TabAnimation; - }; - externalClasses?: { - type: ArrayConstructor; - value?: ['t-class', 't-class-item', 't-class-active', 't-class-track']; - }; - placement?: { - type: StringConstructor; - value?: 'left' | 'top'; - }; - showBottomLine?: { - type: BooleanConstructor; - value?: boolean; - }; - sticky?: { - type: BooleanConstructor; - value?: boolean; - }; - stickyProps?: { - type: ObjectConstructor; - value?: StickyProps; - }; - swipeable?: { - type: BooleanConstructor; - value?: boolean; - }; - value?: { - type: null; - value?: TabValue; - }; - defaultValue?: { - type: null; - value?: TabValue; - }; -} -export interface TdTabPanelProps { - destroyOnHide?: { - type: BooleanConstructor; - value?: boolean; - }; - disabled?: { - type: BooleanConstructor; - value?: boolean; - }; - label?: { - type: StringConstructor; - value?: string; - }; - panel?: { - type: StringConstructor; - value?: string; - }; - value?: { - type: null; - value?: TabValue; - }; -} -export declare type TabAnimation = { - duration: number; -} & Record; -export declare type TabValue = string | number; diff --git a/components/tabs/type.js b/components/tabs/type.js deleted file mode 100644 index cb0ff5c..0000000 --- a/components/tabs/type.js +++ /dev/null @@ -1 +0,0 @@ -export {}; diff --git a/images/add.png b/images/add.png new file mode 100644 index 0000000000000000000000000000000000000000..6b8c336dc93bec6fadc835af5b3b4ae6f1555372 GIT binary patch literal 1562 zcmaJ>eNdBi9Dl+>*g+7EjCt1MqbPW7&)(Vdw1smUFm;3zb9uLLZa?8U+@A65!ELk@ zLYY#Bh!b?!p-XE1*rV%evO)z+DPtR2OIV;cFCuM|nNa*PEaVHMC?7)wVlH2R^D&$+fX5z$iAGu0 z;Cgk&SS;qGKniHuj-#m4>Et;@Jd(;s1sH~*d?6|nav22I;kMBx7uV*PJ+7bz4l_mA zX@a!DVMWtwvY1vNOs0=Zu-YeNZH}=vF%3gqCOazN@xvvJ19iIphgz)@Xa}taPxAdw zVMngp4p2RCkj0dl8QhxL;ZSy5MFA5{Qn@6#cD#!@1td*63P?MwQiZ#g2B)kbY!=e# zNFC+qbhy^$piMS2(5e*(qrxKy3$D@#RT)ZA8YUIW1Okmrrop6`SR)aOB}$1@DIMpk zNprCk*ywSt7-ngNd^rM z_g}*vzhWE|-cDGTIZT)z*ciuCjI~qCBQ+2dQK?lcb6vgNwaTm+N_Iv5iL;2`x5NMZ z09VOU9!+bE>f2N4ty~(64_@Ds*_ag-GO)fa?{CaOZYgtr#WbwGK-PjeSft!V=w?KH z)cNO2BN5v{;pO6lyAOh*GE07YTSG(b-OhOD`^&YV#w72jtEN>QUn+~(KU5b)53y>l zM$~)X&1mWly_I)--e5`{yMCkBLl;Hf=;wBPOeb;tfm#Z8f%b=bSu7LV4{Xap{S(o(l8Mk$oM_(E95$I31#bmaFT}y&~y)aqAJz8m_aO~|=%&!RgR{QzJlJ(`ak*^M?pr_~%+U`o>WzyNl)YYmZJRV$FHTOq z)<0*NzS6HP(qc2`X;dF>EYaU;OhH$C-rigpiu1hC{nMTEC-3~8`RF&J z!P%3ZoT!)Woxk_?aV^l+vgReS=^aV*o670mwfAzSrgrVzeG^ng)7ir<+e*3L$N025 z=axek22UehE&g@WPcJFm)#gn(gHQXhc;(FU&*lz))uTvJoQY)Ph0S>foA|@cKVRx_ zFV|W7+isq(+I$C#w!b&Lpy4p>33Zpv7qtxy$oqCbJe}RqTIrj8)6?~wvHyPk#UmY8 fPF=cJ4NZae9ll{?|FE4C{#$D`+3GJAu6pMm&A4HB literal 0 HcmV?d00001 diff --git a/pages/foot-tab/foot-tab.json b/pages/foot-tab/foot-tab.json index 20ec068..ec11f61 100644 --- a/pages/foot-tab/foot-tab.json +++ b/pages/foot-tab/foot-tab.json @@ -1,5 +1,7 @@ { "component": true, "usingComponents": { + "t-tab-bar": "/components/tab-bar/tab-bar", + "t-tab-bar-item": "/components/tab-bar/tab-bar-item" } } diff --git a/pages/today/index.js b/pages/today/index.js index 1d4b6a8..5bcc527 100644 --- a/pages/today/index.js +++ b/pages/today/index.js @@ -1,5 +1,6 @@ // pages/today/index.js const app = getApp(); +let pageStart = 1; Page({ /** @@ -9,51 +10,134 @@ Page({ aIconList: ['check-rectangle', 'star-filled', 'notification', 'info-circle'], taskList: [{'taskId':'1','title':'标题德外旗舰店1','note':'2022-11-11'},{'taskId':'2','title':'标题德外旗舰店2','note':'2022-11-11'}], todayList: [{'taskId':'1','title':'标题德外旗舰店1','note':'2022-11-11'},{'taskId':'2','title':'标题德外旗舰店2','note':'2022-11-11'}], - delayList: [{'taskId':'1','title':'标题德外旗舰店1','note':'2022-11-11'}], + delayList: [{'taskId':'1','title':'si哦大家艾吉奥是我','note':'2022-11-11'}, + {'taskId':'2','title':'si哦大家艾吉奥是2321','note':'2022-11-11'}, + {'taskId':'3','title':'打SD卡我怕','note':'2022-11-11'}, + {'taskId':'4','title':'标无间道i文件舰店1','note':'2022-11-11'}, + {'taskId':'5','title':'标题大家啊我i家1','note':'2022-11-11'}, + {'taskId':'6','title':'标题德外而我却','note':'2022-11-11'}, + {'taskId':'7','title':'标题德外旗额我去问1','note':'2022-11-11'}, + {'taskId':'8','title':'千而万请问确定德外旗舰店1','note':'2022-11-11'}, + {'taskId':'9','title':'标请问请问破千万1','note':'2022-11-11'}, + {'taskId':'10','title':'标而且我请问请问1','note':'2022-11-11'}, + {'taskId':'11','title':'代欧王大炮物品代码','note':'2022-11-11'}, + {'taskId':'12','title':'到ID我们','note':'2022-11-11'}, + {'taskId':'13','title':'我去哦额陪娃欧美大片请我们','note':'2022-11-11'}, + {'taskId':'14','title':'请问哦气雾剂群殴','note':'2022-11-11'} + ], + duration: 300, // swiper-item 切换过渡时间 + categoryCur: 0, // 当前数据列索引 + categoryMenu: ['任务清单','收藏任务','延期任务'], // 分类菜单数据, 字符串数组格式 + categoryData: [], // 所有数据列 }, - - /** - * 生命周期函数--监听页面加载 - */ - onLoad(options) { - - }, - - /** - * 生命周期函数--监听页面初次渲染完成 - */ - onReady() { - - }, - - /** - * 生命周期函数--监听页面显示 - */ - onShow() { + getList(type, currentPage) { + let currentCur = this.data.categoryCur; + let pageData = this.getCurrentData(currentCur); + if (pageData.end) return; + pageData.requesting = true; + this.setCurrentData(currentCur, pageData); wx.showLoading({ title: '请稍候...', mask: true, }) - console.log('请求中...') app.$api.taskList({}).then(res =>{ - console.log(res); - console.log(res.data); this.setData({ taskList:res.data.taskList, }) + let data = res.data || { + taskList: [], + over: false + }; + let listData = this.data.delayList || []; + pageData.requesting = false; + if (type === 'refresh') { + pageData.listData = listData; + pageData.end = data.over; + pageData.page = currentPage + 1; + } else { + pageData.listData = pageData.listData.concat(listData); + pageData.end = data.over; + pageData.page = currentPage + 1; + } + this.setCurrentData(currentCur, pageData); }) }, - onEdit(e) { - console.log('收藏' + e.currentTarget.dataset.id); + // 更新页面数据 + setCurrentData(currentCur, pageData) { + let categoryData = this.data.categoryData + categoryData[currentCur] = pageData + this.setData({ + categoryData: categoryData + }) }, - onDelete(e) { - console.log('删除' + e.currentTarget.dataset.id); + // 获取当前激活页面的数据 + getCurrentData() { + return this.data.categoryData[this.data.categoryCur] }, - onTabsChange(event) { - console.log(`Change tab, tab-panel value is ${event.detail.value}.`); + // 顶部tab切换事件 + toggleCategory(e) { + this.setData({ + duration: 0 + }); + setTimeout(() => { + this.setData({ + categoryCur: e.detail.index + }); + }, 0); }, - - onTabsClick(event) { - console.log(`Click tab, tab-panel value is ${event.detail.value}.`); + // 页面滑动切换事件 + animationFinish(e) { + this.setData({ + duration: 300 + }); + setTimeout(() => { + this.setData({ + categoryCur: e.detail.current + }); + let pageData = this.getCurrentData(); + if (pageData.listData.length === 0) { + this.getList('refresh', pageStart); + } + }, 0); }, + // 刷新数据 + refresh() { + this.getList('refresh', pageStart); + }, + // 加载更多 + more() { + this.getList('more', this.getCurrentData(this.data.categoryCur).page); + }, + showArticle(e) { + console.log(e.detail) + // wx.setClipboardData({ + // data: e.currentTarget.dataset.link, + // success(res) { + // wx.showToast({ + // icon: "none", + // title: "链接已复制到剪切板" + // }) + // } + // }) + }, + onLoad() { + let categoryData = []; + this.data.categoryMenu.forEach(index =>{ + categoryData.push({ + categoryCur: index, + requesting: false, + end: false, + emptyShow: false, + page: pageStart, + listData: [] + }); + }) + this.setData({ + categoryData + }); + // 第一次加载延迟 350 毫秒 防止第一次动画效果不能完全体验 + setTimeout(() => { + this.refresh(); + }, 350); + } }) diff --git a/pages/today/index.json b/pages/today/index.json index b36ebcb..8db9b34 100644 --- a/pages/today/index.json +++ b/pages/today/index.json @@ -1,5 +1,7 @@ { "usingComponents": { - "foot-tab": "../foot-tab/foot-tab" + "foot-tab": "../foot-tab/foot-tab", + "tab": "../../components/tab/index", + "scroll": "../../components/scroll/index" } } diff --git a/pages/today/index.wxml b/pages/today/index.wxml index ccb029c..9bc9645 100644 --- a/pages/today/index.wxml +++ b/pages/today/index.wxml @@ -1,42 +1,39 @@ - - - - - - 收藏 - 删除 + + + + + + + + + + + + + + + {{item.note}} + - - - - - - - 删除 - - - - - - - - 删除 - - - - - - - - - + + + diff --git a/pages/today/index.wxss b/pages/today/index.wxss index 602d006..35cc4f4 100644 --- a/pages/today/index.wxss +++ b/pages/today/index.wxss @@ -1,52 +1,39 @@ /* pages/today/index.wxss */ -.t-swipe-cell-demo-btn-wrapper { - height: 100%; +.top-wrap { + position: fixed; + left: 0; + top: 0; + width: 100%; + background-color: #ffffff; + z-index: 99; + box-shadow: 0 0 20rpx -5rpx rgba(0, 0, 0, 0.1); } -.t-swipe-cell-demo-btn { - display: inline-flex; - justify-content: center; - align-items: center; - width: 144rpx !important; - height: 100%; - text-align: center; - color: white; +swiper { + height: 100vh; } -.t-swipe-cell-demo-btn.delete-btn { - background-color: #e34d59; +.cells { + background: #ffffff; + margin-top: 20rpx; } -.t-swipe-cell-demo-btn.edit-btn { - background-color: #ed7b2f; +.cell { + padding: 20rpx; } -.t-swipe-cell-demo-btn.favor-btn { - background-color: #0052d9; +.cell:not(:last-child) { + border-bottom: 1rpx solid #ebedf0; } -.title-image-large { - margin-right: 8rpx; - width: 144rpx; - height: 144rpx; +.cell .name { + display: flex; + height: 50rpx; + font-size: 35rpx; + margin-bottom: 12rpx; } -.text_ath { - text-decoration:line-through -} - -.custom-tabs t-tab-panel { - text-align: center; - justify-content: center; - height: 172rpx; - line-height: 172rpx; - color: rgba(0, 0, 0, 0.26); -} - -.phone-box { - position: absolute; - bottom: 30rpx; - left: 30rpx; - width: 130rpx; - height: 130rpx; +.cell .date { + color: #999999; + font-size: 24rpx; } diff --git a/utils/api.js b/utils/api.js index 5d8b485..3d3e579 100644 --- a/utils/api.js +++ b/utils/api.js @@ -1,5 +1,5 @@ //testURL -const BASE_URL = 'http://30.251.62.186:10393/mock/68a4cea5-9a96-4c33-b7b9-0f32269ef34f/test?apipost_id=872f12'; +const BASE_URL = 'http://192.168.73.1:10393/mock/68a4cea5-9a96-4c33-b7b9-0f32269ef34f/test?apipost_id=872f12'; //prodURL // const BASE_URL = 'https://api.hongyutiyu.top';