初始化项目, 添加TDesign等包
This commit is contained in:
zhengw
3
miniprogram/miniprogram_npm/tdesign-miniprogram/swipe-cell/props.d.ts
vendored
Normal file
3
miniprogram/miniprogram_npm/tdesign-miniprogram/swipe-cell/props.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
import { TdSwipeCellProps } from './type';
|
||||
declare const props: TdSwipeCellProps;
|
||||
export default props;
|
||||
@@ -0,0 +1 @@
|
||||
const props={disabled:{type:Boolean},left:{type:Array},opened:{type:null,value:!1},right:{type:Array}};export default props;
|
||||
31
miniprogram/miniprogram_npm/tdesign-miniprogram/swipe-cell/swipe-cell.d.ts
vendored
Normal file
31
miniprogram/miniprogram_npm/tdesign-miniprogram/swipe-cell/swipe-cell.d.ts
vendored
Normal file
@@ -0,0 +1,31 @@
|
||||
import { SuperComponent } from '../common/src/index';
|
||||
export default class SwiperCell extends SuperComponent {
|
||||
externalClasses: string[];
|
||||
options: {
|
||||
multipleSlots: boolean;
|
||||
};
|
||||
properties: import("./type").TdSwipeCellProps;
|
||||
data: {
|
||||
prefix: string;
|
||||
wrapperStyle: string;
|
||||
closed: boolean;
|
||||
classPrefix: string;
|
||||
skipMove: boolean;
|
||||
};
|
||||
observers: {
|
||||
'left, right'(): void;
|
||||
};
|
||||
lifetimes: {
|
||||
attached(): void;
|
||||
ready(): void;
|
||||
detached(): void;
|
||||
};
|
||||
setSwipeWidth(): void;
|
||||
skipMove(): void;
|
||||
catchMove(): void;
|
||||
open(): void;
|
||||
close(): void;
|
||||
closeOther(): void;
|
||||
onTap(): void;
|
||||
onActionTap(event: any): void;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
import{__decorate}from"tslib";import{SuperComponent,wxComponent}from"../common/src/index";import config from"../common/config";import props from"./props";import{getRect}from"../common/utils";import{getObserver}from"../common/wechat";let ARRAY=[];const{prefix:prefix}=config,name=`${prefix}-swipe-cell`,ContainerClass=`.${name}`;let SwiperCell=class extends SuperComponent{constructor(){super(...arguments),this.externalClasses=[`${prefix}-class`],this.options={multipleSlots:!0},this.properties=props,this.data={prefix:prefix,wrapperStyle:"",closed:!0,classPrefix:name,skipMove:!1},this.observers={"left, right"(){this.setSwipeWidth()}},this.lifetimes={attached(){ARRAY.push(this)},ready(){this.setSwipeWidth()},detached(){ARRAY=ARRAY.filter(e=>e!==this)}}}setSwipeWidth(){Promise.all([getRect(this,`${ContainerClass}__left`),getRect(this,`${ContainerClass}__right`)]).then(([e,t])=>{0!==e.width||0!==t.width||this._hasObserved||(this._hasObserved=!0,getObserver(this,`.${name}`).then(()=>{this.setSwipeWidth()})),this.setData({leftWidth:e.width,rightWidth:t.width})})}skipMove(){this.data.skipMove||this.setData({skipMove:!0})}catchMove(){this.data.skipMove&&this.setData({skipMove:!1})}open(){this.setData({opened:!0})}close(){this.setData({opened:!1})}closeOther(){ARRAY.filter(e=>e!==this).forEach(e=>e.close())}onTap(){this.close()}onActionTap(e){const{currentTarget:{dataset:{action:t}}}=e;this.triggerEvent("click",t)}};SwiperCell=__decorate([wxComponent()],SwiperCell);export default SwiperCell;
|
||||
@@ -0,0 +1 @@
|
||||
{"component":true,"styleIsolation":"apply-shared","usingComponents":{"t-icon":"../icon/icon"}}
|
||||
@@ -0,0 +1 @@
|
||||
<import src="../common/template/icon.wxml"/><wxs src="./swipe-cell.wxs" module="swipe"></wxs><wxs src="../common/utils.wxs" module="_"/><view class="class {{prefix}}-class {{classPrefix}}" style="{{_._style([style, customStyle])}}" data-key="cell" bind:tap="onTap" bind:touchstart="{{disabled || swipe.startDrag}}" bind:touchmove="{{skipMove ? '' : disabled || swipe.onDrag}}" bind:touchend="{{skipMove ? '' : disabled || swipe.endDrag}}" bind:touchcancel="{{disabled || swipe.endDrag}}" opened="{{opened}}" change:opened="{{swipe.onOpenedChange}}" leftWidth="{{leftWidth}}" rightWidth="{{rightWidth}}" change:leftWidth="{{swipe.initLeftWidth}}" change:rightWidth="{{swipe.initRightWidth}}"><view id="wrapper"><view class="{{classPrefix}}__left" data-key="left"><slot name="left"/><view wx:for="{{left}}" class="{{classPrefix}}__content {{item.className}}" style="{{item.style}}" wx:key="index" data-action="{{item}}" bind:tap="onActionTap"><template wx:if="{{item.icon}}" is="icon" data="{{tClass: classPrefix + '__icon', name: item.icon, ...item.icon}}"></template><text wx:if="{{item.text}}" class="{{classPrefix}}__text">{{item.text}}</text></view></view><slot/><view class="{{classPrefix}}__right" data-key="right"><slot name="right"/><view wx:for="{{right}}" class="{{classPrefix}}__content {{item.className}}" style="{{item.style}}" wx:key="index" data-action="{{item}}" bind:tap="onActionTap"><template wx:if="{{item.icon}}" is="icon" data="{{tClass: classPrefix + '__icon', name: item.icon, ...item.icon}}"></template><text wx:if="{{item.text}}" class="{{classPrefix}}__text">{{item.text}}</text></view></view></view></view>
|
||||
@@ -0,0 +1,185 @@
|
||||
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为boolean类型，判断默认打开
|
||||
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) {
|
||||
ownerInstance.callMethod('catchMove');
|
||||
getState(ownerInstance);
|
||||
touchStart(event);
|
||||
};
|
||||
|
||||
var onDrag = function (event, ownerInstance) {
|
||||
getState(ownerInstance);
|
||||
touchMove(event);
|
||||
if (state.direction === 'vertical') {
|
||||
ownerInstance.callMethod('skipMove');
|
||||
}
|
||||
if (state.direction !== 'horizontal') {
|
||||
return;
|
||||
}
|
||||
if (!state.dragging) {
|
||||
ownerInstance.triggerEvent('dragstart');
|
||||
}
|
||||
state.dragging = true;
|
||||
swipeMove(state.startOffset + state.deltaX);
|
||||
return false;
|
||||
};
|
||||
|
||||
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();
|
||||
}
|
||||
}
|
||||
ownerInstance.triggerEvent('dragend');
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
initLeftWidth: initLeftWidth,
|
||||
initRightWidth: initRightWidth,
|
||||
startDrag: startDrag,
|
||||
onDrag: onDrag,
|
||||
endDrag: endDrag,
|
||||
onCloseChange: onCloseChange,
|
||||
onOpenedChange: onOpenedChange,
|
||||
};
|
||||
@@ -0,0 +1,7 @@
|
||||
@import '../common/style/index.wxss';.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);}
|
||||
.t-swipe-cell__content{display:inline-flex;justify-content:center;align-items:center;padding:0 var(--td-spacer-2,32rpx);}
|
||||
.t-swipe-cell__icon{font-size:var(--td-font-size-xl,40rpx);}
|
||||
.t-swipe-cell__icon+.t-swipe-cell__text:not(:empty){margin-left:var(--td-spacer,16rpx);font-size:var(--td-font-size-base,28rpx);line-height:44rpx;}
|
||||
26
miniprogram/miniprogram_npm/tdesign-miniprogram/swipe-cell/type.d.ts
vendored
Normal file
26
miniprogram/miniprogram_npm/tdesign-miniprogram/swipe-cell/type.d.ts
vendored
Normal file
@@ -0,0 +1,26 @@
|
||||
export interface TdSwipeCellProps {
|
||||
disabled?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
left?: {
|
||||
type: ArrayConstructor;
|
||||
value?: Array<SwipeActionItem>;
|
||||
};
|
||||
opened?: {
|
||||
type: null;
|
||||
value?: boolean | Array<boolean>;
|
||||
};
|
||||
right?: {
|
||||
type: ArrayConstructor;
|
||||
value?: Array<SwipeActionItem>;
|
||||
};
|
||||
}
|
||||
export interface SwipeActionItem {
|
||||
text?: string;
|
||||
icon?: string | object;
|
||||
className?: string;
|
||||
style?: string;
|
||||
onClick?: () => void;
|
||||
[key: string]: any;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export{};
|
||||
Reference in New Issue
Block a user