init
This commit is contained in:
@@ -0,0 +1,49 @@
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.message-container {
|
||||
width: 100%;
|
||||
background-color: rgba(255, 255, 255, .5);
|
||||
overflow: auto;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
transition: box-shadow 0.3s;
|
||||
}
|
||||
|
||||
.message-item {
|
||||
display: flex;
|
||||
height: 40px;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.message-item > image {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.message-item > text {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.test-success {
|
||||
box-shadow: inset 0 0 10px 10px rgba(0, 255, 0, 0.5);
|
||||
}
|
||||
|
||||
.test-not-move-all-success {
|
||||
box-shadow: inset 0 0 10px 10px rgba(0, 0, 255, 0.5);
|
||||
}
|
||||
|
||||
.test-error {
|
||||
box-shadow: inset 0 0 10px 10px rgba(255, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.message-move-area {
|
||||
height: 400px;
|
||||
overflow: auto;
|
||||
}
|
||||
@@ -0,0 +1,177 @@
|
||||
/**
|
||||
* @author zhouyangejie
|
||||
* @summary 消息队列测试
|
||||
*/
|
||||
|
||||
const TOUCH_MOVE_COUNT = 10;
|
||||
let moveCount = 0;
|
||||
let eventCount = 0;
|
||||
|
||||
Page({
|
||||
data: {
|
||||
// status success fail ready
|
||||
testList: [
|
||||
{
|
||||
eventName: 'touchStart',
|
||||
status: 'ready'
|
||||
},
|
||||
|
||||
...new Array(TOUCH_MOVE_COUNT).fill(
|
||||
{
|
||||
eventName: 'touchMove',
|
||||
status: 'ready'
|
||||
}
|
||||
),
|
||||
|
||||
{
|
||||
eventName: 'touchEnd',
|
||||
status: 'ready'
|
||||
},
|
||||
],
|
||||
// success not-move-all-success error
|
||||
status: '',
|
||||
|
||||
info: {
|
||||
'test-success': '测试成功',
|
||||
'test-not-move-all-success': '测试成功（toucheMove事件不足）',
|
||||
'test-error': '测试失败'
|
||||
},
|
||||
|
||||
isMoving: false,
|
||||
|
||||
messageList: [],
|
||||
|
||||
scrollTop: 360,
|
||||
isTestOver: false,
|
||||
},
|
||||
|
||||
setStatus(index, status) {
|
||||
const curTestEvent = this.data.testList[index];
|
||||
if (curTestEvent) {
|
||||
this.setData(`testList[${index}].status`, status);
|
||||
}
|
||||
|
||||
if (status === 'fail') {
|
||||
this.setData('isTestOver', true);
|
||||
this.setData('status', 'test-error');
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
noticeEvent() {
|
||||
|
||||
if (this.data.isTestOver) {
|
||||
return;
|
||||
}
|
||||
|
||||
const curEventIndex = eventCount - 1;
|
||||
const curMessageEventName = this.data.messageList[curEventIndex];
|
||||
const curTestEvent = this.data.testList[curEventIndex];
|
||||
const curTestEventName = curTestEvent.eventName;
|
||||
|
||||
if (curTestEventName === 'touchStart') {
|
||||
this.setStatus(curEventIndex, curMessageEventName === 'touchStart' ? 'success': 'fail');
|
||||
} else if (curTestEventName === 'touchMove') {
|
||||
if (curMessageEventName === 'touchEnd') {
|
||||
this.setStatus(this.data.testList.length - 1, 'success');
|
||||
} else {
|
||||
this.setStatus(curEventIndex, curMessageEventName === 'touchMove' ? 'success' : 'fail');
|
||||
}
|
||||
} else if (curTestEventName === 'touchEnd') {
|
||||
if (curMessageEventName === 'touchMove') {
|
||||
this.data.testList.splice(curEventIndex, 0, {
|
||||
eventName: 'touchMove',
|
||||
status: 'success'
|
||||
});
|
||||
this.setData('testList', this.data.testList.slice());
|
||||
} else {
|
||||
this.setStatus(curEventIndex, curMessageEventName === 'touchEnd' ? 'success' : 'fail');
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onTouchStart(e) {
|
||||
this.setData('isMoving', true);
|
||||
this.pushMessage('touchStart');
|
||||
},
|
||||
|
||||
onTouchMove(e) {
|
||||
moveCount++;
|
||||
this.pushMessage('touchMove');
|
||||
if (!this.data.isTestOver) {
|
||||
this.autoScroll();
|
||||
}
|
||||
},
|
||||
|
||||
onTouchEnd(e) {
|
||||
this.setData('isMoving', false);
|
||||
this.pushMessage('touchEnd');
|
||||
this.handleResult();
|
||||
this.setData('isTestOver', true);
|
||||
},
|
||||
|
||||
handleReset() {
|
||||
eventCount = 0;
|
||||
moveCount = 0;
|
||||
this.setData({
|
||||
isTestOver: false,
|
||||
messageList: [],
|
||||
isMoving: false,
|
||||
status: '',
|
||||
scrollTop: 0,
|
||||
testList: [
|
||||
{
|
||||
eventName: 'touchStart',
|
||||
status: 'ready'
|
||||
},
|
||||
|
||||
...new Array(TOUCH_MOVE_COUNT).fill(
|
||||
{
|
||||
eventName: 'touchMove',
|
||||
status: 'ready'
|
||||
}
|
||||
),
|
||||
|
||||
{
|
||||
eventName: 'touchEnd',
|
||||
status: 'ready'
|
||||
},
|
||||
]
|
||||
});
|
||||
},
|
||||
|
||||
handleResult() {
|
||||
|
||||
if (this.data.isTestOver) {
|
||||
return;
|
||||
}
|
||||
|
||||
const messageList = this.data.messageList;
|
||||
if (
|
||||
messageList[0] === 'touchStart' &&
|
||||
messageList[messageList.length - 1] === 'touchEnd'
|
||||
) {
|
||||
if (moveCount < TOUCH_MOVE_COUNT) {
|
||||
this.setData('status', 'test-not-move-all-success');
|
||||
} else {
|
||||
this.setData('status', 'test-success');
|
||||
}
|
||||
} else {
|
||||
this.setData('status', 'test-error');
|
||||
}
|
||||
},
|
||||
|
||||
pushMessage(eventName) {
|
||||
console.log('dev:', eventName);
|
||||
eventCount++;
|
||||
this.setData('messageList', [...this.data.messageList, eventName]);
|
||||
this.noticeEvent();
|
||||
},
|
||||
|
||||
//滚动条至最底部
|
||||
autoScroll() {
|
||||
const scrollTop = moveCount * 40;
|
||||
this.setData({scrollTop});
|
||||
}
|
||||
});
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"navigationBarTitleText": "事件消息",
|
||||
"usingComponents": {
|
||||
"showbox": "../../common/component/showbox/index",
|
||||
"box": "../../common/component/container/index"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
<view class="container" bindtouchstart="onTouchStart" bindtouchmove="onTouchMove" bindtouchend="onTouchEnd">
|
||||
<view class="message-container {{status}}">
|
||||
<view>
|
||||
<button bindtap="handleReset" class="_ui-button _mt6" hover-class="_ui-button-hover" disabled="{{isMoving}}">
|
||||
{{isMoving && !isTestOver ? '正在滑动中...' : '重置'}}
|
||||
</button>
|
||||
<view style="text-align: center; font-weight: bold; color: grey;" class="_py10">
|
||||
{{info[status] || '请用手指触摸屏幕向下滑动进行测试'}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="message-item" style="color: red;">
|
||||
<text>=== {{testList[0].eventName}} ===</text>
|
||||
<image xhs:if="{{testList[0].status === 'ready'}}" src="../../image/no_test.png"></image>
|
||||
<image xhs:if="{{testList[0].status === 'success'}}" src="../../image/test_success.png"></image>
|
||||
<image xhs:if="{{testList[0].status === 'fail'}}" src="../../image/test_error.png"></image>
|
||||
</view>
|
||||
<scroll-view scroll-y scroll-top="{{scrollTop}}" class="message-move-area">
|
||||
<template xhs:for="{{testList}}">
|
||||
<view class="message-item" xhs:if="{{index !== 0 && index !== testList.length-1}}">
|
||||
<text>=== {{item.eventName}} {{index > 10 ? index : ''}}===</text>
|
||||
<image xhs:if="{{item.status === 'ready'}}" src="../../image/no_test.png"></image>
|
||||
<image xhs:if="{{item.status === 'success'}}" src="../../image/test_success.png"></image>
|
||||
<image xhs:if="{{item.status === 'fail'}}" src="../../image/test_error.png"></image>
|
||||
</view>
|
||||
</template>
|
||||
</scroll-view>
|
||||
<view class="message-item" style="color: red;">
|
||||
<text>=== {{testList[testList.length-1].eventName}} ===</text>
|
||||
<image xhs:if="{{testList[testList.length-1].status === 'ready'}}" src="../../image/no_test.png"></image>
|
||||
<image xhs:if="{{testList[testList.length-1].status === 'success'}}" src="../../image/test_success.png"></image>
|
||||
<image xhs:if="{{testList[testList.length-1].status === 'fail'}}" src="../../image/test_error.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
Reference in New Issue
Block a user