Skip to content

S
schedule
Commit ea90ddd0 by xiexiaoqin
Options

feat: swipe components

parent 148c9342
Showing with 209 additions and 50 deletions
PageComponents/myDynamic/myDynamic.axml
<scroll-view a:if="{{dynamicList.length !== 0}}" scroll-y="{{true}}" class="dynamicBox" onScrollToLower="onScrollToLower">
<view class="dynamicList">
<view a:for="{{dynamicList}}" data-id="{{item.scheduleId}}" class="dynamicContent {{isTouchMove && touchMoveId === item.scheduleId ? 'isMove' : ''}}" onTouchStart="touchstart" onTouchMove="touchmove">
<swipe rightWidth="{{ 78 }}" leftWidth="{{ 0 }}" a:for="{{dynamicList}}" class="dynamicContent">
<view class="dynamicDetails">
<view class="meetingtitle">
<view>
......@@ -23,10 +23,10 @@
</view>
</block>
</view>
<view class="placedTop" onTap="changeCollection" data-scheduleid="{{item.scheduleId}}" data-index="{{index}}" data-collection="{{item.traceTime === '1970-03-01 00:00:00' ? 'Y':'N'}}">
<view slot="right" class="placedTop" onTap="changeCollection" data-scheduleid="{{item.scheduleId}}" data-index="{{index}}" data-collection="{{item.traceTime === '1970-03-01 00:00:00' ? 'Y':'N'}}">
<text class="iconfont iconicon_top1 {{item.traceTime === '1970-03-01 00:00:00' ? '': 'isTopIcon'}}"></text>
</view>
</view>
</swipe>
</view>
</scroll-view>
<view class="noDate" a:else>
......
PageComponents/myDynamic/myDynamic.js
......@@ -21,8 +21,8 @@ Component({
didMount() {
this.getPages(1);
},
didUpdate() {},
didUnmount() {},
didUpdate() { },
didUnmount() { },
methods: {
getPages(current) {
let that = this;
......@@ -96,48 +96,48 @@ Component({
}
});
},
touchstart(e) {
this.setData({
startX: e.changedTouches[0].clientX,
startY: e.changedTouches[0].clientY,
isTouchMove: this.data.isTouchMove
? !this.data.isTouchMove
: this.data.isTouchMove
});
},
touchmove(e) {
var that = this,
startX = that.data.startX, //开始X坐标
startY = that.data.startY, //开始Y坐标
touchMoveX = e.changedTouches[0].clientX, //滑动变化坐标
touchMoveY = e.changedTouches[0].clientY, //滑动变化坐标
//获取滑动角度
angle = that.angle(
{ X: startX, Y: startY },
{ X: touchMoveX, Y: touchMoveY }
);
var isTouchMove;
//滑动超过30度角 return
if (Math.abs(angle) > 30) return;
if (touchMoveX > startX) {
//右滑
isTouchMove = false;
} else {
//左滑
isTouchMove = true;
}
//更新数据
that.setData({
isTouchMove: isTouchMove,
touchMoveId: e.currentTarget.dataset.id
});
},
angle(start, end) {
var _X = end.X - start.X,
_Y = end.Y - start.Y;
//返回角度 /Math.atan()返回数字的反正切值
return (360 * Math.atan(_Y / _X)) / (2 * Math.PI);
},
// touchstart(e) {
// this.setData({
// startX: e.changedTouches[0].clientX,
// startY: e.changedTouches[0].clientY,
// isTouchMove: this.data.isTouchMove
// ? !this.data.isTouchMove
// : this.data.isTouchMove
// });
// },
// touchmove(e) {
// var that = this,
// startX = that.data.startX, //开始X坐标
// startY = that.data.startY, //开始Y坐标
// touchMoveX = e.changedTouches[0].clientX, //滑动变化坐标
// touchMoveY = e.changedTouches[0].clientY, //滑动变化坐标
// //获取滑动角度
// angle = that.angle(
// { X: startX, Y: startY },
// { X: touchMoveX, Y: touchMoveY }
// );
// var isTouchMove;
// //滑动超过30度角 return
// if (Math.abs(angle) > 30) return;
// if (touchMoveX > startX) {
// //右滑
// isTouchMove = false;
// } else {
// //左滑
// isTouchMove = true;
// }
// //更新数据
// that.setData({
// isTouchMove: isTouchMove,
// touchMoveId: e.currentTarget.dataset.id
// });
// },
// angle(start, end) {
// var _X = end.X - start.X,
// _Y = end.Y - start.Y;
// //返回角度 /Math.atan()返回数字的反正切值
// return (360 * Math.atan(_Y / _X)) / (2 * Math.PI);
// },
changeCollection(e) {
let that = this;
let index = e.target.dataset.index;
......@@ -211,11 +211,9 @@ Component({
}
});
let setData = `dynamicList[${dataIndex1}].meetingLogDataList[${dataIndex2}].meetingLogResource.taskStatus`;
console.log(setData);
that.setData({
[setData]: e.status
});
console.log(that.data.dynamicList);
}
});
}
......
PageComponents/myDynamic/myDynamic.json
......@@ -2,6 +2,7 @@
"component": true,
"usingComponents": {
"task-list": "../../components/taskList/taskList",
"file-list": "../../components/fileList/fileList"
"file-list": "../../components/fileList/fileList",
"swipe": "../../components/swipe/swipe"
}
}
\ No newline at end of file
components/swipe/swipe.acss 0 → 100644
.swipe-cell {
position: relative;
overflow: hidden
}
.swipe-cell__left, .swipe-cell__right {
position: absolute;
top: 0;
height: 100%;
display: flex;
align-items: center;
}
.swipe-cell__left {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0)
}
.swipe-cell__right {
right: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)
}
\ No newline at end of file
components/swipe/swipe.axml 0 → 100644
<view disable-scroll="{{true}}" class="swipe-cell" data-key="cell" catchTap="onClick" catchTouchStart="startDrag" catchTouchMove="onDrag" catchTouchEnd="endDrag" catchTouchCancel="endDrag">
<view style="{{ wrapperStyle }}">
<view a:if="{{ leftWidth }}" class="swipe-cell__left" data-key="left" catchTap="onClick">
<slot name="left" />
</view>
<slot />
<view a:if="{{ rightWidth }}" class="swipe-cell__right" data-key="right" catchTap="onClick">
<slot name="right" />
</view>
</view>
</view>
\ No newline at end of file
components/swipe/swipe.js 0 → 100644
var MIN_DISTANCE = 10;
var THRESHOLD = 0.3;
function getDirection(x, y) {
if (x > y && x > MIN_DISTANCE) {
return 'horizontal';
}
if (y > x && y > MIN_DISTANCE) {
return 'vertical';
}
return '';
}
let ARRAY = [];
/**
* num: 当前的移动大小
* min: 往左移的最大位置
* max: 往右移的最大位置
*/
function range(num, min, max) {
return Math.min(Math.max(num, min), max);
}
Component({
mixins: [],
offset: 0,
data: {
wrapperStyle: ''
},
props: {},
didMount() {
ARRAY.push(this);
this.offset = 0;
},
didUpdate() { },
didUnmount() {
//组件卸载的时候需要清空ARRAY，否则每次didMount都累加
this.destroyed();
},
methods: {
close: function () {
this.swipeMove(0);
},
destroyed: function () {
ARRAY = ARRAY.filter((item) => { return item !== this; });
},
resetTouchStatus: function () {
this.direction = '';
this.deltaX = 0;
this.deltaY = 0;
this.offsetX = 0;
this.offsetY = 0;
},
touchStart: function (event) {
this.resetTouchStatus();
var touch = event.touches[0];
this.startX = touch.clientX;
this.startY = touch.clientY;
},
touchMove: function (event) {
var touch = event.touches[0];
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 = this.direction || getDirection(this.offsetX, this.offsetY);
},
startDrag: function (event) {
this.startOffset = this.offset;
this.touchStart(event);
},
onDrag: function (event) {
this.touchMove(event);
if (this.direction !== 'horizontal') {
return;
}
//滑动的时候不要过度时间，否则不跟手势的感觉
this.dragging = true;
// 其他组件归位
ARRAY.filter((item) => { return item !== this }).forEach(function (item) { return item.close(); });
this.swipeMove(this.startOffset + this.deltaX);
},
swipeMove: function (offset) {
this.offset = range(offset, -this.props.rightWidth, this.props.leftWidth);
var transform = "translate3d(" + this.offset + "px, 0, 0)";
var transition = this.dragging
? 'none'
: 'transform .6s cubic-bezier(0.18, 0.89, 0.32, 1)';
this.setData({
wrapperStyle: "\n -webkit-transform: " + transform + ";\n -webkit-transition: " + transition + ";\n transform: " + transform + ";\n transition: " + transition + ";\n "
});
},
endDrag: function () {
this.dragging = false;
// 结束的时候判断是否需要帮忙拉到底或者归位，否则到中间就不动了，体验很不好
this.swipeLeaveTransition();
},
onClick: function (event) {
ARRAY.forEach(function (item) { return item.close(); });
},
swipeLeaveTransition: function () {
const { leftWidth, rightWidth } = this.props;
var offset = this.offset;
if (rightWidth > 0 && -offset > rightWidth * THRESHOLD) {
this.open('right');
}
else if (leftWidth > 0 && offset > leftWidth * THRESHOLD) {
this.open('left');
}
else {
this.swipeMove(0);
}
},
open: function (position) {
const { leftWidth, rightWidth } = this.props;
var offset = position === 'left' ? leftWidth : -rightWidth;
this.swipeMove(offset);
},
},
});
components/swipe/swipe.json 0 → 100644
{
"component": true
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment