var scrollTop = {}; //滚动条位置
|
// 排序列表
|
var sortList = {};
|
var isMove = false; //是否可拖动 长按事件控制切换这个状态
|
var touchTimer = false; //长按事件定时器
|
// 当页面有多个当前组件时，guid用来识别当前的列表的。因为一个页面内多个组件的wxs作用域相同。
|
|
|
function setScrollTop(tmpGuid,tmpPage) {
|
if (typeof scrollTop[tmpGuid] == "undefined") {
|
scrollTop[tmpGuid] = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
|
}
|
}
|
|
function scroll(event, instance) {
|
var dataView = instance.selectComponent('#dataView');
|
var viewData = dataView.getDataset();
|
setScrollTop(viewData.guid)
|
if (config.curPage)
|
scrollTop[viewData.guid][config.curPage] = event.detail.scrollTop;
|
else
|
scrollTop[viewData.guid][0] = event.detail.scrollTop;
|
console.log("scroll scrollTop：",config.curPage,event.detail.scrollTop );
|
}
|
|
function initVar(state, instance) {
|
var dataView = instance.selectComponent('#dataView');
|
var viewData = dataView.getDataset();
|
// 读取配置项
|
// 获取scroll-view id
|
config = All_Config[viewData.guid];
|
|
setScrollTop(config.guid);
|
state.initscrollTop = scrollTop[config.guid][config.curPage];
|
console.log("initVar initscrollTop：",config.curPage,state.initscrollTop );
|
|
}
|
|
function getRowSort(findId, instance) {
|
for (var i = 0; i < sortList[config.guid].length; i++) {
|
if (sortList[config.guid][i].id == findId) {
|
currentRowView = sortList[config.guid][i].rowView;
|
//console.log("getRowSort res：",JSON.stringify(currentRowView) );
|
return sortList[config.guid][i].lastSort;
|
}
|
}
|
return -1
|
|
}
|
var shadowRowBoxView = null;
|
var shadowRowView = null;
|
var currentRowView = null;
|
var rowSort = 0;
|
var rowStartSort = 0;
|
var rowMoveSort = 0;
|
var pageStart = 0;
|
var pageMove = 0;
|
var sorting = false;
|
|
function touchstart(event, instance) {
|
if (sorting) {
|
return;
|
}
|
pageStart = pageMove
|
sorting = true;
|
// 兼容setTimeout
|
if (typeof setTimeout === "undefined" && typeof instance.setTimeout !== 'undefined') {
|
setTimeout = instance.setTimeout;
|
clearTimeout = instance.clearTimeout;
|
}
|
isMove = false;
|
var rowData = event.instance.getDataset();
|
|
var state = instance.getState();
|
if (event.touches.length == 1) {
|
state.point = event.touches[0];
|
|
state.islongTap = true;
|
state.rowData = rowData;
|
//读取数据
|
initVar(state, instance);
|
}
|
var rowStyle = event.instance.getComputedStyle(['height']);
|
config.rowHeight = parseFloat(rowStyle.height); //获取行高
|
// 计算shadowRow.style.top
|
|
//console.log("touchstart getRowSort：", JSON.stringify(rowData) );
|
|
rowSort = getRowSort(rowData.id, instance);
|
rowStartSort = rowSort
|
rowMoveSort = rowSort
|
if(rowSort < 0)
|
{
|
sorting = false;
|
return
|
}
|
var shadowRowTop = rowStartSort * config.rowHeight + config.listViewTop;
|
shadowRowTop = shadowRowTop - scrollTop[config.guid][config.curPage];
|
//console.log("touchstart scrollTop：",config.curPage,scrollTop[config.guid][config.curPage]);
|
// 加载shadowRow数据
|
state.shadowRowTop = shadowRowTop;
|
// 设置shadowRow初始位置
|
shadowRowBoxView = instance.selectComponent('#shadowRowBox');
|
shadowRowBoxView.setStyle({
|
'top': shadowRowTop + 'px',
|
})
|
shadowRowView = instance.selectComponent('#shadowRow')
|
|
//长按事件
|
if (config.longTouch) {
|
touchTimer && clearTimeout(touchTimer);
|
touchTimer = setTimeout(function() {
|
instance.callMethod("loadShadowRow", {
|
rowSort: rowStartSort
|
});
|
longpress(event, instance);
|
}, config.longTouchTime)
|
}
|
/* setTimeout(function() {
|
if( !sorting)
|
{
|
instance.callMethod("triggerClick", {
|
index: rowStartSort,
|
page: pageStart,
|
});
|
}
|
}, 100) */
|
}
|
|
function longpress(event, instance) {
|
if (config.longTouch) {
|
isMove = true;
|
console.log("longpress")
|
var moveX = 0
|
/* if(config.curPage)
|
moveX = -(config.curPage* config.windowWidth) */
|
|
moveRow(instance, moveX, 0)
|
|
}
|
}
|
|
function touchmove(event, instance) {
|
var state = instance.getState();
|
var rowData = event.instance.getDataset();
|
var movePoint = event.touches[0];
|
var initPoint = state.point;
|
var moveY = movePoint.pageY - initPoint.pageY;
|
var moveX = movePoint.pageX - initPoint.pageX;
|
if (config.longTouch) {
|
if (Math.abs(moveY) > 10 || Math.abs(moveX) > 8) {
|
clearTimeout(touchTimer);
|
}
|
if (!isMove) {
|
return;
|
}
|
}
|
instance.callMethod("touchDragMove", {
|
touchX: movePoint.pageX,
|
touchY: movePoint.pageY,
|
moveX: moveX,
|
moveY: moveY
|
});
|
//console.log("touchmove：",initPoint.pageY,movePoint.pageY,moveY);
|
//console.log("touchmove：");
|
moveRow(instance, moveX, moveY);
|
//阻止滚动页面
|
if (event.preventDefault) {
|
event.preventDefault();
|
}
|
|
return false;
|
}
|
|
function touchend(event, instance) {
|
|
//console.log("touchend:",event)
|
if (config.longTouch) {
|
clearTimeout(touchTimer);
|
}
|
if (lastCommand != "stop") {
|
lastCommand = "stop";
|
config.autoScroll && instance.callMethod("pageScroll", {
|
'guid': config.guid,
|
'command': "stop"
|
});
|
}
|
var state = instance.getState();
|
if (config.longTouch) {
|
if (!isMove) {
|
sorting = false;
|
if(rowStartSort < 0)
|
{
|
instance.callMethod("touchEnd", event);
|
return false;
|
}
|
var movePoint = event.changedTouches[0];
|
var initPoint = state.point;
|
var moveY = movePoint.pageY - initPoint.pageY;
|
var moveX = movePoint.pageX - initPoint.pageX;
|
console.log("touchend:", moveX, moveY,rowStartSort,pageStart)
|
if ( moveY > 4 || moveX > 4 || moveY < -5 || moveX < -5) {
|
instance.callMethod("touchEnd", event);
|
return false;
|
}
|
instance.callMethod("triggerClick", {
|
index: rowStartSort,
|
page: pageStart,
|
});
|
return false;
|
}
|
}
|
// 把隐藏的行重新显示
|
resetRowStyle(instance, state.rowData.id)
|
// 隐藏ShadowRow
|
resetShadowRowStyle(instance, state.offset)
|
console.log("touchend:", state.offset, rowStartSort)
|
if ((pageStart != pageMove) || (typeof state.offset !== "undefined" && rowStartSort != state.offset && state
|
.offset != null)) {
|
var sortArray = [];
|
for (var i = 0; i < sortList[config.guid].length; i++) {
|
sortList[config.guid][i].lastSort = sortList[config.guid][i].newSort;
|
sortArray.push(sortList[config.guid][i].newSort);
|
sortList[config.guid][i].rowView.removeClass('ani');
|
}
|
if (state.offset == null) {
|
state.offset = rowSort
|
}
|
instance.callMethod("sort", {
|
index: rowStartSort,
|
offset: state.offset,
|
sortArray: sortArray,
|
page: pageStart,
|
pageMoveTo: pageMove,
|
});
|
instance.callMethod("touchDragEnd");
|
} else {
|
sorting = false;
|
triggerFeedbackGenerator(instance); //震动反馈
|
instance.callMethod("touchDragEnd");
|
return false;
|
}
|
|
state.offset = null;
|
oldOffset = null;
|
sorting = false;
|
triggerFeedbackGenerator(instance); //震动反馈
|
return false;
|
}
|
|
// 重置列表行
|
function resetRowStyle(instance, id) {
|
if (currentRowView)
|
currentRowView.removeClass('hide');
|
}
|
// 重置拖拽行
|
function resetShadowRowStyle(instance, offset) {
|
if(shadowRowBoxView)
|
{
|
shadowRowBoxView.removeClass('show');
|
shadowRowBoxView.addClass('hide');
|
shadowRowBoxView.setStyle({});
|
}
|
}
|
var lastCommand = '';
|
|
// move Row
|
function moveRow(instance, moveX, moveY) {
|
var state = instance.getState();
|
|
console.log("moveRow：", moveX, moveY,rowSort,rowStartSort);
|
// 显示shadowRowBox
|
if (shadowRowBoxView) {
|
shadowRowBoxView.removeClass('hide');
|
shadowRowBoxView.hasClass('show') || shadowRowBoxView.addClass('show');
|
//console.log("moveRow：",moveX,moveY,config.curPage, config.windowWidth);
|
// 移动shadowRowBox里面的shadowRow
|
if (shadowRowView) {
|
var x = moveX //+ (config.curPage* config.windowWidth)
|
//console.log("moveRow moveX：", );
|
shadowRowView.setStyle({
|
'transform': 'translate3d(' + x + 'px,' + moveY + 'px,10px) rotate(5deg)',
|
'-webkit-transform': 'translate3d(' + x + 'px,' + moveY + 'px,10px) rotate(5deg)'
|
});
|
}
|
}
|
// 隐藏列表对应行
|
if (currentRowView) {
|
currentRowView.hasClass('hide') || currentRowView.addClass('hide');
|
currentRowView.removeClass('ani')
|
}
|
var listClientY = state.shadowRowTop + moveY + config.rowHeight / 2;
|
var tmpscrollListTop = scrollTop[config.guid][config.curPage];
|
|
// 拖拽至边缘滚动视图 距离顶部距离1.5行高触发上滚动 下滚动同理
|
var callMethodData = {
|
guid: config.guid,
|
command: listClientY < config.ListHeight * 0.2 ? "up" : listClientY > config.ListHeight - (config
|
.ListHeight * 0.2) ? "down" : "stop",
|
scrollTop: tmpscrollListTop,
|
}
|
// 把滚动指令发给逻辑层
|
if (lastCommand != callMethodData.command) {
|
lastCommand = callMethodData.command;
|
config.autoScroll && instance.callMethod("pageScroll", callMethodData);
|
}
|
|
var moveOffset = moveY + scrollTop[config.guid][config.curPage] - state.initscrollTop;
|
|
var offset = calcOffset(rowSort, moveOffset);
|
// console.log("moveRow：",offset, rowSort,moveOffset,config.listLength);
|
if (offset <= 2 || offset >= config.listLength - 2) {
|
callMethodData.command = 'stop';
|
}
|
// 为减少卡顿，微信小程序端，在滚动视图期间不进行列表位置交换
|
if (config.autoScroll && (!config.isAppH5) && callMethodData.command != 'stop') {
|
return;
|
}
|
var sortIndex = rowSort
|
if (sortIndex >= config.listLength) {
|
sortIndex = config.listLength - 1
|
}
|
oldOffset = oldOffset == null ? sortIndex : oldOffset;
|
if (offset < 0 || offset >= config.listLength) {
|
return;
|
}
|
if (offset == oldOffset) {
|
return;
|
}
|
|
oldOffset = offset;
|
if (offset == null) {
|
offset = sortIndex
|
}
|
state.offset = offset;
|
//触发change事件 并交换列表位置
|
console.log("moveRow 2：", sortIndex, state.offset);
|
instance.callMethod("change", {
|
index: rowStartSort,
|
moveTo: state.offset,
|
page: pageStart,
|
pageMoveTo: pageMove,
|
});
|
rowMoveSort = state.offset
|
for (var i = 0; i < sortList[config.guid].length; i++) {
|
var sort = sortList[config.guid][i].lastSort;
|
var newSort = sortList[config.guid][i].newSort;
|
//console.log("moveRow sort：", i, sort, newSort);
|
if ((sort >= offset && sort <= sortIndex) || (sort <= offset && sort >= sortIndex)) {
|
if (sort == sortIndex) {
|
newSort = offset;
|
} else {
|
newSort = sort < sortIndex ? sort + 1 : sort - 1;
|
}
|
} else {
|
newSort = sort;
|
}
|
if (sortList[config.guid][i].newSort == newSort) {
|
continue;
|
}
|
sortList[config.guid][i].newSort = newSort;
|
var translateY = (sortList[config.guid][i].newSort - sortList[config.guid][i].sort) * 100;
|
sortList[config.guid][i].rowView.hasClass('ani') || sortList[config.guid][i].rowView.addClass('ani');
|
sortList[config.guid][i].rowView.setStyle({
|
'transform': 'translate3d(0,' + translateY + '%,0)',
|
'-webkit-transform': 'translate3d(0,' + translateY + '%,0)'
|
});
|
console.log("moveRow translateY：", i, sort, newSort, translateY);
|
}
|
triggerFeedbackGenerator(instance); //震动反馈
|
}
|
//计算偏移index
|
var oldOffset = null;
|
|
function calcOffset(initSort, moveY) {
|
var offset = initSort + parseInt(moveY / config.rowHeight); //偏移 行高的倍数
|
var rest = moveY % config.rowHeight;
|
if (rest > 0) {
|
offset = offset + (rest / config.rowHeight >= 0.6 ? 1 : 0);
|
if (offset < oldOffset) {
|
offset = rest / config.rowHeight <= 0.4 ? offset : oldOffset;
|
}
|
} else {
|
offset = offset + (rest / config.rowHeight <= -0.6 ? -1 : 0);
|
if (offset > oldOffset) {
|
offset = rest / config.rowHeight >= -0.4 ? offset : oldOffset;
|
}
|
}
|
return offset;
|
}
|
|
//触感反馈
|
//wxs 不支持条件编译，所以用此方法判断
|
var isiOSAPP = typeof plus != "undefined" && plus.os.name == 'iOS';
|
var UISelectionFeedbackGenerator;
|
var impact
|
|
if (isiOSAPP) {
|
UISelectionFeedbackGenerator = plus.ios.importClass("UISelectionFeedbackGenerator");
|
impact = new UISelectionFeedbackGenerator();
|
impact.init();
|
}
|
|
function triggerFeedbackGenerator(instance) {
|
//console.log("triggerFeedbackGenerator：", config.feedbackGenerator);
|
if (!config.feedbackGenerator) {
|
//关闭触感反馈
|
return;
|
}
|
if (isiOSAPP) {
|
//异步，避免与点击事件冲突
|
setTimeout(function() {
|
impact.selectionChanged();
|
}, 0)
|
} else {
|
if (typeof plus != "undefined") {
|
plus.device.vibrate(12)
|
} else {
|
instance.callMethod("vibrate");
|
}
|
}
|
}
|
var All_Config = {};
|
var config = {};
|
|
function receiveData(e, state, instance) {
|
if (typeof e == "undefined")
|
return;
|
|
var data = JSON.parse(e);
|
//console.log("receiveData:",e)
|
var tmp_config = {};
|
var hasGuid = false;
|
var sortArray = [];
|
for (var i = 0; i < data.length; i++) {
|
var arr = data[i];
|
switch (arr[0]) {
|
case "sortArray":
|
sortArray = arr[1];
|
break;
|
default:
|
if (arr[0] == 'guid') {
|
hasGuid = true;
|
}
|
tmp_config[arr[0]] = arr[1];
|
break;
|
}
|
}
|
if (!hasGuid) {
|
return;
|
}
|
//console.log("receiveData:",JSON.stringify(All_Config),JSON.stringify(tmp_config));
|
var isUpdateList = false;
|
var bChangePage = false
|
if (typeof All_Config[tmp_config.guid] == "undefined" || typeof All_Config[tmp_config.guid].lastInitTime ==
|
"undefined" || All_Config[tmp_config.guid].lastInitTime != tmp_config.lastInitTime ||
|
(typeof All_Config[tmp_config.guid].curPage == "undefined" || All_Config[tmp_config.guid].curPage != tmp_config
|
.curPage)) {
|
isUpdateList = true;
|
}
|
if (tmp_config.curPage != "undefined")
|
pageMove = tmp_config.curPage
|
//var winWidth = 0
|
if (typeof All_Config[tmp_config.guid] != "undefined") {
|
if (typeof All_Config[tmp_config.guid].curPage != "undefined") {
|
|
if (All_Config[tmp_config.guid].curPage != tmp_config.curPage) {
|
bChangePage = true
|
|
}
|
}
|
}
|
//console.log("receiveData ChangePage:",bChangePage)
|
All_Config[tmp_config.guid] = tmp_config;
|
if (isUpdateList) {
|
|
config.listLength = tmp_config.listLength
|
config.listViewTop = tmp_config.listViewTop
|
config.listViewBottom = tmp_config.listViewBottom
|
updateSortList(tmp_config.guid, instance, sortArray, tmp_config.curPage, bChangePage);
|
}
|
|
|
}
|
// 更新guid对应的排序列表
|
function updateSortList(guid, instance, sortArray, page, isChangePage) {
|
|
if (sortArray.length > 0) {
|
//rowSort = sortArray.length-1;
|
console.log("updateSortList sortArray:", sortArray)
|
}
|
config.curPage = page
|
|
sortList[guid] = [];
|
var comClass = '.hm-row' + page
|
//console.log("updateSortList instanceList:",comClass)
|
var pageSortList = instance.selectAllComponents(comClass);
|
var nSort = -1
|
var moveY = 0
|
if (isChangePage) {
|
if (sorting) {
|
/* if(pageMove == pageStart)
|
{
|
nSort = rowStartSort
|
}
|
else{
|
nSort = config.listLength- 1
|
} */
|
nSort = config.listLength- 1
|
var scrollTop2 = scrollTop[config.guid][config.curPage]
|
var state = instance.getState();
|
moveY = state.shadowRowTop// + scrollTop2
|
var moveSort = calcOffset(0, moveY)
|
rowSort = nSort
|
/* var offsetTop = config.listLength * config.rowHeight - config.ListHeight
|
if(offsetTop > 0)
|
{
|
state.initscrollTop = offsetTop
|
} */
|
if(scrollTop2 > 0)
|
{
|
rowSort = moveSort
|
state.offset = moveSort
|
rowMoveSort = moveSort
|
}
|
else{
|
if(moveSort > nSort)
|
{
|
rowSort = nSort
|
rowMoveSort= nSort
|
}
|
else
|
{
|
rowSort = moveSort
|
rowMoveSort= moveSort
|
}
|
state.offset = moveSort
|
}
|
moveY = 0
|
}
|
}
|
|
console.log("updateSortList Sort:", page, nSort,rowSort)
|
//console.log("updateSortList pageSortList:",pageSortList.length)
|
for (var i = 0; i < pageSortList.length; i++) {
|
var tmp_row = {
|
id: pageSortList[i].getDataset().id,
|
sort: i,
|
lastSort: parseInt(pageSortList[i].getDataset().sort),
|
newSort: i,
|
rowView: pageSortList[i]
|
};
|
if (sortArray.length > 0) {
|
tmp_row.lastSort = sortArray[i];
|
tmp_row.newSort = tmp_row.lastSort;
|
}
|
|
//console.log("updateSortList：", i,JSON.stringify(pageSortList[i]));
|
sortList[guid].push(tmp_row);
|
var translateY = (tmp_row.lastSort - tmp_row.sort) * 100;
|
if (isChangePage)
|
{
|
if(nSort >= 0)
|
{
|
if( nSort == tmp_row.lastSort)
|
{
|
currentRowView = tmp_row.rowView;
|
tmp_row.newSort = rowMoveSort;
|
translateY = (tmp_row.newSort - tmp_row.sort) * 100;
|
tmp_row.lastSort = tmp_row.newSort;
|
//console.log("updateSortList currentRowView：", tmp_row.sort,tmp_row.newSort,translateY);
|
}
|
else if (tmp_row.lastSort < nSort && tmp_row.lastSort >= rowSort) {
|
tmp_row.newSort = tmp_row.lastSort + 1;
|
translateY = (tmp_row.newSort - tmp_row.sort) * 100;
|
tmp_row.lastSort = tmp_row.newSort;
|
// console.log("updateSortList：", tmp_row.sort,tmp_row.newSort,translateY);
|
}
|
}
|
//var rowHeight2 = tmp_row.rowView.getBoundingClientRect().height;
|
}
|
|
//console.log("updateSortList：", i,translateY);
|
tmp_row.rowView.setStyle({
|
'transform': 'translate3d(0,' + translateY + '%,0)',
|
'-webkit-transform': 'translate3d(0,' + translateY + '%,0)'
|
});
|
//console.log("updateSortList currentRowView:",JSON.stringify(tmp_row.rowView))
|
}
|
/* if (isChangePage) {
|
if (sorting) {
|
//console.log("updateSortList：");
|
moveRow(instance, 0,moveY)
|
}
|
} */
|
|
}
|
/* function updateSortList(guid, instance, sortArray, page, isChangePage) {
|
|
if (sortArray.length > 0) {
|
//rowSort = sortArray.length-1;
|
console.log("updateSortList sortArray:", sortArray)
|
}
|
config.curPage = page
|
|
sortList[guid] = [];
|
var comClass = '.hm-row' + page
|
//console.log("updateSortList instanceList:",comClass)
|
var pageSortList = instance.selectAllComponents(comClass);
|
var nSort = rowSort
|
if (nSort > config.listLength - 1) {
|
nSort = config.listLength- 1
|
}
|
|
var moveY = 0
|
if (isChangePage) {
|
if (sorting) {
|
var state = instance.getState();
|
moveY = state.shadowRowTop + scrollTop[config.guid][config.curPage];
|
|
var moveSort = calcOffset(0, moveY)
|
var startSort = moveSort
|
if (moveSort > config.listLength - 1) {
|
moveSort = config.listLength- 1
|
startSort = calcOffset(0, state.shadowRowTop)
|
}
|
if (moveSort == rowMoveSort || moveSort == config.listLength - 1) {
|
moveY= 0
|
rowMoveSort =moveSort
|
nSort = rowMoveSort
|
rowSort =startSort
|
state.offset = rowMoveSort
|
instance.callMethod("change", {
|
index: rowStartSort,
|
moveTo: state.offset,
|
page: pageStart,
|
pageMoveTo: pageMove,
|
});
|
}
|
else{
|
|
nSort = rowMoveSort
|
rowSort = startSort
|
state.offset = rowSort
|
moveY = (moveSort - rowSort) *config.rowHeight - scrollTop[config.guid][config.curPage]
|
}
|
console.log("updateSortList offset:", moveY, rowSort,moveSort)
|
}
|
}
|
|
console.log("updateSortList Sort:", nSort)
|
//console.log("updateSortList pageSortList:",pageSortList.length)
|
for (var i = 0; i < pageSortList.length; i++) {
|
var tmp_row = {
|
id: pageSortList[i].getDataset().id,
|
sort: i,
|
lastSort: parseInt(pageSortList[i].getDataset().sort),
|
newSort: i,
|
rowView: pageSortList[i]
|
};
|
if (sortArray.length > 0) {
|
tmp_row.lastSort = sortArray[i];
|
tmp_row.newSort = tmp_row.lastSort;
|
|
}
|
//console.log("updateSortList：", i,JSON.stringify(pageSortList[i]));
|
sortList[guid].push(tmp_row);
|
var translateY = (tmp_row.lastSort - tmp_row.sort) * 100;
|
var rowHeight2 = tmp_row.rowView.getBoundingClientRect().height;
|
if (isChangePage && nSort == tmp_row.lastSort)
|
currentRowView = tmp_row.rowView;
|
//console.log("updateSortList：", i,translateY,rowHeight2);
|
tmp_row.rowView.setStyle({
|
'transform': 'translate3d(0,' + translateY + '%,0)',
|
'-webkit-transform': 'translate3d(0,' + translateY + '%,0)'
|
});
|
//console.log("updateSortList currentRowView:",JSON.stringify(tmp_row.rowView))
|
}
|
if(moveY > 0){
|
moveRow(instance, 0,moveY)
|
}
|
|
}
|
*/
|
// 输出
|
module.exports = {
|
receiveData: receiveData,
|
scroll: scroll,
|
longpress: longpress,
|
touchstart: touchstart,
|
touchmove: touchmove,
|
touchend: touchend
|
}
|
