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"> <scroll-view a:if="{{dynamicList.length !== 0}}" scroll-y="{{true}}" class="dynamicBox" onScrollToLower="onScrollToLower">
<view class="dynamicList"> <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="dynamicDetails">
<view class="meetingtitle"> <view class="meetingtitle">
<view> <view>
...@@ -23,10 +23,10 @@ ...@@ -23,10 +23,10 @@
</view> </view>
</block> </block>
</view> </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> <text class="iconfont iconicon_top1 {{item.traceTime === '1970-03-01 00:00:00' ? '': 'isTopIcon'}}"></text>
</view> </view>
</view> </swipe>
</view> </view>
</scroll-view> </scroll-view>
<view class="noDate" a:else> <view class="noDate" a:else>
......
PageComponents/myDynamic/myDynamic.js
...@@ -21,8 +21,8 @@ Component({ ...@@ -21,8 +21,8 @@ Component({
didMount() { didMount() {
this.getPages(1); this.getPages(1);
}, },
didUpdate() {}, didUpdate() { },
didUnmount() {}, didUnmount() { },
methods: { methods: {
getPages(current) { getPages(current) {
let that = this; let that = this;
...@@ -96,48 +96,48 @@ Component({ ...@@ -96,48 +96,48 @@ Component({
} }
}); });
}, },
touchstart(e) { // touchstart(e) {
this.setData({ // this.setData({
startX: e.changedTouches[0].clientX, // startX: e.changedTouches[0].clientX,
startY: e.changedTouches[0].clientY, // startY: e.changedTouches[0].clientY,
isTouchMove: this.data.isTouchMove // isTouchMove: this.data.isTouchMove
? !this.data.isTouchMove // ? !this.data.isTouchMove
: this.data.isTouchMove // : this.data.isTouchMove
}); // });
}, // },
touchmove(e) { // touchmove(e) {
var that = this, // var that = this,
startX = that.data.startX, //开始X坐标 // startX = that.data.startX, //开始X坐标
startY = that.data.startY, //开始Y坐标 // startY = that.data.startY, //开始Y坐标
touchMoveX = e.changedTouches[0].clientX, //滑动变化坐标 // touchMoveX = e.changedTouches[0].clientX, //滑动变化坐标
touchMoveY = e.changedTouches[0].clientY, //滑动变化坐标 // touchMoveY = e.changedTouches[0].clientY, //滑动变化坐标
//获取滑动角度 // //获取滑动角度
angle = that.angle( // angle = that.angle(
{ X: startX, Y: startY }, // { X: startX, Y: startY },
{ X: touchMoveX, Y: touchMoveY } // { X: touchMoveX, Y: touchMoveY }
); // );
var isTouchMove; // var isTouchMove;
//滑动超过30度角 return // //滑动超过30度角 return
if (Math.abs(angle) > 30) return; // if (Math.abs(angle) > 30) return;
if (touchMoveX > startX) { // if (touchMoveX > startX) {
//右滑 // //右滑
isTouchMove = false; // isTouchMove = false;
} else { // } else {
//左滑 // //左滑
isTouchMove = true; // isTouchMove = true;
} // }
//更新数据 // //更新数据
that.setData({ // that.setData({
isTouchMove: isTouchMove, // isTouchMove: isTouchMove,
touchMoveId: e.currentTarget.dataset.id // touchMoveId: e.currentTarget.dataset.id
}); // });
}, // },
angle(start, end) { // angle(start, end) {
var _X = end.X - start.X, // var _X = end.X - start.X,
_Y = end.Y - start.Y; // _Y = end.Y - start.Y;
//返回角度 /Math.atan()返回数字的反正切值 // //返回角度 /Math.atan()返回数字的反正切值
return (360 * Math.atan(_Y / _X)) / (2 * Math.PI); // return (360 * Math.atan(_Y / _X)) / (2 * Math.PI);
}, // },
changeCollection(e) { changeCollection(e) {
let that = this; let that = this;
let index = e.target.dataset.index; let index = e.target.dataset.index;
...@@ -211,11 +211,9 @@ Component({ ...@@ -211,11 +211,9 @@ Component({
} }
}); });
let setData = `dynamicList[${dataIndex1}].meetingLogDataList[${dataIndex2}].meetingLogResource.taskStatus`; let setData = `dynamicList[${dataIndex1}].meetingLogDataList[${dataIndex2}].meetingLogResource.taskStatus`;
console.log(setData);
that.setData({ that.setData({
[setData]: e.status [setData]: e.status
}); });
console.log(that.data.dynamicList);
} }
}); });
} }
......
PageComponents/myDynamic/myDynamic.json
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
"component": true, "component": true,
"usingComponents": { "usingComponents": {
"task-list": "../../components/taskList/taskList", "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