222
This commit is contained in:
zoujiandong
+5
@@ -10,4 +10,9 @@ wx-button:after{
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
page{--status-bar-height:25px;--top-window-height:0px;--window-top:0px;--window-bottom:0px;--window-left:0px;--window-right:0px;--window-magin:0px}[data-c-h="true"]{display: none !important;}
|
||||
+126
-113
@@ -147,7 +147,7 @@ const _sfc_main = {
|
||||
};
|
||||
const getUserPoint = () => {
|
||||
api_api.api.getUserPoint().then((res) => {
|
||||
common_vendor.index.__f__("log", "at pages/detail/detail.vue:676", res.data.data);
|
||||
common_vendor.index.__f__("log", "at pages/detail/detail.vue:680", res.data.data);
|
||||
point.value = res.data.data;
|
||||
});
|
||||
};
|
||||
@@ -326,18 +326,18 @@ const _sfc_main = {
|
||||
};
|
||||
const close = () => {
|
||||
showCommentDialog.value = false;
|
||||
common_vendor.index.__f__("log", "at pages/detail/detail.vue:869", "close");
|
||||
common_vendor.index.__f__("log", "at pages/detail/detail.vue:873", "close");
|
||||
};
|
||||
const openDeal = () => {
|
||||
showDeal.value = true;
|
||||
common_vendor.index.__f__("log", "at pages/detail/detail.vue:874", "open");
|
||||
common_vendor.index.__f__("log", "at pages/detail/detail.vue:878", "open");
|
||||
};
|
||||
const closeDeal = () => {
|
||||
showDeal.value = false;
|
||||
};
|
||||
const openMore = () => {
|
||||
showMore.value = true;
|
||||
common_vendor.index.__f__("log", "at pages/detail/detail.vue:882", "open");
|
||||
common_vendor.index.__f__("log", "at pages/detail/detail.vue:886", "open");
|
||||
};
|
||||
const closeMore = () => {
|
||||
showMore.value = false;
|
||||
@@ -375,12 +375,12 @@ const _sfc_main = {
|
||||
success(res) {
|
||||
if (res.statusCode === 204) {
|
||||
let url = host + "/" + dir + filename + imgType;
|
||||
common_vendor.index.__f__("log", "at pages/detail/detail.vue:1233", url);
|
||||
common_vendor.index.__f__("log", "at pages/detail/detail.vue:1237", url);
|
||||
imgList.value = [url];
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
common_vendor.index.__f__("log", "at pages/detail/detail.vue:1238", err);
|
||||
common_vendor.index.__f__("log", "at pages/detail/detail.vue:1242", err);
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -399,8 +399,8 @@ const _sfc_main = {
|
||||
return "unknown";
|
||||
};
|
||||
const afterRead = (file, lists, name) => {
|
||||
common_vendor.index.__f__("log", "at pages/detail/detail.vue:1257", lists);
|
||||
common_vendor.index.__f__("log", "at pages/detail/detail.vue:1258", name);
|
||||
common_vendor.index.__f__("log", "at pages/detail/detail.vue:1261", lists);
|
||||
common_vendor.index.__f__("log", "at pages/detail/detail.vue:1262", name);
|
||||
handleUpload(file);
|
||||
};
|
||||
const delImg = (index) => {
|
||||
@@ -700,99 +700,101 @@ const _sfc_main = {
|
||||
height: "46rpx",
|
||||
radius: "50%"
|
||||
}),
|
||||
c: common_vendor.p({
|
||||
disabled: true,
|
||||
c: common_vendor.o(open),
|
||||
d: common_vendor.p({
|
||||
disabled: isH5.value ? false : true,
|
||||
type: "text",
|
||||
placeholderClass: "placeholderClass",
|
||||
placeholder: "对病例发表您的看法"
|
||||
}),
|
||||
d: common_vendor.o(open),
|
||||
e: common_vendor.o(toggleCollect),
|
||||
f: common_vendor.p({
|
||||
e: common_vendor.o(open),
|
||||
f: common_vendor.o(open),
|
||||
g: common_vendor.o(toggleCollect),
|
||||
h: common_vendor.p({
|
||||
src: info.is_collect ? common_vendor.unref(common_assets.collectonImg) : common_vendor.unref(common_assets.collectImg),
|
||||
mode: "widthFix",
|
||||
width: "38rpx"
|
||||
}),
|
||||
g: common_vendor.p({
|
||||
i: common_vendor.p({
|
||||
src: common_vendor.unref(common_assets.shangImg),
|
||||
mode: "widthFix",
|
||||
width: "169rpx",
|
||||
height: "77rpx"
|
||||
}),
|
||||
h: common_vendor.o(openGivePop),
|
||||
i: type.value == "video"
|
||||
j: common_vendor.o(openGivePop),
|
||||
k: type.value == "video"
|
||||
}, type.value == "video" ? {
|
||||
j: common_vendor.t(info.video_title)
|
||||
l: common_vendor.t(info.video_title)
|
||||
} : type.value == "article" ? {
|
||||
l: common_vendor.t(info.article_title)
|
||||
n: common_vendor.t(info.article_title)
|
||||
} : {
|
||||
m: common_vendor.t(info.exchange_title)
|
||||
o: common_vendor.t(info.exchange_title)
|
||||
}, {
|
||||
k: type.value == "article",
|
||||
n: common_vendor.f(info.author, (item, k0, i0) => {
|
||||
m: type.value == "article",
|
||||
p: common_vendor.f(info.author, (item, k0, i0) => {
|
||||
return {
|
||||
a: "eca06f3c-6-" + i0 + ",eca06f3c-0",
|
||||
b: common_vendor.t(item.doctor_name),
|
||||
c: common_vendor.t(item.hospital_name)
|
||||
};
|
||||
}),
|
||||
o: common_vendor.p({
|
||||
q: common_vendor.p({
|
||||
src: common_vendor.unref(common_assets.headImg),
|
||||
mode: "widthFix",
|
||||
width: "46rpx",
|
||||
height: "46rpx",
|
||||
radius: "50%"
|
||||
}),
|
||||
p: common_vendor.p({
|
||||
r: common_vendor.p({
|
||||
name: "eye",
|
||||
color: "#6B7280",
|
||||
size: "28rpx"
|
||||
}),
|
||||
q: common_vendor.t(info.read_num),
|
||||
r: common_vendor.p({
|
||||
s: common_vendor.t(info.read_num),
|
||||
t: common_vendor.p({
|
||||
name: info.is_collect ? "heart-fill" : "heart",
|
||||
color: info.is_collect ? "red" : "#6B7280",
|
||||
size: "28rpx"
|
||||
}),
|
||||
s: common_vendor.t(info.collect_num),
|
||||
t: common_vendor.p({
|
||||
v: common_vendor.t(info.collect_num),
|
||||
w: common_vendor.p({
|
||||
name: "clock",
|
||||
color: "#6B7280",
|
||||
size: "28rpx"
|
||||
}),
|
||||
v: common_vendor.t(formatDay(info.push_date)),
|
||||
w: showCanvas.value
|
||||
x: common_vendor.t(formatDay(info.push_date)),
|
||||
y: showCanvas.value
|
||||
}, showCanvas.value ? {} : {}, {
|
||||
x: type.value == "video" && !isH5.value
|
||||
z: type.value == "video" && !isH5.value
|
||||
}, type.value == "video" && !isH5.value ? {
|
||||
y: "playerContext" + info.video_no,
|
||||
z: "playerId" + info.video_no,
|
||||
A: info.video_no
|
||||
A: "playerContext" + info.video_no,
|
||||
B: "playerId" + info.video_no,
|
||||
C: info.video_no
|
||||
} : {}, {
|
||||
B: type.value == "video" && isH5.value
|
||||
D: type.value == "video" && isH5.value
|
||||
}, type.value == "video" && isH5.value ? {} : type.value == "article" ? {
|
||||
D: common_vendor.p({
|
||||
F: common_vendor.p({
|
||||
content: fromatImg(info.article_content)
|
||||
})
|
||||
} : common_vendor.e({
|
||||
E: info.exchange_content
|
||||
G: info.exchange_content
|
||||
}, info.exchange_content ? {
|
||||
F: common_vendor.p({
|
||||
H: common_vendor.p({
|
||||
content: fromatImg(info.exchange_content)
|
||||
})
|
||||
} : {}, {
|
||||
G: info.exchange_summary
|
||||
I: info.exchange_summary
|
||||
}, info.exchange_summary ? {
|
||||
H: common_vendor.p({
|
||||
J: common_vendor.p({
|
||||
content: fromatImg(info.exchange_summary)
|
||||
})
|
||||
} : {}, {
|
||||
I: info.case_exchange_vote && info.case_exchange_vote.vote_title
|
||||
K: info.case_exchange_vote && info.case_exchange_vote.vote_title
|
||||
}, info.case_exchange_vote && info.case_exchange_vote.vote_title ? common_vendor.e({
|
||||
J: info.case_exchange_vote.is_have_voted != 1
|
||||
L: info.case_exchange_vote.is_have_voted != 1
|
||||
}, info.case_exchange_vote.is_have_voted != 1 ? {
|
||||
K: common_vendor.t(info.case_exchange_vote.vote_title),
|
||||
L: common_vendor.f(info.case_exchange_vote.case_exchange_vote_option, (item, k0, i0) => {
|
||||
M: common_vendor.t(info.case_exchange_vote.vote_title),
|
||||
N: common_vendor.f(info.case_exchange_vote.case_exchange_vote_option, (item, k0, i0) => {
|
||||
return {
|
||||
a: "eca06f3c-15-" + i0 + ",eca06f3c-14",
|
||||
b: common_vendor.p({
|
||||
@@ -803,31 +805,31 @@ const _sfc_main = {
|
||||
c: item.option_id
|
||||
};
|
||||
}),
|
||||
M: common_vendor.o(($event) => option_id.value = $event),
|
||||
N: common_vendor.p({
|
||||
O: common_vendor.o(($event) => option_id.value = $event),
|
||||
P: common_vendor.p({
|
||||
placement: "column",
|
||||
modelValue: option_id.value
|
||||
}),
|
||||
O: common_vendor.o(addVote)
|
||||
Q: common_vendor.o(addVote)
|
||||
} : {
|
||||
P: common_vendor.t(info.case_exchange_vote.vote_title),
|
||||
Q: common_vendor.f(info.case_exchange_vote.case_exchange_vote_option, (item, k0, i0) => {
|
||||
R: common_vendor.t(info.case_exchange_vote.vote_title),
|
||||
S: common_vendor.f(info.case_exchange_vote.case_exchange_vote_option, (item, k0, i0) => {
|
||||
return {
|
||||
a: common_vendor.t(item.option_value),
|
||||
b: common_vendor.t(item.proportion),
|
||||
c: item.option_id
|
||||
};
|
||||
}),
|
||||
R: _ctx.proportion / 100
|
||||
T: _ctx.proportion / 100
|
||||
}) : {}), {
|
||||
C: type.value == "article",
|
||||
S: common_vendor.p({
|
||||
E: type.value == "article",
|
||||
U: common_vendor.p({
|
||||
src: common_vendor.unref(common_assets.commentImg),
|
||||
mode: "widthFix",
|
||||
width: "50rpx"
|
||||
}),
|
||||
T: common_vendor.t(total.value),
|
||||
U: common_vendor.f(dataList.value, (item, index, i0) => {
|
||||
V: common_vendor.t(total.value),
|
||||
W: common_vendor.f(dataList.value, (item, index, i0) => {
|
||||
return common_vendor.e({
|
||||
a: "eca06f3c-17-" + i0 + ",eca06f3c-0",
|
||||
b: common_vendor.t(item.user_name),
|
||||
@@ -882,57 +884,68 @@ const _sfc_main = {
|
||||
o: item.comment_id
|
||||
});
|
||||
}),
|
||||
V: common_vendor.p({
|
||||
X: common_vendor.p({
|
||||
src: common_vendor.unref(common_assets.headImg),
|
||||
width: "86rpx",
|
||||
height: "86rpx",
|
||||
radius: "50%"
|
||||
}),
|
||||
W: common_vendor.sr(paging, "eca06f3c-0", {
|
||||
Y: common_vendor.sr(paging, "eca06f3c-0", {
|
||||
"k": "paging"
|
||||
}),
|
||||
X: common_vendor.o(queryList),
|
||||
Y: common_vendor.o(($event) => dataList.value = $event),
|
||||
Z: common_vendor.p({
|
||||
Z: common_vendor.o(queryList),
|
||||
aa: common_vendor.o(($event) => dataList.value = $event),
|
||||
ab: common_vendor.p({
|
||||
["inside-more"]: true,
|
||||
["loading-more-no-more-text"]: "咱也是有底线的！",
|
||||
["auto-show-back-to-top"]: false,
|
||||
["empty-view-super-style"]: {
|
||||
"paddingBottom": "140rpx"
|
||||
},
|
||||
["refresher-title-style"]: {
|
||||
"paddingBottom": "60rpx",
|
||||
"paddingTop": "10rpx"
|
||||
},
|
||||
["refresher-img-style"]: {
|
||||
"paddingBottom": "60rpx",
|
||||
"paddingTop": "10rpx"
|
||||
},
|
||||
modelValue: dataList.value
|
||||
}),
|
||||
aa: common_vendor.sr(commentTextarea, "eca06f3c-22,eca06f3c-21", {
|
||||
ac: common_vendor.sr(commentTextarea, "eca06f3c-22,eca06f3c-21", {
|
||||
"k": "commentTextarea"
|
||||
}),
|
||||
ab: common_vendor.o(($event) => content.value = $event),
|
||||
ac: common_vendor.p({
|
||||
ad: common_vendor.o(($event) => content.value = $event),
|
||||
ae: common_vendor.p({
|
||||
focus: "true",
|
||||
height: "200",
|
||||
placeholder: placeholder.value,
|
||||
modelValue: content.value
|
||||
}),
|
||||
ad: imgList.value.length > 0
|
||||
af: imgList.value.length > 0
|
||||
}, imgList.value.length > 0 ? {
|
||||
ae: common_vendor.o(($event) => previewImg(imgList.value[0])),
|
||||
af: common_vendor.p({
|
||||
ag: common_vendor.o(($event) => previewImg(imgList.value[0])),
|
||||
ah: common_vendor.p({
|
||||
src: imgList.value[0],
|
||||
radius: "6",
|
||||
width: "150rpx",
|
||||
height: "150rpx"
|
||||
}),
|
||||
ag: common_vendor.p({
|
||||
ai: common_vendor.p({
|
||||
name: "close-circle",
|
||||
color: "#666",
|
||||
size: "16"
|
||||
}),
|
||||
ah: common_vendor.o(delImg)
|
||||
aj: common_vendor.o(delImg)
|
||||
} : {}, {
|
||||
ai: common_vendor.p({
|
||||
ak: common_vendor.p({
|
||||
src: common_vendor.unref(common_assets.uploadImg),
|
||||
mode: "widthFix",
|
||||
width: "40rpx",
|
||||
height: "77rpx"
|
||||
}),
|
||||
aj: common_vendor.o(afterRead),
|
||||
ak: common_vendor.p({
|
||||
al: common_vendor.o(afterRead),
|
||||
am: common_vendor.p({
|
||||
["show-upload-list"]: false,
|
||||
name: "imgupload",
|
||||
multiple: true,
|
||||
@@ -940,10 +953,10 @@ const _sfc_main = {
|
||||
width: "40rpx",
|
||||
height: "77rpx"
|
||||
}),
|
||||
al: common_vendor.o(sendComment),
|
||||
am: common_vendor.o(close),
|
||||
an: common_vendor.o(open),
|
||||
ao: common_vendor.p({
|
||||
an: common_vendor.o(sendComment),
|
||||
ao: common_vendor.o(close),
|
||||
ap: common_vendor.o(open),
|
||||
aq: common_vendor.p({
|
||||
zIndex: 99,
|
||||
overlayStyle: {
|
||||
zIndex: 98
|
||||
@@ -954,20 +967,20 @@ const _sfc_main = {
|
||||
closeable: true,
|
||||
mode: "bottom"
|
||||
}),
|
||||
ap: level.value == 2 && is_author.value
|
||||
ar: level.value == 2 && is_author.value
|
||||
}, level.value == 2 && is_author.value ? {
|
||||
aq: common_vendor.t(is_top.value ? "取消置顶" : "置顶"),
|
||||
ar: common_vendor.o(toggleTop)
|
||||
as: common_vendor.t(is_top.value ? "取消置顶" : "置顶"),
|
||||
at: common_vendor.o(toggleTop)
|
||||
} : {}, {
|
||||
as: common_vendor.o(openCommentDialog),
|
||||
at: is_author.value || user_id.value == comment_userId.value
|
||||
av: common_vendor.o(openCommentDialog),
|
||||
aw: is_author.value || user_id.value == comment_userId.value
|
||||
}, is_author.value || user_id.value == comment_userId.value ? {
|
||||
av: common_vendor.o(delComment)
|
||||
ax: common_vendor.o(delComment)
|
||||
} : {}, {
|
||||
aw: common_vendor.o(closeDealPop),
|
||||
ax: common_vendor.o(closeDeal),
|
||||
ay: common_vendor.o(openDeal),
|
||||
az: common_vendor.p({
|
||||
ay: common_vendor.o(closeDealPop),
|
||||
az: common_vendor.o(closeDeal),
|
||||
aA: common_vendor.o(openDeal),
|
||||
aB: common_vendor.p({
|
||||
zIndex: 60,
|
||||
overlayStyle: {
|
||||
zIndex: 59
|
||||
@@ -977,33 +990,33 @@ const _sfc_main = {
|
||||
round: 10,
|
||||
mode: "bottom"
|
||||
}),
|
||||
aA: common_vendor.p({
|
||||
aC: common_vendor.p({
|
||||
name: "close",
|
||||
color: "#666",
|
||||
size: "20"
|
||||
}),
|
||||
aB: common_vendor.o(closeMore),
|
||||
aC: common_vendor.p({
|
||||
aD: common_vendor.o(closeMore),
|
||||
aE: common_vendor.p({
|
||||
src: common_vendor.unref(common_assets.headImg),
|
||||
width: "86rpx",
|
||||
height: "86rpx",
|
||||
radius: "50%"
|
||||
}),
|
||||
aD: common_vendor.t(mainCommentObj.user_name),
|
||||
aE: common_vendor.o(($event) => alertDeal(mainCommentObj.comment_id, mainCommentObj.comment_id, mainCommentObj.is_author, mainCommentObj.user_name, mainCommentObj.is_top, 2, mainCommentObj.user_id)),
|
||||
aF: common_vendor.t(mainCommentObj.content),
|
||||
aG: mainCommentObj.comment_image
|
||||
aF: common_vendor.t(mainCommentObj.user_name),
|
||||
aG: common_vendor.o(($event) => alertDeal(mainCommentObj.comment_id, mainCommentObj.comment_id, mainCommentObj.is_author, mainCommentObj.user_name, mainCommentObj.is_top, 2, mainCommentObj.user_id)),
|
||||
aH: common_vendor.t(mainCommentObj.content),
|
||||
aI: mainCommentObj.comment_image
|
||||
}, mainCommentObj.comment_image ? {
|
||||
aH: common_vendor.o(($event) => previewImg(mainCommentObj.comment_image)),
|
||||
aI: common_vendor.p({
|
||||
aJ: common_vendor.o(($event) => previewImg(mainCommentObj.comment_image)),
|
||||
aK: common_vendor.p({
|
||||
src: mainCommentObj.comment_image,
|
||||
radius: "16rpx",
|
||||
width: "150rpx",
|
||||
height: "150rpx"
|
||||
})
|
||||
} : {}, {
|
||||
aJ: common_vendor.t(formatDate(mainCommentObj.created_at)),
|
||||
aK: common_vendor.f(childList.value, (cell, index, i0) => {
|
||||
aL: common_vendor.t(formatDate(mainCommentObj.created_at)),
|
||||
aM: common_vendor.f(childList.value, (cell, index, i0) => {
|
||||
return common_vendor.e({
|
||||
a: "eca06f3c-32-" + i0 + ",eca06f3c-28",
|
||||
b: common_vendor.t(cell.user_name),
|
||||
@@ -1024,23 +1037,23 @@ const _sfc_main = {
|
||||
j: cell.comment_id
|
||||
});
|
||||
}),
|
||||
aL: common_vendor.p({
|
||||
aN: common_vendor.p({
|
||||
src: common_vendor.unref(common_assets.headImg),
|
||||
width: "86rpx",
|
||||
height: "86rpx",
|
||||
radius: "50%"
|
||||
}),
|
||||
aM: common_vendor.o(($event) => _ctx.value = $event),
|
||||
aN: common_vendor.p({
|
||||
aO: common_vendor.o(($event) => _ctx.value = $event),
|
||||
aP: common_vendor.p({
|
||||
readonly: true,
|
||||
placeholder: "@" + mainCommentObj.user_name + "：",
|
||||
border: "surround",
|
||||
modelValue: _ctx.value
|
||||
}),
|
||||
aO: common_vendor.o(showReplyPop),
|
||||
aP: common_vendor.o(closeMore),
|
||||
aQ: common_vendor.o(openMore),
|
||||
aR: common_vendor.p({
|
||||
aQ: common_vendor.o(showReplyPop),
|
||||
aR: common_vendor.o(closeMore),
|
||||
aS: common_vendor.o(openMore),
|
||||
aT: common_vendor.p({
|
||||
zIndex: 10,
|
||||
overlayStyle: {
|
||||
zIndex: 9
|
||||
@@ -1050,26 +1063,26 @@ const _sfc_main = {
|
||||
round: 10,
|
||||
mode: "bottom"
|
||||
}),
|
||||
aS: common_vendor.t(point.value),
|
||||
aT: common_vendor.o(($event) => changePoint("minus")),
|
||||
aU: common_vendor.o(inputPoint),
|
||||
aV: common_vendor.o(($event) => givePointValue.value = $event),
|
||||
aW: common_vendor.p({
|
||||
aU: common_vendor.t(point.value),
|
||||
aV: common_vendor.o(($event) => changePoint("minus")),
|
||||
aW: common_vendor.o(inputPoint),
|
||||
aX: common_vendor.o(($event) => givePointValue.value = $event),
|
||||
aY: common_vendor.p({
|
||||
placeholder: "请输入打赏积分",
|
||||
type: "number",
|
||||
border: "surround",
|
||||
modelValue: givePointValue.value
|
||||
}),
|
||||
aX: common_vendor.o(($event) => changePoint("add")),
|
||||
aY: common_vendor.o(($event) => showGive.value = false),
|
||||
aZ: common_vendor.o(confirmGive),
|
||||
ba: common_vendor.p({
|
||||
aZ: common_vendor.o(($event) => changePoint("add")),
|
||||
ba: common_vendor.o(($event) => showGive.value = false),
|
||||
bb: common_vendor.o(confirmGive),
|
||||
bc: common_vendor.p({
|
||||
show: showGive.value,
|
||||
["mask-click-able"]: true
|
||||
}),
|
||||
bb: common_vendor.o(($event) => showModal.value = false),
|
||||
bc: common_vendor.o(confirmDel),
|
||||
bd: common_vendor.p({
|
||||
bd: common_vendor.o(($event) => showModal.value = false),
|
||||
be: common_vendor.o(confirmDel),
|
||||
bf: common_vendor.p({
|
||||
show: showModal.value,
|
||||
["mask-click-able"]: true
|
||||
})
|
||||
|
||||
+1
-1
File diff suppressed because one or more lines are too long
+586
@@ -0,0 +1,586 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const block0 = (Component2) => {
|
||||
if (!Component2.wxsCallMethods) {
|
||||
Component2.wxsCallMethods = [];
|
||||
}
|
||||
Component2.wxsCallMethods.push("dataChange");
|
||||
};
|
||||
const AREA_SIZE = 75;
|
||||
const IMG_SIZE = 300;
|
||||
const _sfc_main = {
|
||||
name: "qf-image-cropper",
|
||||
options: {
|
||||
// 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响
|
||||
styleIsolation: "isolated"
|
||||
},
|
||||
props: {
|
||||
/** 图片资源地址 */
|
||||
src: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
/** 裁剪宽度，有些平台或设备对于canvas的尺寸有限制，过大可能会导致无法正常绘制 */
|
||||
width: {
|
||||
type: Number,
|
||||
default: IMG_SIZE
|
||||
},
|
||||
/** 裁剪高度，有些平台或设备对于canvas的尺寸有限制，过大可能会导致无法正常绘制 */
|
||||
height: {
|
||||
type: Number,
|
||||
default: IMG_SIZE
|
||||
},
|
||||
/** 是否绘制裁剪区域边框 */
|
||||
showBorder: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
/** 是否绘制裁剪区域网格参考线 */
|
||||
showGrid: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
/** 是否展示四个支持伸缩的角 */
|
||||
showAngle: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
/** 裁剪区域最小缩放倍数 */
|
||||
areaScale: {
|
||||
type: Number,
|
||||
default: 0.3
|
||||
},
|
||||
/** 图片最小缩放倍数 */
|
||||
minScale: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
/** 图片最大缩放倍数 */
|
||||
maxScale: {
|
||||
type: Number,
|
||||
default: 5
|
||||
},
|
||||
/** 检查图片位置是否超出裁剪边界，如果超出则会矫正位置 */
|
||||
checkRange: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
/** 生成图片背景色：如果裁剪区域没有完全包含在图片中时，不设置该属性生成图片存在一定的透明块 */
|
||||
backgroundColor: {
|
||||
type: String
|
||||
},
|
||||
/** 是否有回弹效果：当 checkRange 为 true 时有效，拖动时可以拖出边界，释放时会弹回边界 */
|
||||
bounce: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
/** 是否支持翻转 */
|
||||
rotatable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
/** 是否支持逆向翻转 */
|
||||
reverseRotatable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
/** 是否支持从本地选择素材 */
|
||||
choosable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
/** 是否开启硬件加速，图片缩放过程中如果出现元素的“留影”或“重影”效果，可通过该方式解决或减轻这一问题 */
|
||||
gpu: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
/** 四个角尺寸，单位px */
|
||||
angleSize: {
|
||||
type: Number,
|
||||
default: 20
|
||||
},
|
||||
/** 四个角边框宽度，单位px */
|
||||
angleBorderWidth: {
|
||||
type: Number,
|
||||
default: 2
|
||||
},
|
||||
zIndex: {
|
||||
type: [Number, String]
|
||||
},
|
||||
/** 裁剪图片圆角半径，单位px */
|
||||
radius: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
/** 生成文件的类型，只支持 'jpg' 或 'png'。默认为 'png' */
|
||||
fileType: {
|
||||
type: String,
|
||||
default: "png"
|
||||
},
|
||||
/**
|
||||
* 图片从绘制到生成所需时间，单位ms
|
||||
* 微信小程序平台使用 `Canvas 2D` 绘制时有效
|
||||
* 如绘制大图或出现裁剪图片空白等情况应适当调大该值，因 `Canvas 2d` 采用同步绘制，需自己把控绘制完成时间
|
||||
*/
|
||||
delay: {
|
||||
type: Number,
|
||||
default: 1e3
|
||||
}
|
||||
},
|
||||
emits: ["crop"],
|
||||
data() {
|
||||
return {
|
||||
// 用不同 id 使 v-for key 不重复
|
||||
maskList: [
|
||||
{ id: "crop-mask-block-1" },
|
||||
{ id: "crop-mask-block-2" },
|
||||
{ id: "crop-mask-block-3" },
|
||||
{ id: "crop-mask-block-4" }
|
||||
],
|
||||
gridList: [
|
||||
{ id: "crop-grid-1" },
|
||||
{ id: "crop-grid-2" },
|
||||
{ id: "crop-grid-3" },
|
||||
{ id: "crop-grid-4" }
|
||||
],
|
||||
angleList: [
|
||||
{ id: "crop-angle-1" },
|
||||
{ id: "crop-angle-2" },
|
||||
{ id: "crop-angle-3" },
|
||||
{ id: "crop-angle-4" }
|
||||
],
|
||||
/** 本地缓存的图片路径 */
|
||||
imgSrc: "",
|
||||
/** 图片的裁剪宽度 */
|
||||
imgWidth: IMG_SIZE,
|
||||
/** 图片的裁剪高度 */
|
||||
imgHeight: IMG_SIZE,
|
||||
/** 裁剪区域最大宽度所占屏幕宽度百分比 */
|
||||
widthPercent: AREA_SIZE,
|
||||
/** 裁剪区域最大高度所占屏幕宽度百分比 */
|
||||
heightPercent: AREA_SIZE,
|
||||
/** 裁剪区域布局信息 */
|
||||
area: {},
|
||||
/** 未被缩放过的图片宽 */
|
||||
oldWidth: 0,
|
||||
/** 未被缩放过的图片高 */
|
||||
oldHeight: 0,
|
||||
/** 系统信息 */
|
||||
sys: common_vendor.index.getSystemInfoSync(),
|
||||
scaleWidth: 0,
|
||||
scaleHeight: 0,
|
||||
rotate: 0,
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
use2d: false,
|
||||
canvansWidth: 0,
|
||||
canvansHeight: 0
|
||||
// imageStyles: {},
|
||||
// maskStylesList: [{}, {}, {}, {}],
|
||||
// borderStyles: {},
|
||||
// gridStylesList: [{}, {}, {}, {}],
|
||||
// angleStylesList: [{}, {}, {}, {}],
|
||||
// circleBoxStyles: {},
|
||||
// circleStyles: {},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
initData() {
|
||||
return {
|
||||
timestamp: (/* @__PURE__ */ new Date()).getTime(),
|
||||
area: {
|
||||
...this.area,
|
||||
bounce: this.bounce,
|
||||
showBorder: this.showBorder,
|
||||
showGrid: this.showGrid,
|
||||
showAngle: this.showAngle,
|
||||
angleSize: this.angleSize,
|
||||
angleBorderWidth: this.angleBorderWidth,
|
||||
minScale: this.areaScale,
|
||||
widthPercent: this.widthPercent,
|
||||
heightPercent: this.heightPercent,
|
||||
radius: this.radius,
|
||||
checkRange: this.checkRange,
|
||||
zIndex: +this.zIndex || 0
|
||||
},
|
||||
sys: this.sys,
|
||||
img: {
|
||||
minScale: this.minScale,
|
||||
maxScale: this.maxScale,
|
||||
src: this.imgSrc,
|
||||
width: this.oldWidth,
|
||||
height: this.oldHeight,
|
||||
oldWidth: this.oldWidth,
|
||||
oldHeight: this.oldHeight,
|
||||
gpu: this.gpu
|
||||
}
|
||||
};
|
||||
},
|
||||
imgProps() {
|
||||
return {
|
||||
width: this.width,
|
||||
height: this.height,
|
||||
src: this.src
|
||||
};
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
imgProps: {
|
||||
handler(val, oldVal) {
|
||||
this.imgWidth = Number(val.width) || IMG_SIZE;
|
||||
this.imgHeight = Number(val.height) || IMG_SIZE;
|
||||
let use2d = true;
|
||||
let canvansWidth = this.imgWidth;
|
||||
let canvansHeight = this.imgHeight;
|
||||
let size = Math.max(canvansWidth, canvansHeight);
|
||||
let scalc = 1;
|
||||
if (size > 1365) {
|
||||
scalc = 1365 / size;
|
||||
}
|
||||
this.canvansWidth = canvansWidth * scalc;
|
||||
this.canvansHeight = canvansHeight * scalc;
|
||||
this.use2d = use2d;
|
||||
this.initArea();
|
||||
const src = val.src || this.imgSrc;
|
||||
src && this.initImage(src, oldVal === void 0);
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/** 提供给wxs调用，用来接收图片变更数据 */
|
||||
dataChange(e) {
|
||||
this.scaleWidth = e.width;
|
||||
this.scaleHeight = e.height;
|
||||
this.rotate = e.rotate;
|
||||
this.offsetX = e.x;
|
||||
this.offsetY = e.y;
|
||||
},
|
||||
/** 初始化裁剪区域布局信息 */
|
||||
initArea() {
|
||||
this.sys.offsetBottom = common_vendor.index.upx2px(100) + this.sys.safeAreaInsets.bottom;
|
||||
this.sys.windowTop = 0;
|
||||
this.sys.navigation = true;
|
||||
let wp = this.widthPercent;
|
||||
let hp = this.heightPercent;
|
||||
if (this.imgWidth > this.imgHeight) {
|
||||
hp = hp * this.imgHeight / this.imgWidth;
|
||||
} else if (this.imgWidth < this.imgHeight) {
|
||||
wp = wp * this.imgWidth / this.imgHeight;
|
||||
}
|
||||
const size = this.sys.windowWidth > this.sys.windowHeight ? this.sys.windowHeight : this.sys.windowWidth;
|
||||
const width = size * wp / 100;
|
||||
const height = size * hp / 100;
|
||||
const left = (this.sys.windowWidth - width) / 2;
|
||||
const right = left + width;
|
||||
const top = (this.sys.windowHeight + this.sys.windowTop - this.sys.offsetBottom - height) / 2;
|
||||
const bottom = this.sys.windowHeight + this.sys.windowTop - this.sys.offsetBottom - top;
|
||||
this.area = { width, height, left, right, top, bottom };
|
||||
this.scaleWidth = width;
|
||||
this.scaleHeight = height;
|
||||
},
|
||||
/** 从本地选取图片 */
|
||||
chooseImage(options) {
|
||||
if (common_vendor.index.chooseMedia) {
|
||||
common_vendor.index.chooseMedia({
|
||||
...options,
|
||||
count: 1,
|
||||
mediaType: ["image"],
|
||||
success: (res) => {
|
||||
this.resetData();
|
||||
this.initImage(res.tempFiles[0].tempFilePath);
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
common_vendor.index.chooseImage({
|
||||
...options,
|
||||
count: 1,
|
||||
success: (res) => {
|
||||
this.resetData();
|
||||
this.initImage(res.tempFiles[0].path);
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 重置数据 */
|
||||
resetData() {
|
||||
this.imgSrc = "";
|
||||
this.rotate = 0;
|
||||
this.offsetX = 0;
|
||||
this.offsetY = 0;
|
||||
this.initArea();
|
||||
},
|
||||
/**
|
||||
* 初始化图片信息
|
||||
* @param {String} url 图片链接
|
||||
*/
|
||||
initImage(url, isFirst) {
|
||||
common_vendor.index.getImageInfo({
|
||||
src: url,
|
||||
success: async (res) => {
|
||||
if (isFirst && this.src === url)
|
||||
await new Promise((resolve) => setTimeout(resolve, 50));
|
||||
this.imgSrc = res.path;
|
||||
let scale = res.width / res.height;
|
||||
let areaScale = this.area.width / this.area.height;
|
||||
if (scale > 1) {
|
||||
if (scale >= areaScale) {
|
||||
this.scaleWidth = this.scaleHeight / res.height * this.scaleWidth * (res.width / this.scaleWidth);
|
||||
} else {
|
||||
this.scaleHeight = res.height * this.scaleWidth / res.width;
|
||||
}
|
||||
} else {
|
||||
if (scale <= areaScale) {
|
||||
this.scaleHeight = this.scaleWidth / res.width * this.scaleHeight / (this.scaleHeight / res.height);
|
||||
} else {
|
||||
this.scaleWidth = res.width * this.scaleHeight / res.height;
|
||||
}
|
||||
}
|
||||
this.oldWidth = +this.scaleWidth.toFixed(2);
|
||||
this.oldHeight = +this.scaleHeight.toFixed(2);
|
||||
},
|
||||
fail: (err) => {
|
||||
common_vendor.index.__f__("error", "at uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.vue:438", err);
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 剪切图片圆角
|
||||
* @param {Object} ctx canvas 的绘图上下文对象
|
||||
* @param {Number} radius 圆角半径
|
||||
* @param {Number} scale 生成图片的实际尺寸与截取区域比
|
||||
* @param {Function} drawImage 执行剪切时所调用的绘图方法，入参为是否执行了剪切
|
||||
*/
|
||||
drawClipImage(ctx, radius, scale, drawImage) {
|
||||
if (radius > 0) {
|
||||
ctx.save();
|
||||
ctx.beginPath();
|
||||
const w = this.canvansWidth;
|
||||
const h = this.canvansHeight;
|
||||
if (w === h && radius >= w / 2) {
|
||||
ctx.arc(w / 2, h / 2, w / 2, 0, 2 * Math.PI);
|
||||
} else {
|
||||
if (w !== h) {
|
||||
radius = Math.min(w / 2, h / 2, radius);
|
||||
}
|
||||
ctx.moveTo(radius, 0);
|
||||
ctx.arcTo(w, 0, w, h, radius);
|
||||
ctx.arcTo(w, h, 0, h, radius);
|
||||
ctx.arcTo(0, h, 0, 0, radius);
|
||||
ctx.arcTo(0, 0, w, 0, radius);
|
||||
ctx.closePath();
|
||||
}
|
||||
ctx.clip();
|
||||
drawImage && drawImage(true);
|
||||
ctx.restore();
|
||||
} else {
|
||||
drawImage && drawImage(false);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 旋转图片
|
||||
* @param {Object} ctx canvas 的绘图上下文对象
|
||||
* @param {Number} rotate 旋转角度
|
||||
* @param {Number} scale 生成图片的实际尺寸与截取区域比
|
||||
*/
|
||||
drawRotateImage(ctx, rotate, scale) {
|
||||
if (rotate !== 0) {
|
||||
const x = this.scaleWidth * scale / 2;
|
||||
const y = this.scaleHeight * scale / 2;
|
||||
ctx.translate(x, y);
|
||||
ctx.rotate(rotate * Math.PI / 180);
|
||||
ctx.translate(-x, -y);
|
||||
}
|
||||
},
|
||||
drawImage(ctx, image, callback) {
|
||||
const scale = this.canvansWidth / this.area.width;
|
||||
if (this.backgroundColor) {
|
||||
if (ctx.setFillStyle)
|
||||
ctx.setFillStyle(this.backgroundColor);
|
||||
else
|
||||
ctx.fillStyle = this.backgroundColor;
|
||||
ctx.fillRect(0, 0, this.canvansWidth, this.canvansHeight);
|
||||
}
|
||||
this.drawClipImage(ctx, this.radius, scale, () => {
|
||||
this.drawRotateImage(ctx, this.rotate, scale);
|
||||
const r = this.rotate / 90;
|
||||
ctx.drawImage(
|
||||
image,
|
||||
[
|
||||
this.offsetX - this.area.left,
|
||||
this.offsetY - this.area.top,
|
||||
-(this.offsetX - this.area.left),
|
||||
-(this.offsetY - this.area.top)
|
||||
][r] * scale,
|
||||
[
|
||||
this.offsetY - this.area.top,
|
||||
-(this.offsetX - this.area.left),
|
||||
-(this.offsetY - this.area.top),
|
||||
this.offsetX - this.area.left
|
||||
][r] * scale,
|
||||
this.scaleWidth * scale,
|
||||
this.scaleHeight * scale
|
||||
);
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 绘图
|
||||
* @param {Object} canvas
|
||||
* @param {Object} ctx canvas 的绘图上下文对象
|
||||
* @param {String} src 图片路径
|
||||
* @param {Function} callback 开始绘制时回调
|
||||
*/
|
||||
draw2DImage(canvas, ctx, src, callback) {
|
||||
if (canvas) {
|
||||
const image = canvas.createImage();
|
||||
image.onload = () => {
|
||||
this.drawImage(ctx, image);
|
||||
callback && setTimeout(callback, this.delay);
|
||||
};
|
||||
image.onerror = (err) => {
|
||||
common_vendor.index.__f__("error", "at uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.vue:541", err);
|
||||
common_vendor.index.hideLoading();
|
||||
};
|
||||
image.src = src;
|
||||
} else {
|
||||
this.drawImage(ctx, src);
|
||||
setTimeout(() => {
|
||||
ctx.draw(false, callback);
|
||||
}, 200);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 画布转图片到本地缓存
|
||||
* @param {Object} canvas
|
||||
* @param {String} canvasId
|
||||
*/
|
||||
canvasToTempFilePath(canvas, canvasId) {
|
||||
common_vendor.index.canvasToTempFilePath({
|
||||
canvas,
|
||||
canvasId,
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: this.canvansWidth,
|
||||
height: this.canvansHeight,
|
||||
destWidth: this.imgWidth,
|
||||
// 必要，保证生成图片宽度不受设备分辨率影响
|
||||
destHeight: this.imgHeight,
|
||||
// 必要，保证生成图片高度不受设备分辨率影响
|
||||
fileType: this.fileType,
|
||||
// 目标文件的类型，默认png
|
||||
success: (res) => {
|
||||
this.handleImage(res.tempFilePath);
|
||||
},
|
||||
fail: (err) => {
|
||||
common_vendor.index.hideLoading();
|
||||
common_vendor.index.showToast({ title: "裁剪失败，生成图片异常！", icon: "none" });
|
||||
}
|
||||
}, this);
|
||||
},
|
||||
cropCancel() {
|
||||
this.$emit("cancel");
|
||||
},
|
||||
/** 确认裁剪 */
|
||||
cropClick() {
|
||||
common_vendor.index.showLoading({ title: "裁剪中...", mask: true });
|
||||
if (!this.use2d) {
|
||||
const ctx = common_vendor.index.createCanvasContext("imgCanvas", this);
|
||||
ctx.clearRect(0, 0, this.canvansWidth, this.canvansHeight);
|
||||
this.draw2DImage(null, ctx, this.imgSrc, () => {
|
||||
this.canvasToTempFilePath(null, "imgCanvas");
|
||||
});
|
||||
return;
|
||||
}
|
||||
const query = common_vendor.index.createSelectorQuery().in(this);
|
||||
query.select("#imgCanvas").fields({ node: true, size: true }).exec((res) => {
|
||||
const canvas = res[0].node;
|
||||
const dpr = common_vendor.index.getSystemInfoSync().pixelRatio;
|
||||
canvas.width = res[0].width * dpr;
|
||||
canvas.height = res[0].height * dpr;
|
||||
const ctx = canvas.getContext("2d");
|
||||
ctx.scale(dpr, dpr);
|
||||
ctx.clearRect(0, 0, this.canvansWidth, this.canvansHeight);
|
||||
this.draw2DImage(canvas, ctx, this.imgSrc, () => {
|
||||
this.canvasToTempFilePath(canvas);
|
||||
});
|
||||
});
|
||||
},
|
||||
handleImage(tempFilePath) {
|
||||
common_vendor.index.hideLoading();
|
||||
this.$emit("crop", { tempFilePath });
|
||||
}
|
||||
}
|
||||
};
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return common_vendor.e({
|
||||
a: $data.use2d
|
||||
}, $data.use2d ? {
|
||||
b: `${$data.canvansWidth}px`,
|
||||
c: `${$data.canvansHeight}px`
|
||||
} : {
|
||||
d: `${$data.canvansWidth}px`,
|
||||
e: `${$data.canvansHeight}px`
|
||||
}, {
|
||||
f: $data.imgSrc
|
||||
}, $data.imgSrc ? {
|
||||
g: $data.imgSrc
|
||||
} : {}, {
|
||||
h: common_vendor.f($data.maskList, (item, index, i0) => {
|
||||
return {
|
||||
a: item.id,
|
||||
b: item.id
|
||||
};
|
||||
}),
|
||||
i: $props.showBorder
|
||||
}, $props.showBorder ? {} : {}, {
|
||||
j: $props.radius > 0
|
||||
}, $props.radius > 0 ? {} : {}, {
|
||||
k: $props.showGrid
|
||||
}, $props.showGrid ? {
|
||||
l: common_vendor.f($data.gridList, (item, index, i0) => {
|
||||
return {
|
||||
a: item.id,
|
||||
b: item.id
|
||||
};
|
||||
})
|
||||
} : {}, {
|
||||
m: $props.showAngle
|
||||
}, $props.showAngle ? {
|
||||
n: common_vendor.f($data.angleList, (item, index, i0) => {
|
||||
return {
|
||||
a: item.id,
|
||||
b: item.id
|
||||
};
|
||||
}),
|
||||
o: common_vendor.s({
|
||||
width: `${$props.angleSize}px`,
|
||||
height: `${$props.angleSize}px`
|
||||
})
|
||||
} : {}, {
|
||||
p: $options.initData,
|
||||
q: ($props.rotatable || $props.reverseRotatable) && !!$data.imgSrc
|
||||
}, ($props.rotatable || $props.reverseRotatable) && !!$data.imgSrc ? common_vendor.e({
|
||||
r: $props.reverseRotatable
|
||||
}, $props.reverseRotatable ? {} : {}, {
|
||||
s: $props.rotatable
|
||||
}, $props.rotatable ? {} : {}) : {}, {
|
||||
t: !$props.choosable
|
||||
}, !$props.choosable ? {
|
||||
v: common_vendor.o((...args) => $options.cropClick && $options.cropClick(...args))
|
||||
} : !!$data.imgSrc ? {
|
||||
x: common_vendor.o((...args) => $options.chooseImage && $options.chooseImage(...args)),
|
||||
y: common_vendor.o((...args) => $options.cropCancel && $options.cropCancel(...args)),
|
||||
z: common_vendor.o((...args) => $options.cropClick && $options.cropClick(...args))
|
||||
} : {
|
||||
A: common_vendor.o((...args) => $options.chooseImage && $options.chooseImage(...args))
|
||||
}, {
|
||||
w: !!$data.imgSrc,
|
||||
B: $options.initData.area.zIndex + 99,
|
||||
C: $props.zIndex
|
||||
});
|
||||
}
|
||||
if (typeof block0 === "function")
|
||||
block0(_sfc_main);
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-7129956f"]]);
|
||||
wx.createComponent(Component);
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.js.map
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
+730
@@ -0,0 +1,730 @@
|
||||
<wxs module="cropper">
|
||||
/**
|
||||
* 图片编辑器-手势监听
|
||||
* 1. wxs 暂不支持 es6 语法
|
||||
* 2. 支持编译到微信小程序、QQ小程序、app-vue、H5上（uni-app 2.2.5及以上版本）
|
||||
*/
|
||||
/** 图片偏移量 */
|
||||
var offset = { x: 0, y: 0 };
|
||||
/** 图片缩放比例 */
|
||||
var scale = 1;
|
||||
/** 图片最小缩放比例 */
|
||||
var minScale = 1;
|
||||
/** 图片旋转角度 */
|
||||
var rotate = 0;
|
||||
/** 触摸点 */
|
||||
var touches = [];
|
||||
/** 图片布局信息 */
|
||||
var img = {};
|
||||
/** 系统信息 */
|
||||
var sys = {};
|
||||
/** 裁剪区域布局信息 */
|
||||
var area = {};
|
||||
/** 触摸行为类型 */
|
||||
var touchType = '';
|
||||
/** 操作角的位置 */
|
||||
var activeAngle = 0;
|
||||
/** 裁剪区域布局信息偏移量 */
|
||||
var areaOffset = { left: 0, right: 0, top: 0, bottom: 0 };
|
||||
/** 容错值 */
|
||||
var fault = 0.000001;
|
||||
/**
|
||||
* 获取a、b两数中的最小正数
|
||||
* @param a
|
||||
* @param b
|
||||
*/
|
||||
function minimum(a, b) {
|
||||
if (a > 0 && b < 0) return a;
|
||||
if (a < 0 && b > 0) return b;
|
||||
if (a > 0 && b > 0) return Math.min(a, b);
|
||||
return 0;
|
||||
}
|
||||
/**
|
||||
* 在容错访问内获取n近似值
|
||||
* @param n
|
||||
*/
|
||||
function num(n) {
|
||||
var m = parseFloat((n).toFixed(6));
|
||||
return m === fault || m === -fault ? 0 : m;
|
||||
}
|
||||
/**
|
||||
* 比较a值在容错值范围内是否等于b值
|
||||
* @param a
|
||||
* @param b
|
||||
*/
|
||||
function equalsByFault(a, b) {
|
||||
return Math.abs(a - b) <= fault;
|
||||
}
|
||||
/**
|
||||
* 比较a值在容错值范围内是否小于b值
|
||||
* @param a
|
||||
* @param b
|
||||
*/
|
||||
function lessThanByFault(a, b) {
|
||||
var c = a - b;
|
||||
return c < 0 ? c < -fault : c < fault;
|
||||
}
|
||||
/**
|
||||
* 验证并获取有效最大值
|
||||
* @param v
|
||||
* @param max
|
||||
* @param isInclude
|
||||
* @param x
|
||||
* @param y
|
||||
* @param rate
|
||||
* @returns
|
||||
*/
|
||||
function validMax(v, max, isInclude, x, y, rate) {
|
||||
if(typeof max === 'number') {
|
||||
if(isInclude && equalsByFault(max, y)) { // 宽高不等时，x轴用y轴值要做等比例转换
|
||||
var n = num(max * rate);
|
||||
if (n <= x) return n; // 转化后值在x轴最大值范围内
|
||||
return x; // 转化后值超出x轴最大值范围则用最大值
|
||||
}
|
||||
return max;
|
||||
}
|
||||
return v;
|
||||
}
|
||||
/**
|
||||
* 计算两点间距
|
||||
* @param {Object} touches 触摸点信息
|
||||
*/
|
||||
function getDistanceByTouches(touches) {
|
||||
// 根据勾股定理求两点间距离
|
||||
var a = touches[1].pageX - touches[0].pageX;
|
||||
var b = touches[1].pageY - touches[0].pageY;
|
||||
var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
|
||||
// 求两点间的中点坐标
|
||||
// 1. a、b可能为负值
|
||||
// 2. 在求a、b时，如用touches[1]减touches[0]，则求中点坐标也得用touches[1]减a/2、b/2
|
||||
// 3. 同理，在求a、b时，也可用touches[0]减touches[1]，则求中点坐标也得用touches[0]减a/2、b/2
|
||||
var x = touches[1].pageX - a / 2;
|
||||
var y = touches[1].pageY - b / 2;
|
||||
return { c, x, y };
|
||||
};
|
||||
/**
|
||||
* 修正取值
|
||||
* @param {Object} a
|
||||
* @param {Object} b
|
||||
* @param {Object} c
|
||||
* @param {Object} reverse 是否反向
|
||||
*/
|
||||
function correctValue(a, b, c, reverse) {
|
||||
return num(reverse ? Math.max(Math.min(a, b), c) : Math.min(Math.max(a, b), c));
|
||||
}
|
||||
|
||||
/**
|
||||
* 旋转90°或270°时检查边界：限制 x、y 拖动范围，禁止滑出边界
|
||||
* @param {Object} e 点坐标
|
||||
* @param {Object} xReverse x是否反向
|
||||
* @param {Object} yReverse y是否反向
|
||||
*/
|
||||
function checkRotateRange(e, xReverse, yReverse) {
|
||||
var o = num((img.height - img.width) / 2); // 宽高差值一半
|
||||
return {
|
||||
x: correctValue(e.x, -img.height + o + area.width + area.left, area.left + o, xReverse),
|
||||
y: correctValue(e.y, -img.width - o + area.height + area.top, area.top - o, yReverse)
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 检查边界：限制 x、y 拖动范围，禁止滑出边界
|
||||
* @param {Object} e 点坐标
|
||||
*/
|
||||
function checkRange(e) {
|
||||
var r = rotate / 90 % 2;
|
||||
if(r === 1) { // 因图片宽高可能不等，翻转 90° 或 270° 后图片宽高需反着计算，且左右和上下边界要根据差值做偏移
|
||||
if (area.width === area.height) {
|
||||
return checkRotateRange(e, img.height < area.height, img.width < area.width);
|
||||
}
|
||||
var isInclude = img.height < area.width && img.width < area.height; // 图片是否包含在裁剪区域内
|
||||
if (img.width < area.height || img.height < area.width) {
|
||||
if (area.width < area.height && img.width < img.height) {
|
||||
return isInclude
|
||||
? checkRotateRange(e, area.width < area.height, area.width < area.height)
|
||||
: checkRotateRange(e, false, true);
|
||||
}
|
||||
if (area.height < area.width && img.height < img.width) {
|
||||
return isInclude
|
||||
? checkRotateRange(e, area.height < area.width, area.height < area.width)
|
||||
: checkRotateRange(e, true, false);
|
||||
}
|
||||
}
|
||||
if (img.height >= area.width && img.width >= area.height) {
|
||||
return checkRotateRange(e, false, false);
|
||||
}
|
||||
if (isInclude) {
|
||||
return area.height < area.width
|
||||
? checkRotateRange(e, true, true)
|
||||
: checkRotateRange(e, area.width < area.height, area.width < area.height);
|
||||
}
|
||||
if (img.height < area.width && !img.width < area.height) {
|
||||
return checkRotateRange(e, true, false);
|
||||
}
|
||||
if (!img.height < area.width && img.width < area.height) {
|
||||
return checkRotateRange(e, false, true);
|
||||
}
|
||||
return checkRotateRange(e, img.height < area.height, img.width < area.width);
|
||||
}
|
||||
return {
|
||||
x: correctValue(e.x, -img.width + area.width + area.left, area.left, img.width < area.width),
|
||||
y: correctValue(e.y, -img.height + area.height + area.top, area.top, img.height < area.height)
|
||||
};
|
||||
};
|
||||
/**
|
||||
* 变更图片布局信息
|
||||
* @param {Object} e 布局信息
|
||||
*/
|
||||
function changeImageRect(e) {
|
||||
offset.x += e.x || 0;
|
||||
offset.y += e.y || 0;
|
||||
var image = e.instance.selectComponent('.crop-image');
|
||||
if(e.check && area.checkRange) { // 检查边界
|
||||
var point = checkRange(offset);
|
||||
if(offset.x !== point.x || offset.y !== point.y) {
|
||||
offset = point;
|
||||
}
|
||||
}
|
||||
// image.setStyle({
|
||||
// width: img.width + 'px',
|
||||
// height: img.height + 'px',
|
||||
// transform: 'translate(' + offset.x + 'px, ' + offset.y + 'px) rotate(' + rotate +'deg)'
|
||||
// });
|
||||
var ox = (img.width - img.oldWidth) / 2;
|
||||
var oy = (img.height - img.oldHeight) / 2;
|
||||
image.setStyle({
|
||||
width: img.oldWidth + 'px',
|
||||
height: img.oldHeight + 'px',
|
||||
transform: (img.gpu ? 'translateZ(0) ' : '') + 'translate(' + (offset.x + ox) + 'px, ' + (offset.y + oy) + 'px) rotate(' + rotate +'deg) scale(' + scale + ')'
|
||||
});
|
||||
|
||||
e.instance.callMethod('dataChange', {
|
||||
width: img.width,
|
||||
height: img.height,
|
||||
x: offset.x,
|
||||
y: offset.y,
|
||||
rotate: rotate
|
||||
});
|
||||
};
|
||||
/**
|
||||
* 变更裁剪区域布局信息
|
||||
* @param {Object} e 布局信息
|
||||
*/
|
||||
function changeAreaRect(e) {
|
||||
// 变更蒙版样式
|
||||
var masks = e.instance.selectAllComponents('.crop-mask-block');
|
||||
var maskStyles = [
|
||||
{
|
||||
left: 0,
|
||||
width: (area.left + areaOffset.left) + 'px',
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
'z-index': area.zIndex + 2
|
||||
},
|
||||
{
|
||||
left: (area.right + areaOffset.right) + 'px',
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
'z-index': area.zIndex + 2
|
||||
},
|
||||
{
|
||||
left: (area.left + areaOffset.left) + 'px',
|
||||
width: (area.width + areaOffset.right - areaOffset.left) + 'px',
|
||||
top: 0,
|
||||
height: (area.top + areaOffset.top) + 'px',
|
||||
'z-index': area.zIndex + 2
|
||||
},
|
||||
{
|
||||
left: (area.left + areaOffset.left) + 'px',
|
||||
width: (area.width + areaOffset.right - areaOffset.left) + 'px',
|
||||
top: (area.bottom + areaOffset.bottom) + 'px',
|
||||
// height: (area.top - areaOffset.bottom + sys.offsetBottom) + 'px',
|
||||
bottom: 0,
|
||||
'z-index': area.zIndex + 2
|
||||
}
|
||||
];
|
||||
var len = masks.length;
|
||||
for (var i = 0; i < len; i++) {
|
||||
masks[i].setStyle(maskStyles[i]);
|
||||
}
|
||||
|
||||
// 变更边框样式
|
||||
if(area.showBorder) {
|
||||
var border = e.instance.selectComponent('.crop-border');
|
||||
border.setStyle({
|
||||
left: (area.left + areaOffset.left) + 'px',
|
||||
top: (area.top + areaOffset.top) + 'px',
|
||||
width: (area.width + areaOffset.right - areaOffset.left) + 'px',
|
||||
height: (area.height + areaOffset.bottom - areaOffset.top) + 'px',
|
||||
'z-index': area.zIndex + 3
|
||||
});
|
||||
}
|
||||
|
||||
// 变更参考线样式
|
||||
if(area.showGrid) {
|
||||
var grids = e.instance.selectAllComponents('.crop-grid');
|
||||
var gridStyles = [
|
||||
{
|
||||
'border-width': '1px 0 0 0',
|
||||
left: (area.left + areaOffset.left) + 'px',
|
||||
right: (area.right + areaOffset.right) + 'px',
|
||||
top: (area.top + areaOffset.top + (area.height + areaOffset.bottom - areaOffset.top) / 3 - 0.5) + 'px',
|
||||
width: (area.width + areaOffset.right - areaOffset.left) + 'px',
|
||||
'z-index': area.zIndex + 3
|
||||
},
|
||||
{
|
||||
'border-width': '1px 0 0 0',
|
||||
left: (area.left + areaOffset.left) + 'px',
|
||||
right: (area.right + areaOffset.right) + 'px',
|
||||
top: (area.top + areaOffset.top + (area.height + areaOffset.bottom - areaOffset.top) * 2 / 3 - 0.5) + 'px',
|
||||
width: (area.width + areaOffset.right - areaOffset.left) + 'px',
|
||||
'z-index': area.zIndex + 3
|
||||
},
|
||||
{
|
||||
'border-width': '0 1px 0 0',
|
||||
top: (area.top + areaOffset.top) + 'px',
|
||||
bottom: (area.bottom + areaOffset.bottom) + 'px',
|
||||
left: (area.left + areaOffset.left + (area.width + areaOffset.right - areaOffset.left) / 3 - 0.5) + 'px',
|
||||
height: (area.height + areaOffset.bottom - areaOffset.top) + 'px',
|
||||
'z-index': area.zIndex + 3
|
||||
},
|
||||
{
|
||||
'border-width': '0 1px 0 0',
|
||||
top: (area.top + areaOffset.top) + 'px',
|
||||
bottom: (area.bottom + areaOffset.bottom) + 'px',
|
||||
left: (area.left + areaOffset.left + (area.width + areaOffset.right - areaOffset.left) * 2 / 3 - 0.5) + 'px',
|
||||
height: (area.height + areaOffset.bottom - areaOffset.top) + 'px',
|
||||
'z-index': area.zIndex + 3
|
||||
}
|
||||
];
|
||||
var len = grids.length;
|
||||
for (var i = 0; i < len; i++) {
|
||||
grids[i].setStyle(gridStyles[i]);
|
||||
}
|
||||
}
|
||||
|
||||
// 变更四个伸缩角样式
|
||||
if(area.showAngle) {
|
||||
var angles = e.instance.selectAllComponents('.crop-angle');
|
||||
var angleStyles = [
|
||||
{
|
||||
'border-width': area.angleBorderWidth + 'px 0 0 ' + area.angleBorderWidth + 'px',
|
||||
left: (area.left + areaOffset.left - area.angleBorderWidth) + 'px',
|
||||
top: (area.top + areaOffset.top - area.angleBorderWidth) + 'px',
|
||||
'z-index': area.zIndex + 3
|
||||
},
|
||||
{
|
||||
'border-width': area.angleBorderWidth + 'px ' + area.angleBorderWidth + 'px 0 0',
|
||||
left: (area.right + areaOffset.right - area.angleSize) + 'px',
|
||||
top: (area.top + areaOffset.top - area.angleBorderWidth) + 'px',
|
||||
'z-index': area.zIndex + 3
|
||||
},
|
||||
{
|
||||
'border-width': '0 0 ' + area.angleBorderWidth + 'px ' + area.angleBorderWidth + 'px',
|
||||
left: (area.left + areaOffset.left - area.angleBorderWidth) + 'px',
|
||||
top: (area.bottom + areaOffset.bottom - area.angleSize) + 'px',
|
||||
'z-index': area.zIndex + 3
|
||||
},
|
||||
{
|
||||
'border-width': '0 ' + area.angleBorderWidth + 'px ' + area.angleBorderWidth + 'px 0',
|
||||
left: (area.right + areaOffset.right - area.angleSize) + 'px',
|
||||
top: (area.bottom + areaOffset.bottom - area.angleSize) + 'px',
|
||||
'z-index': area.zIndex + 3
|
||||
}
|
||||
];
|
||||
var len = angles.length;
|
||||
for (var i = 0; i < len; i++) {
|
||||
angles[i].setStyle(angleStyles[i]);
|
||||
}
|
||||
}
|
||||
|
||||
// 变更圆角样式
|
||||
if(area.radius > 0) {
|
||||
var circleBox = e.instance.selectComponent('.crop-circle-box');
|
||||
var circle = e.instance.selectComponent('.crop-circle');
|
||||
var radius = area.radius;
|
||||
if(area.width === area.height && area.radius >= area.width / 2) { // 圆形
|
||||
radius = (area.width / 2);
|
||||
} else { // 圆角矩形
|
||||
if(area.width !== area.height) { // 限制圆角半径不能超过短边的一半
|
||||
radius = Math.min(area.width / 2, area.height / 2, radius);
|
||||
}
|
||||
}
|
||||
circleBox.setStyle({
|
||||
left: (area.left + areaOffset.left) + 'px',
|
||||
top: (area.top + areaOffset.top) + 'px',
|
||||
width: (area.width + areaOffset.right - areaOffset.left) + 'px',
|
||||
height: (area.height + areaOffset.bottom - areaOffset.top) + 'px',
|
||||
'z-index': area.zIndex + 2
|
||||
});
|
||||
circle.setStyle({
|
||||
'box-shadow': '0 0 0 ' + Math.max(area.width, area.height) + 'px rgba(51, 51, 51, 0.8)',
|
||||
'border-radius': radius + 'px'
|
||||
});
|
||||
}
|
||||
};
|
||||
/**
|
||||
* 缩放图片
|
||||
* @param {Object} e 布局信息
|
||||
*/
|
||||
function scaleImage(e) {
|
||||
var last = scale;
|
||||
scale = Math.min(Math.max(e.scale + scale, minScale), img.maxScale);
|
||||
if(last !== scale) {
|
||||
img.width = num(img.oldWidth * scale);
|
||||
img.height = num(img.oldHeight * scale);
|
||||
// 参考问题：有一个长4000px、宽4000px的四方形ABCD，A点的坐标固定在(-2000,-2000)，
|
||||
// 该四边形上有一个点E，坐标为(-100,-300)，将该四方形复制一份并缩小到90%后，
|
||||
// 新四边形的A点坐标为多少时可使新四边形的E点与原四边形的E点重合？
|
||||
// 预期效果：从图中选取某点（参照物）为中心点进行缩放，缩放时无论图像怎么变化，该点位置始终固定不变
|
||||
// 计算方法：以相同起点先计算缩放前后两点间的距离，再加上原图像偏移量即可
|
||||
e.x = num((e.x - offset.x) * (1 - scale / last));
|
||||
e.y = num((e.y - offset.y) * (1 - scale / last));
|
||||
changeImageRect(e);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
/**
|
||||
* 获取触摸点在哪个角
|
||||
* @param {number} x 触摸点x轴坐标
|
||||
* @param {number} y 触摸点y轴坐标
|
||||
* @return {number} 角的位置：0=无；1=左上；2=右上；3=左下；4=右下；
|
||||
*/
|
||||
function getToucheAngle(x, y) {
|
||||
// console.log('getToucheAngle', x, y, JSON.stringify(area))
|
||||
var o = area.angleBorderWidth; // 需扩大触发范围则把 o 值加大即可
|
||||
if(y >= area.top - o && y <= area.top + area.angleSize + o) {
|
||||
if(x >= area.left - o && x <= area.left + area.angleSize + o) {
|
||||
return 1; // 左上角
|
||||
} else if(x >= area.right - area.angleSize - o && x <= area.right + o) {
|
||||
return 2; // 右上角
|
||||
}
|
||||
} else if(y >= area.bottom - area.angleSize - o && y <= area.bottom + o) {
|
||||
if(x >= area.left - o && x <= area.left + area.angleSize + o) {
|
||||
return 3; // 左下角
|
||||
} else if(x >= area.right - area.angleSize - o && x <= area.right + o) {
|
||||
return 4; // 右下角
|
||||
}
|
||||
}
|
||||
return 0; // 无触摸到角
|
||||
};
|
||||
/**
|
||||
* 重置数据
|
||||
*/
|
||||
function resetData() {
|
||||
offset = { x: 0, y: 0 };
|
||||
scale = 1;
|
||||
minScale = img.minScale;
|
||||
rotate = 0;
|
||||
};
|
||||
/**
|
||||
* 顺时针翻转图片90°
|
||||
* @param {Object} e 事件对象
|
||||
* @param {Object} o 组件实例对象
|
||||
*/
|
||||
function rotateImage(e, o, r) {
|
||||
rotate = (rotate + r) % 360;
|
||||
if(img.minScale >= 1 && area.checkRange) {
|
||||
// 因图片宽高可能不等，翻转后图片宽高需足够填满裁剪区域
|
||||
minScale = 1;
|
||||
if(img.width < area.height) {
|
||||
minScale = area.height / img.oldWidth;
|
||||
} else if(img.height < area.width) {
|
||||
minScale = area.width / img.oldHeight;
|
||||
}
|
||||
if(minScale !== 1) {
|
||||
scaleImage({
|
||||
instance: o,
|
||||
scale: minScale - scale,
|
||||
x: sys.windowWidth / 2,
|
||||
y: (sys.windowHeight - sys.offsetBottom) / 2
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 由于拖动画布后会导致图片位置偏移，翻转时的旋转中心点需是图片区域+偏移区域的中心点
|
||||
// 翻转x轴中心点 = (超出裁剪区域右侧的图片宽度 - 超出裁剪区域左侧的图片宽度) / 2
|
||||
// 翻转y轴中心点 = (超出裁剪区域下方的图片宽度 - 超出裁剪区域上方的图片宽度) / 2
|
||||
var ox = ((offset.x + img.width - area.right) - (area.left - offset.x)) / 2;
|
||||
var oy = ((offset.y + img.height - area.bottom) - (area.top - offset.y)) / 2;
|
||||
changeImageRect({
|
||||
instance: o,
|
||||
check: true,
|
||||
x: -ox - oy,
|
||||
y: -oy + ox
|
||||
});
|
||||
};
|
||||
module.exports = {
|
||||
/**
|
||||
* 初始化：观察数据变更
|
||||
* @param {Object} newVal 新数据
|
||||
* @param {Object} oldVal 旧数据
|
||||
* @param {Object} o 组件实例对象
|
||||
*/
|
||||
initObserver: function(newVal, oldVal, o, i) {
|
||||
if(newVal) {
|
||||
img = newVal.img;
|
||||
sys = newVal.sys;
|
||||
area = newVal.area;
|
||||
minScale = img.minScale;
|
||||
resetData();
|
||||
img.src && changeImageRect({
|
||||
instance: o,
|
||||
x: (sys.windowWidth - img.width) / 2,
|
||||
y: (sys.windowHeight - sys.offsetBottom - img.height) / 2
|
||||
});
|
||||
changeAreaRect({
|
||||
instance: o
|
||||
});
|
||||
// console.log('initRect', JSON.stringify(newVal))
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 鼠标滚轮滚动
|
||||
* @param {Object} e 事件对象
|
||||
* @param {Object} o 组件实例对象
|
||||
*/
|
||||
mousewheel: function(e, o) {
|
||||
if(!img.src) return;
|
||||
scaleImage({
|
||||
instance: o,
|
||||
check: true,
|
||||
// 鼠标向上滚动时，deltaY 固定 -100，鼠标向下滚动时，deltaY 固定 100
|
||||
scale: e.detail.deltaY > 0 ? -0.05 : 0.05,
|
||||
x: e.touches[0].pageX,
|
||||
y: e.touches[0].pageY
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 触摸开始
|
||||
* @param {Object} e 事件对象
|
||||
* @param {Object} o 组件实例对象
|
||||
*/
|
||||
touchstart: function(e, o) {
|
||||
if(!img.src) return;
|
||||
touches = e.touches;
|
||||
activeAngle = area.showAngle ? getToucheAngle(touches[0].pageX, touches[0].pageY) : 0;
|
||||
if(touches.length === 1 && activeAngle !== 0) {
|
||||
touchType = 'stretch'; // 伸缩裁剪区域
|
||||
} else {
|
||||
touchType = '';
|
||||
}
|
||||
// console.log('touchstart', JSON.stringify(e), activeAngle)
|
||||
},
|
||||
/**
|
||||
* 触摸移动
|
||||
* @param {Object} e 事件对象
|
||||
* @param {Object} o 组件实例对象
|
||||
*/
|
||||
touchmove: function(e, o) {
|
||||
if(!img.src) return;
|
||||
// console.log('touchmove', JSON.stringify(e), JSON.stringify(o))
|
||||
if(touchType === 'stretch') { // 触摸四个角进行拉伸
|
||||
var point = e.touches[0];
|
||||
var start = touches[0];
|
||||
var x = point.pageX - start.pageX;
|
||||
var y = point.pageY - start.pageY;
|
||||
if(x !== 0 || y !== 0) {
|
||||
var maxX = num(area.width * (1 - area.minScale));
|
||||
var maxY = num(area.height * (1 - area.minScale));
|
||||
// console.log(x, y, maxX, maxY, offset, area)
|
||||
touches[0] = point;
|
||||
var r = rotate / 90 % 2;
|
||||
var m = r === 1 ? num((img.height - img.width) / 2) : 0; // 宽高差值一半
|
||||
var xCompare = r === 1 ? lessThanByFault(img.height, area.width) : lessThanByFault(img.width, area.width);
|
||||
var yCompare = r === 1 ? lessThanByFault(img.width, area.height) : lessThanByFault(img.height, area.height)
|
||||
var isInclude = xCompare && yCompare;
|
||||
var isIntersect = area.checkRange && (xCompare || yCompare); // 图片是否包含在裁剪区域内
|
||||
var isReverse = !isInclude || num((offset.x - area.left) / area.width) <= num((offset.y - area.top) / area.height) || (area.width > area.height && img.width < img.height && r === 1);
|
||||
switch(activeAngle) {
|
||||
case 1: // 左上角
|
||||
x = num(x + areaOffset.left);
|
||||
y = num(y + areaOffset.top);
|
||||
if(x >= 0 && y >= 0) { // 有效滑动
|
||||
var t = num(offset.y + m - area.top);
|
||||
var l = num(offset.x - m - area.left);
|
||||
// && (offset.x + img.width < area.right || offset.y + img.height < area.bottom)
|
||||
var max = isIntersect && ((l >= 0) || (t >= 0))
|
||||
? minimum(t, l)
|
||||
: false;
|
||||
if(x > y && isReverse) { // 以x轴滑动距离为缩放基准
|
||||
maxX = validMax(maxX, max, isInclude, l, t, area.width / area.height);
|
||||
if(x > maxX) x = maxX;
|
||||
y = num(x * area.height / area.width);
|
||||
} else { // 以y轴滑动距离为缩放基准
|
||||
maxY = validMax(maxY, max, isInclude, t, l, area.height / area.width);
|
||||
if(y > maxY) y = maxY;
|
||||
x = num(y * area.width / area.height);
|
||||
}
|
||||
areaOffset.left = x;
|
||||
areaOffset.top = y;
|
||||
}
|
||||
break;
|
||||
case 2: // 右上角
|
||||
x = num(x + areaOffset.right);
|
||||
y = num(y + areaOffset.top);
|
||||
if(x <= 0 && y >= 0) { // 有效滑动
|
||||
var w = (r === 1 ? img.height : img.width);
|
||||
var t = num(offset.y + m - area.top);
|
||||
var l = num(area.right + m - offset.x - w);
|
||||
var max = isIntersect && ((t >= 0) || (l >= 0))
|
||||
? minimum(t, l)
|
||||
: false;
|
||||
// var max = isInclude && ((offset.x > 0 && offset.x + img.width <= area.right) || (offset.y > 0 && offset.y >= area.top))
|
||||
// ? minimum(offset.y - area.top, area.right - offset.x - img.width)
|
||||
// : false;
|
||||
// console.log(offset.x, offset.y, img.width, img.height, area.top, area.right, m, max)
|
||||
// console.log(offset.y + m - area.top, area.right + m - offset.x - w)
|
||||
if(-x > y && isReverse) { // 以x轴滑动距离为缩放基准
|
||||
maxX = validMax(maxX, max, isInclude, l, t, area.width / area.height);
|
||||
if(-x > maxX) x = -maxX;
|
||||
y = num(-x * area.height / area.width);
|
||||
} else { // 以y轴滑动距离为缩放基准
|
||||
maxY = validMax(maxY, max, isInclude, t, l, area.height / area.width);
|
||||
if(y > maxY) y = maxY;
|
||||
x = num(-y * area.width / area.height);
|
||||
}
|
||||
areaOffset.right = x;
|
||||
areaOffset.top = y;
|
||||
}
|
||||
break;
|
||||
case 3: // 左下角
|
||||
x += num(x + areaOffset.left);
|
||||
y += num(y + areaOffset.bottom);
|
||||
if(x >= 0 && y <= 0) { // 有效滑动
|
||||
var w = (r === 1 ? img.width : img.height);
|
||||
var t = num(area.bottom - m - offset.y - w);
|
||||
var l = num(offset.x - m - area.left);
|
||||
var max = isIntersect && ((l >= 0) || (t >= 0))
|
||||
? minimum(t, l)
|
||||
: false;
|
||||
if(x > -y && isReverse) { // 以x轴滑动距离为缩放基准
|
||||
maxX = validMax(maxX, max, isInclude, l, t, area.width / area.height);
|
||||
if(x > maxX) x = maxX;
|
||||
y = num(-x * area.height / area.width);
|
||||
} else { // 以y轴滑动距离为缩放基准
|
||||
maxY = validMax(maxY, max, isInclude, t, l, area.height / area.width);
|
||||
if(-y > maxY) y = -maxY;
|
||||
x = num(-y * area.width / area.height);
|
||||
}
|
||||
areaOffset.left = x;
|
||||
areaOffset.bottom = y;
|
||||
}
|
||||
break;
|
||||
case 4: // 右下角
|
||||
x = num(x + areaOffset.right);
|
||||
y = num(y + areaOffset.bottom);
|
||||
if(x <= 0 && y <= 0) { // 有效滑动
|
||||
var w = (r === 1 ? img.height : img.width);
|
||||
var h = (r === 1 ? img.width : img.height);
|
||||
var t = num(area.bottom - offset.y - h - m);
|
||||
var l = num(area.right + m - offset.x - w);
|
||||
var max = isIntersect && ((l >= 0) || (t >= 0))
|
||||
? minimum(t, l)
|
||||
: false;
|
||||
if(-x > -y && isReverse) { // 以x轴滑动距离为缩放基准
|
||||
maxX = validMax(maxX, max, isInclude, l, t, area.width / area.height);
|
||||
if(-x > maxX) x = -maxX;
|
||||
y = num(x * area.height / area.width);
|
||||
} else { // 以y轴滑动距离为缩放基准
|
||||
maxY = validMax(maxY, max, isInclude, t, l, area.height / area.width);
|
||||
if(-y > maxY) y = -maxY;
|
||||
x = num(y * area.width / area.height);
|
||||
}
|
||||
areaOffset.right = x;
|
||||
areaOffset.bottom = y;
|
||||
}
|
||||
break;
|
||||
}
|
||||
// console.log(x, y, JSON.stringify(areaOffset))
|
||||
changeAreaRect({
|
||||
instance: o,
|
||||
});
|
||||
// this.draw();
|
||||
}
|
||||
} else if (e.touches.length == 2) { // 双点触摸缩放
|
||||
var start = getDistanceByTouches(touches);
|
||||
var end = getDistanceByTouches(e.touches);
|
||||
scaleImage({
|
||||
instance: o,
|
||||
check: !area.bounce,
|
||||
scale: (end.c - start.c) / 100,
|
||||
x: end.x,
|
||||
y: end.y
|
||||
});
|
||||
touchType = 'scale';
|
||||
} else if(touchType === 'scale') {// 从双点触摸变成单点触摸 / 从缩放变成拖动
|
||||
touchType = 'move';
|
||||
} else {
|
||||
changeImageRect({
|
||||
instance: o,
|
||||
check: !area.bounce,
|
||||
x: e.touches[0].pageX - touches[0].pageX,
|
||||
y: e.touches[0].pageY - touches[0].pageY
|
||||
});
|
||||
touchType = 'move';
|
||||
}
|
||||
touches = e.touches;
|
||||
},
|
||||
/**
|
||||
* 触摸结束
|
||||
* @param {Object} e 事件对象
|
||||
* @param {Object} o 组件实例对象
|
||||
*/
|
||||
touchend: function(e, o) {
|
||||
if(!img.src) return;
|
||||
if(touchType === 'stretch') { // 拉伸裁剪区域的四个角缩放
|
||||
// 裁剪区域宽度被缩放到多少
|
||||
var left = areaOffset.left;
|
||||
var right = areaOffset.right;
|
||||
var top = areaOffset.top;
|
||||
var bottom = areaOffset.bottom;
|
||||
var w = area.width + right - left;
|
||||
var h = area.height + bottom - top;
|
||||
// 图像放大倍数
|
||||
var p = scale * (area.width / w) - scale;
|
||||
// 复原裁剪区域
|
||||
areaOffset = { left: 0, right: 0, top: 0, bottom: 0 };
|
||||
changeAreaRect({
|
||||
instance: o,
|
||||
});
|
||||
scaleImage({
|
||||
instance: o,
|
||||
scale: p,
|
||||
x: area.left + left + (1 === activeAngle || 3 === activeAngle ? w : 0),
|
||||
y: area.top + top + (1 === activeAngle || 2 === activeAngle ? h : 0)
|
||||
});
|
||||
} else if (area.bounce) { // 检查边界并矫正，实现拖动到边界时有回弹效果
|
||||
changeImageRect({
|
||||
instance: o,
|
||||
check: true
|
||||
});
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 顺时针翻转图片90°
|
||||
* @param {Object} e 事件对象
|
||||
* @param {Object} o 组件实例对象
|
||||
*/
|
||||
rotateImage: function(e, o) {
|
||||
rotateImage(e, o, 90);
|
||||
},
|
||||
rotateImage90: function(e, o) {
|
||||
rotateImage(e, o, 90)
|
||||
},
|
||||
rotateImage270: function(e, o) {
|
||||
rotateImage(e, o, 270)
|
||||
},
|
||||
// 此处只用于对齐其他平台端的样式参数，防止异常，无作用
|
||||
imageStyles: '',
|
||||
maskStylesList: ['', '', '', ''],
|
||||
borderStyles: '',
|
||||
gridStylesList: ['', '', '', ''],
|
||||
angleStylesList: ['', '', '', ''],
|
||||
circleBoxStyles: '',
|
||||
circleStyles: '',
|
||||
}
|
||||
</wxs>
|
||||
<view class="image-cropper data-v-7129956f" style="{{'z-index:' + C}}" bindwheel="{{cropper.mousewheel}}"><canvas wx:if="{{a}}" type="2d" id="imgCanvas" class="img-canvas data-v-7129956f" style="{{'width:' + b + ';' + ('height:' + c)}}"></canvas><canvas wx:else id="imgCanvas" canvas-id="imgCanvas" class="img-canvas data-v-7129956f" style="{{'width:' + d + ';' + ('height:' + e)}}"></canvas><view id="pic-preview" class="pic-preview data-v-7129956f" change:init="{{cropper.initObserver}}" init="{{p}}" bindtouchstart="{{cropper.touchstart}}" bindtouchmove="{{cropper.touchmove}}" bindtouchend="{{cropper.touchend}}"><image wx:if="{{f}}" id="crop-image" class="crop-image data-v-7129956f" style="{{_s(cropper.imageStyles)}}" src="{{g}}" webp></image><view wx:for="{{h}}" wx:for-item="item" wx:key="a" id="{{item.b}}" class="crop-mask-block data-v-7129956f" style="{{_s(cropper.maskStylesList[index])}}"></view><view wx:if="{{i}}" id="crop-border" class="crop-border data-v-7129956f" style="{{_s(cropper.borderStyles)}}"></view><view wx:if="{{j}}" id="crop-circle-box" class="crop-circle-box data-v-7129956f" style="{{_s(cropper.circleBoxStyles)}}"><view class="crop-circle data-v-7129956f" id="crop-circle" style="{{_s(cropper.circleStyles)}}"></view></view><block wx:if="{{k}}"><view wx:for="{{l}}" wx:for-item="item" wx:key="a" id="{{item.b}}" class="crop-grid data-v-7129956f" style="{{_s(cropper.gridStylesList[index])}}"></view></block><block wx:if="{{m}}"><view wx:for="{{n}}" wx:for-item="item" wx:key="a" id="{{item.b}}" class="crop-angle data-v-7129956f" style="{{_s(cropper.angleStylesList[index])}}"><view class="data-v-7129956f" style="{{o}}"></view></view></block></view><slot/><view class="fixed-bottom safe-area-inset-bottom data-v-7129956f" style="{{'z-index:' + B}}"><view wx:if="{{q}}" class="action-bar data-v-7129956f"><view wx:if="{{r}}" class="rotate-icon data-v-7129956f" bindtap="{{cropper.rotateImage270}}"></view><view wx:if="{{s}}" class="rotate-icon is-reverse data-v-7129956f" bindtap="{{cropper.rotateImage90}}"></view></view><view wx:if="{{t}}" class="choose-btn data-v-7129956f" bindtap="{{v}}">确定</view><block wx:elif="{{w}}"><view class="rechoose data-v-7129956f" bindtap="{{x}}">重选</view><button class="button warn data-v-7129956f" type="primary" size="mini" bindtap="{{y}}">取消</button><button class="button data-v-7129956f" size="mini" bindtap="{{z}}">确定</button></block><view wx:else class="choose-btn data-v-7129956f" bindtap="{{A}}">选择图片</view></view></view>
|
||||
+146
@@ -0,0 +1,146 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
.image-cropper.data-v-7129956f {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #000;
|
||||
}
|
||||
.image-cropper .img-canvas.data-v-7129956f {
|
||||
position: absolute !important;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
.image-cropper .pic-preview.data-v-7129956f {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
.image-cropper .pic-preview .crop-mask-block.data-v-7129956f {
|
||||
background-color: rgba(51, 51, 51, 0.8);
|
||||
z-index: 2;
|
||||
position: fixed;
|
||||
box-sizing: border-box;
|
||||
pointer-events: none;
|
||||
}
|
||||
.image-cropper .pic-preview .crop-circle-box.data-v-7129956f {
|
||||
position: fixed;
|
||||
box-sizing: border-box;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
.image-cropper .pic-preview .crop-circle-box .crop-circle.data-v-7129956f {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.image-cropper .pic-preview .crop-image.data-v-7129956f {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
display: block !important;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
.image-cropper .pic-preview .crop-border.data-v-7129956f {
|
||||
position: fixed;
|
||||
border: 1px solid #fff;
|
||||
box-sizing: border-box;
|
||||
z-index: 3;
|
||||
pointer-events: none;
|
||||
}
|
||||
.image-cropper .pic-preview .crop-grid.data-v-7129956f {
|
||||
position: fixed;
|
||||
z-index: 3;
|
||||
border-style: dashed;
|
||||
border-color: #fff;
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.image-cropper .pic-preview .crop-angle.data-v-7129956f {
|
||||
position: fixed;
|
||||
z-index: 3;
|
||||
border-style: solid;
|
||||
border-color: #fff;
|
||||
pointer-events: none;
|
||||
}
|
||||
.image-cropper .fixed-bottom.data-v-7129956f {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
.image-cropper .fixed-bottom .action-bar.data-v-7129956f {
|
||||
position: absolute;
|
||||
top: -90rpx;
|
||||
left: 10rpx;
|
||||
display: flex;
|
||||
}
|
||||
.image-cropper .fixed-bottom .action-bar .rotate-icon.data-v-7129956f {
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAABCFJREFUaEPtml3IpVMUx3//ko/ChTIyiGFSMyhllI8bc4F85yuNC2FCqLmQC1+FZORiEkUMNW7UjKjJULgxV+NzSkxDhEkZgwsyigv119J63p7zvOc8z37OmXdOb51dz82711r7/99r7bXXXucVi3xokeNnRqCvB20fDmwAlgK/5bcD+FTSr33tHXQP2H4MeHQE0A+B5yRtLiUyDQJrgVc6AAaBpyV93kXkoBMIQLbfBS5NcK8BRwDXNcD+AdwnaVMbiWkRCPBBohpxHuK7M7865sclRdgNHVMhkF6IMIpwirFEUhzo8M7lwIvASTXEqyVtH8ZgagQSbOzsDknv18HZXpHn5IL8+94IOUm7miSmSqAttjPdbgGuTrnNktYsGgLpoYuAD2qg1zRTbG8P2D4SOC6/Q7vSHPALsE/S7wWy80RsPw/ckxMfSTq/LtRJwPbxwF3ASiCUTxwHCPAnEBfVF8AWSTtL7Ng+LfWOTfmlkn6udFsJ5K15R6a4kvX6yGyUFBvTOWzHXXFzCt4g6c1OArYj9iIGh43YgR+BvztXh1PSa4cMkd0jaVmXDduPAE+k3HpJD7cSGFKvfAc8FQUX8IOk/V2L1udtB/hTgdOBW4Aba/M7Ja1qs2f7euCNlHlZUlx4/495IWQ7Jl+qGbxX0gt9AHfJ2o6zFBVoNVrDKe+F3Sm8VdK1bQQ+A85JgXckXdkFaJx527cC9TpnVdvBtl3h2iapuhsGPdBw1b9xnUvaNw7AEh3bnwDnpuwGSfeP0rN9NvAMELXRXFkxEEK2nwQeSiOtRVQJwC4Z29cAW1Nuu6TVXTrN+SaBt4ErUug2Sa/2NdhH3vZy4NvU2S/p6D768w5xI3WOrAD7LtISFpGdIhVXKfaYvjd20wP13L9M0p4DBbaFRKToSLExVkr6qs+aIwlI6iwz+izUQqC+ab29PiMwqRcmPXczD8w8MFj1zg7xXEqbpdHCw7FgWSjafZL+KcQxtpjteCeflwYulFR/J3TabSslVkj6utPChAK2f6q9uZdLitKieLQRuExSvX9ZbLRUMFs09efpUZL+KtUfVo1GW/umNHC3pOhRLtiwfSbwZS6wV9IJfRdreuBBYH0a2STp9r4G+8jbXgc8mzoDT8VSO00ClwDv1ZR7XyylC4ec7ejaLUmdsV6Aw7oSbwFXpdFdks7qA6pU1na0aR6owgeIR/1cx63UzjAC0YXYVjMQHlkn6ZtSo21ytuPZGKFagQ/xsXZ/3iGuFrYdjafXG0DiQMeBi47c9/GV3BO247UV38n5o0UAP6xmu7jFOGxjRr66On5NPBDOCBsDTapxjHY1dyOcolNXnYlx1himE53p2PmNkxosevfavhg4Izt2k7TXPwZ2S6p6QZPin/2rwcQ7OKmBohCadJGF1P8PG6aaQBKVX/8AAAAASUVORK5CYII=");
|
||||
background-size: 60% 60%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
.image-cropper .fixed-bottom .action-bar .rotate-icon.is-reverse.data-v-7129956f {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
.image-cropper .fixed-bottom .rechoose.data-v-7129956f {
|
||||
color: #007aff;
|
||||
padding: 0 15px;
|
||||
line-height: 100rpx;
|
||||
}
|
||||
.image-cropper .fixed-bottom .choose-btn.data-v-7129956f {
|
||||
color: #007aff;
|
||||
text-align: center;
|
||||
line-height: 100rpx;
|
||||
flex: 1;
|
||||
}
|
||||
.image-cropper .fixed-bottom .button.data-v-7129956f {
|
||||
margin: auto 15px auto auto;
|
||||
background-color: #4cd964;
|
||||
color: #fff;
|
||||
}
|
||||
.image-cropper .fixed-bottom .warn.data-v-7129956f {
|
||||
margin: auto 15px auto auto;
|
||||
background-color: #dd524d;
|
||||
color: #fff;
|
||||
}
|
||||
.image-cropper .safe-area-inset-bottom.data-v-7129956f {
|
||||
padding-bottom: 0;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
+9
File diff suppressed because one or more lines are too long
+51
@@ -0,0 +1,51 @@
|
||||
"use strict";
|
||||
const uni_modules_svEditor_components_common_config = require("./config.js");
|
||||
function parseHtmlWithVideo(richText) {
|
||||
const imgRegex = /<img\s+([^>]+)>/gi;
|
||||
const customUrlRegex = /\bdata-custom="[^"]*url=([^&"]+)/i;
|
||||
return richText.replace(imgRegex, (match, attrs) => {
|
||||
const urlMatch = attrs.match(customUrlRegex);
|
||||
if (urlMatch) {
|
||||
const videoUrl = urlMatch[1];
|
||||
const attrArray = attrs.split(/\s+/).filter((attr) => attr.trim() !== "");
|
||||
const newAttrs = attrArray.filter((attr) => !attr.startsWith("src=") && !attr.startsWith("data-custom=")).join(" ");
|
||||
return `<video controls ${newAttrs} src="${videoUrl}" width="100%" ></video>`;
|
||||
}
|
||||
return match;
|
||||
});
|
||||
}
|
||||
async function replaceVideoWithImageRender(richText, customCallback) {
|
||||
const videoRegex = /<video\s+([^>]+)>(.*?)<\/video>/gi;
|
||||
const matches = [];
|
||||
let match;
|
||||
while ((match = videoRegex.exec(richText)) !== null) {
|
||||
matches.push(match);
|
||||
}
|
||||
const replacements = await Promise.all(
|
||||
matches.map(async (match2) => {
|
||||
const [fullMatch, attributes, content] = match2;
|
||||
const sourceRegex = /<source\s+[^>]*src="([^">]+)"/i;
|
||||
const matchSource = content.match(sourceRegex);
|
||||
let videoUrl = "";
|
||||
if (matchSource && matchSource.length > 1) {
|
||||
videoUrl = matchSource[1];
|
||||
}
|
||||
let thumbnailRes;
|
||||
if (customCallback)
|
||||
thumbnailRes = await customCallback(videoUrl);
|
||||
if (!thumbnailRes)
|
||||
thumbnailRes = uni_modules_svEditor_components_common_config.config.video_thumbnail;
|
||||
const filteredAttributes = attributes.split(/\s+/).filter((attr) => !attr.startsWith("controls")).join(" ");
|
||||
const imgTag = `<img ${filteredAttributes} src="${thumbnailRes}" data-custom="url=${videoUrl}" />`;
|
||||
return { fullMatch, imgTag };
|
||||
})
|
||||
);
|
||||
let result = richText;
|
||||
for (const { fullMatch, imgTag } of replacements) {
|
||||
result = result.replace(fullMatch, imgTag);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
exports.parseHtmlWithVideo = parseHtmlWithVideo;
|
||||
exports.replaceVideoWithImageRender = replaceVideoWithImageRender;
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/sv-editor/components/common/parse.js.map
|
||||
+58
@@ -0,0 +1,58 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
let state = null;
|
||||
state = common_vendor.reactive({
|
||||
curEID: "",
|
||||
formats: {},
|
||||
isReadOnly: false,
|
||||
firstInstanceFlag: ""
|
||||
// 首次实例化标志，禁止手动更改
|
||||
});
|
||||
function getEditor(eid) {
|
||||
return state[`${eid}-ctx`];
|
||||
}
|
||||
function setEditor(eid, ctx) {
|
||||
state[`${eid}-ctx`] = ctx;
|
||||
state[`${eid}-ctx`].id = eid;
|
||||
}
|
||||
function getEID() {
|
||||
return state.curEID;
|
||||
}
|
||||
function setEID(eid) {
|
||||
state.curEID = eid;
|
||||
}
|
||||
function getFormats() {
|
||||
return state.formats;
|
||||
}
|
||||
function setFormats(formats) {
|
||||
state.formats = formats;
|
||||
}
|
||||
function getReadOnly() {
|
||||
return state.isReadOnly;
|
||||
}
|
||||
function setReadOnly(readOnly) {
|
||||
state.isReadOnly = readOnly;
|
||||
}
|
||||
function destroy() {
|
||||
state = {};
|
||||
state.curEID = "";
|
||||
state.formats = {};
|
||||
state.isReadOnly = false;
|
||||
state.firstInstanceFlag = "";
|
||||
}
|
||||
const options = {
|
||||
state,
|
||||
actions: {
|
||||
getEditor,
|
||||
setEditor,
|
||||
getEID,
|
||||
setEID,
|
||||
getFormats,
|
||||
setFormats,
|
||||
getReadOnly,
|
||||
setReadOnly,
|
||||
destroy
|
||||
}
|
||||
};
|
||||
exports.options = options;
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/sv-editor/components/common/store.js.map
|
||||
+207
@@ -0,0 +1,207 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const uni_modules_svEditor_components_common_store = require("./store.js");
|
||||
const id = "sv-editor";
|
||||
const displayName = "基于官方 uni-editor 的富文本编辑器";
|
||||
const version = "1.1.2";
|
||||
const description = "可插入图片、视频、链接、@提及、#话题、Emoji表情包，且优化了聚焦键盘闪烁等问题";
|
||||
const keywords = [
|
||||
"富文本",
|
||||
"编辑器",
|
||||
"editor",
|
||||
"html"
|
||||
];
|
||||
const repository = "https://gitee.com/Sonve/sv-editor";
|
||||
const engines = {
|
||||
HBuilderX: "^3.1.0"
|
||||
};
|
||||
const dcloudext = {
|
||||
type: "component-vue",
|
||||
sale: {
|
||||
regular: {
|
||||
price: "0.00"
|
||||
},
|
||||
sourcecode: {
|
||||
price: "0.00"
|
||||
}
|
||||
},
|
||||
contact: {
|
||||
qq: ""
|
||||
},
|
||||
declaration: {
|
||||
ads: "无",
|
||||
data: "插件不采集任何数据",
|
||||
permissions: "无"
|
||||
},
|
||||
npmurl: ""
|
||||
};
|
||||
const uni_modules = {
|
||||
dependencies: [],
|
||||
encrypt: [],
|
||||
platforms: {
|
||||
cloud: {
|
||||
tcb: "y",
|
||||
aliyun: "y",
|
||||
alipay: "y"
|
||||
},
|
||||
client: {
|
||||
Vue: {
|
||||
vue2: "y",
|
||||
vue3: "y"
|
||||
},
|
||||
App: {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "u",
|
||||
"app-uvue": "u",
|
||||
"app-harmony": "u"
|
||||
},
|
||||
"H5-mobile": {
|
||||
Safari: "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
Chrome: "y",
|
||||
IE: "y",
|
||||
Edge: "y",
|
||||
Firefox: "y",
|
||||
Safari: "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "u",
|
||||
"百度": "u",
|
||||
"字节跳动": "u",
|
||||
QQ: "u",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
const packageConfig = {
|
||||
id,
|
||||
displayName,
|
||||
version,
|
||||
description,
|
||||
keywords,
|
||||
repository,
|
||||
engines,
|
||||
dcloudext,
|
||||
uni_modules
|
||||
};
|
||||
function addText(word) {
|
||||
const eid = uni_modules_svEditor_components_common_store.options.actions.getEID();
|
||||
const editorCtx = uni_modules_svEditor_components_common_store.options.actions.getEditor(eid);
|
||||
noKeyboardEffect(() => {
|
||||
editorCtx.insertText({ text: "\n" });
|
||||
editorCtx.insertText({ text: "【" + word + "】：" });
|
||||
editorCtx.insertText({ text: "\n" });
|
||||
});
|
||||
}
|
||||
function addImage(imgs, options = {}) {
|
||||
const eid = uni_modules_svEditor_components_common_store.options.actions.getEID();
|
||||
const editorCtx = uni_modules_svEditor_components_common_store.options.actions.getEditor(eid);
|
||||
const upRes = imgs;
|
||||
common_vendor.index.__f__("log", "at uni_modules/sv-editor/components/common/utils.js:41", "upRes");
|
||||
common_vendor.index.__f__("log", "at uni_modules/sv-editor/components/common/utils.js:42", upRes);
|
||||
common_vendor.index.__f__("log", "at uni_modules/sv-editor/components/common/utils.js:43", upRes instanceof Array);
|
||||
common_vendor.index.__f__("log", "at uni_modules/sv-editor/components/common/utils.js:44", upRes.length);
|
||||
if (!upRes || upRes.length == 0)
|
||||
return;
|
||||
noKeyboardEffect(() => {
|
||||
editorCtx.insertText({ text: "\n" });
|
||||
upRes == null ? void 0 : upRes.forEach((item) => {
|
||||
common_vendor.index.__f__("log", "at uni_modules/sv-editor/components/common/utils.js:51", "item");
|
||||
common_vendor.index.__f__("log", "at uni_modules/sv-editor/components/common/utils.js:52", item);
|
||||
editorCtx.insertImage({
|
||||
...options,
|
||||
src: options.srcFiled ? item[options.srcFiled] : item
|
||||
});
|
||||
});
|
||||
editorCtx.insertText({ text: "\n" });
|
||||
});
|
||||
return upRes;
|
||||
}
|
||||
async function addVideo(uploadFunc, options = {}) {
|
||||
const eid = uni_modules_svEditor_components_common_store.options.actions.getEID();
|
||||
const editorCtx = uni_modules_svEditor_components_common_store.options.actions.getEditor(eid);
|
||||
if (!uploadFunc)
|
||||
return;
|
||||
const upRes = await uploadFunc(editorCtx);
|
||||
common_vendor.index.__f__("log", "at uni_modules/sv-editor/components/common/utils.js:86", upRes);
|
||||
if (!upRes || !(upRes == null ? void 0 : upRes.length))
|
||||
return;
|
||||
noKeyboardEffect(() => {
|
||||
editorCtx.insertText({ text: "\n" });
|
||||
upRes == null ? void 0 : upRes.forEach((item) => {
|
||||
editorCtx.insertImage({
|
||||
...options,
|
||||
src: item.videoImg,
|
||||
//item[options.imageFiled || 'imagePath'],
|
||||
data: { url: item.videoUrl }
|
||||
});
|
||||
});
|
||||
editorCtx.insertText({ text: "\n" });
|
||||
});
|
||||
return upRes;
|
||||
}
|
||||
const linkFlag = "🔗添加链接中, 请稍后...🔗";
|
||||
function noKeyboardEffect(callback, options) {
|
||||
let defaultOpt = { delay: 50 };
|
||||
defaultOpt.mode = "loseFocus";
|
||||
const opt = Object.assign(defaultOpt, options);
|
||||
const eid = uni_modules_svEditor_components_common_store.options.actions.getEID();
|
||||
const editorCtx = uni_modules_svEditor_components_common_store.options.actions.getEditor(eid);
|
||||
if (opt.mode == "hideKeyboard") {
|
||||
callback();
|
||||
setTimeout(() => {
|
||||
common_vendor.index.hideKeyboard();
|
||||
}, opt.delay);
|
||||
}
|
||||
if (opt.mode == "loseFocus") {
|
||||
callback();
|
||||
editorCtx.blur();
|
||||
}
|
||||
if (opt.mode == "setReadOnly") {
|
||||
uni_modules_svEditor_components_common_store.options.actions.setReadOnly(true);
|
||||
callback();
|
||||
setTimeout(() => {
|
||||
uni_modules_svEditor_components_common_store.options.actions.setReadOnly(false);
|
||||
}, opt.delay);
|
||||
}
|
||||
if (opt.mode == "setInputMode")
|
||||
;
|
||||
}
|
||||
function copyrightPrint() {
|
||||
const styleTitle1 = `font-size:16px;font-weight:700;color:#ff4500;`;
|
||||
const styleTitle2 = `font-style:oblique;font-size:14px;color:#fb7299;`;
|
||||
const styleContent = `color:#66ccff;`;
|
||||
const title1 = ` 📝 sv-editor v${packageConfig.version} `;
|
||||
const title2 = "by Sonve";
|
||||
const content = `
|
||||
版权声明：
|
||||
1. 本插件免费开源，还望保留此版权声明在控制台输出
|
||||
2. 如需借鉴源码，还望注明出处
|
||||
3. 未经授权您不得以任何形式转载、售卖本插件，或以其他形式侵犯版权及附属权利
|
||||
4. 作者将保留对此插件版权信息的最终解释权
|
||||
🏠 地址: https://ext.dcloud.net.cn/plugin?id=21184
|
||||
😸 Gitee: https://gitee.com/Sonve/sv-editor
|
||||
💬 微信: s1051399604
|
||||
🐧 QQ群: ① 852637893 ② 816646292
|
||||
`;
|
||||
common_vendor.index.__f__("log", "at uni_modules/sv-editor/components/common/utils.js:413", `%c${title1}%c${title2}%c${content}`, styleTitle1, styleTitle2, styleContent);
|
||||
}
|
||||
exports.addImage = addImage;
|
||||
exports.addText = addText;
|
||||
exports.addVideo = addVideo;
|
||||
exports.copyrightPrint = copyrightPrint;
|
||||
exports.linkFlag = linkFlag;
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/sv-editor/components/common/utils.js.map
|
||||
+69
@@ -0,0 +1,69 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const block0 = {};
|
||||
const _sfc_main = {
|
||||
props: {
|
||||
sid: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
eid: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
videoUrl: "",
|
||||
// 视频地址
|
||||
coverUrl: "",
|
||||
// 封面地址
|
||||
coverUrlIOS: "",
|
||||
// ios端封面地址
|
||||
pastemode: "text"
|
||||
// 粘贴模式 text | origin
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
changePasteMode(e) {
|
||||
this.pastemode = e;
|
||||
},
|
||||
editorPaste(e) {
|
||||
this.$emit("epaste", e);
|
||||
},
|
||||
createVideoThumbnail(url) {
|
||||
this.videoUrl = url;
|
||||
},
|
||||
getVideoThumbnail(e) {
|
||||
common_vendor.index.$emit(`E_EDITOR_GET_VIDEO_THUMBNAIL_${e.video}`, e);
|
||||
},
|
||||
createCoverThumbnail(url) {
|
||||
},
|
||||
getCoverThumbnail(e) {
|
||||
common_vendor.index.$emit(`E_EDITOR_GET_COVER_THUMBNAIL_${e.image}`, e);
|
||||
}
|
||||
}
|
||||
};
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return {
|
||||
a: $props.eid,
|
||||
b: _ctx.quillEditor.watchEID,
|
||||
c: $props.sid,
|
||||
d: _ctx.quillEditor.watchStartID,
|
||||
e: $data.videoUrl,
|
||||
f: _ctx.quillEditor.watchPasteMode,
|
||||
g: $data.pastemode,
|
||||
h: _ctx.quillEditor.watchVideoUrl,
|
||||
i: $data.coverUrl,
|
||||
j: _ctx.quillEditor.watchCoverUrl,
|
||||
k: $data.coverUrlIOS,
|
||||
l: _ctx.quillEditor.watchCoverUrlIOS
|
||||
};
|
||||
}
|
||||
if (typeof block0 === "function")
|
||||
block0(_sfc_main);
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
|
||||
wx.createComponent(Component);
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/sv-editor/components/plugins/sv-editor-plugin.js.map
|
||||
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
<text eid="{{a}}" change:eid="{{b}}" sid="{{c}}" change:sid="{{d}}" video="{{e}}" change:pastemode="{{f}}" pastemode="{{g}}" change:video="{{h}}" cover="{{i}}" change:cover="{{j}}" coverios="{{k}}" change:coverios="{{l}}"></text>
|
||||
Vendored
Vendored
+125
@@ -0,0 +1,125 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const uni_modules_svEditor_components_common_config = require("../common/config.js");
|
||||
function wxCreateCoverThumbnail(coverImageUrl) {
|
||||
const loadImage = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
common_vendor.index.getImageInfo({
|
||||
src: coverImageUrl,
|
||||
success: (info) => {
|
||||
resolve(info);
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(err);
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
return new Promise(async (resolve, reject) => {
|
||||
try {
|
||||
const imageInfo = await loadImage();
|
||||
const canvas = common_vendor.index.createOffscreenCanvas({
|
||||
type: "2d",
|
||||
width: imageInfo.width,
|
||||
height: imageInfo.height
|
||||
});
|
||||
const ctx = canvas.getContext("2d");
|
||||
const coverImg = canvas.createImage();
|
||||
await new Promise((resolve2) => {
|
||||
coverImg.onload = resolve2;
|
||||
coverImg.src = coverImageUrl;
|
||||
});
|
||||
ctx.drawImage(coverImg, 0, 0, canvas.width, canvas.height);
|
||||
const playIcon = canvas.createImage();
|
||||
await new Promise((resolve2) => {
|
||||
playIcon.onload = resolve2;
|
||||
playIcon.src = uni_modules_svEditor_components_common_config.config.video_playicon;
|
||||
});
|
||||
const playButtonSize = canvas.width * 0.15;
|
||||
const playButtonX = (canvas.width - playButtonSize) / 2;
|
||||
const playButtonY = (canvas.height - playButtonSize) / 2;
|
||||
const iconAspectRatio = playIcon.width / playIcon.height;
|
||||
const iconWidth = playButtonSize;
|
||||
const iconHeight = iconWidth / iconAspectRatio;
|
||||
ctx.drawImage(playIcon, playButtonX, playButtonY, iconWidth, iconHeight);
|
||||
common_vendor.index.canvasToTempFilePath({
|
||||
canvas,
|
||||
destWidth: canvas.width,
|
||||
destHeight: canvas.height,
|
||||
fileType: "png",
|
||||
success: (res) => {
|
||||
resolve(res.tempFilePath);
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(new Error("Failed to convert canvas to image."));
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
}
|
||||
});
|
||||
}
|
||||
function wxCreateVideoThumbnail(coverImageUrl) {
|
||||
const loadVideo = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
common_vendor.index.getVideoInfo({
|
||||
src: coverImageUrl,
|
||||
success: (info) => {
|
||||
resolve(info);
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(err);
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
return new Promise(async (resolve, reject) => {
|
||||
try {
|
||||
const imageInfo = await loadVideo();
|
||||
const canvas = common_vendor.index.createOffscreenCanvas({
|
||||
type: "2d",
|
||||
width: imageInfo.width,
|
||||
height: imageInfo.height
|
||||
});
|
||||
const ctx = canvas.getContext("2d");
|
||||
const coverImg = canvas.createImage();
|
||||
await new Promise((resolve2) => {
|
||||
coverImg.onload = resolve2;
|
||||
coverImg.src = coverImageUrl;
|
||||
});
|
||||
ctx.drawImage(coverImg, 0, 0, canvas.width, canvas.height);
|
||||
const playIcon = canvas.createImage();
|
||||
await new Promise((resolve2) => {
|
||||
playIcon.onload = resolve2;
|
||||
playIcon.src = uni_modules_svEditor_components_common_config.config.video_playicon;
|
||||
});
|
||||
const playButtonSize = canvas.width * 0.15;
|
||||
const playButtonX = (canvas.width - playButtonSize) / 2;
|
||||
const playButtonY = (canvas.height - playButtonSize) / 2;
|
||||
const iconAspectRatio = playIcon.width / playIcon.height;
|
||||
const iconWidth = playButtonSize;
|
||||
const iconHeight = iconWidth / iconAspectRatio;
|
||||
ctx.drawImage(playIcon, playButtonX, playButtonY, iconWidth, iconHeight);
|
||||
common_vendor.index.canvasToTempFilePath({
|
||||
canvas,
|
||||
destWidth: canvas.width,
|
||||
destHeight: canvas.height,
|
||||
fileType: "png",
|
||||
success: (res) => {
|
||||
resolve(res.tempFilePath);
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(new Error("Failed to convert canvas to image."));
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
}
|
||||
});
|
||||
}
|
||||
const wxplugin = {
|
||||
wxCreateCoverThumbnail,
|
||||
wxCreateVideoThumbnail
|
||||
};
|
||||
exports.wxplugin = wxplugin;
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/sv-editor/components/plugins/sv-editor-wxplugin.js.map
|
||||
Vendored
+49
@@ -0,0 +1,49 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const block0 = {};
|
||||
const _sfc_main = {
|
||||
props: {
|
||||
eid: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
inputmode: "",
|
||||
// none | remove
|
||||
focusFlag: 0,
|
||||
// 主动聚焦标志
|
||||
backspaceFlag: 0
|
||||
// 主动删除标志
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
changeInputMode(mode) {
|
||||
this.inputmode = mode;
|
||||
},
|
||||
focus() {
|
||||
this.focusFlag++;
|
||||
},
|
||||
backspace() {
|
||||
this.backspaceFlag++;
|
||||
}
|
||||
}
|
||||
};
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return {
|
||||
a: $props.eid,
|
||||
b: _ctx.quillEditor.watchEID,
|
||||
c: $data.inputmode,
|
||||
d: _ctx.quillEditor.watchInputMode,
|
||||
e: $data.focusFlag,
|
||||
f: _ctx.quillEditor.watchFocus,
|
||||
g: $data.backspaceFlag,
|
||||
h: _ctx.quillEditor.watchBackSpace
|
||||
};
|
||||
}
|
||||
if (typeof block0 === "function")
|
||||
block0(_sfc_main);
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
|
||||
wx.createComponent(Component);
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/sv-editor/components/sv-editor/sv-editor-render.js.map
|
||||
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
<text eid="{{a}}" change:eid="{{b}}" mode="{{c}}" change:mode="{{d}}" focus="{{e}}" change:focus="{{f}}" backspace="{{g}}" change:backspace="{{h}}"></text>
|
||||
Vendored
+224
@@ -0,0 +1,224 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const uni_modules_svEditor_components_common_store = require("../common/store.js");
|
||||
const uni_modules_svEditor_components_common_utils = require("../common/utils.js");
|
||||
const uni_modules_svEditor_components_common_parse = require("../common/parse.js");
|
||||
const uni_modules_svEditor_components_plugins_svEditorWxplugin = require("../plugins/sv-editor-wxplugin.js");
|
||||
const SvEditorRender = () => "./sv-editor-render.js";
|
||||
const SvEditorPlugin = () => "../plugins/sv-editor-plugin.js";
|
||||
const _sfc_main = {
|
||||
// 微信小程序特殊配置
|
||||
options: {
|
||||
addGlobalClass: true,
|
||||
virtualHost: true,
|
||||
styleIsolation: "shared"
|
||||
},
|
||||
components: {
|
||||
SvEditorRender,
|
||||
SvEditorPlugin
|
||||
},
|
||||
props: {
|
||||
// 编辑器id可传入，以便循环组件使用，防止id重复
|
||||
eid: {
|
||||
type: String,
|
||||
default: "sv-editor"
|
||||
// 唯一，禁止重复
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: "写点什么吧 ~"
|
||||
},
|
||||
// 是否只读
|
||||
readOnly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 最大字数限制，<=0时表示不限
|
||||
maxlength: {
|
||||
type: Number,
|
||||
default: -1
|
||||
},
|
||||
// 是否关闭最大字数显示
|
||||
hideMax: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 粘贴模式，可选 text 纯文本(默认) | origin 尽可能保持原格式
|
||||
pasteMode: {
|
||||
type: String,
|
||||
default: "text"
|
||||
}
|
||||
},
|
||||
emits: ["ready", "input", "statuschange", "focus", "blur", "overmax", "epaste"],
|
||||
data() {
|
||||
return {
|
||||
textlength: 0,
|
||||
// 当前字数统计
|
||||
startID: ""
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
editorEID: {
|
||||
set(newVal) {
|
||||
uni_modules_svEditor_components_common_store.options.actions.setEID(newVal);
|
||||
},
|
||||
get() {
|
||||
return uni_modules_svEditor_components_common_store.options.actions.getEID();
|
||||
}
|
||||
},
|
||||
editorCtx: {
|
||||
set(newVal) {
|
||||
uni_modules_svEditor_components_common_store.options.actions.setEditor(newVal.eid, newVal.ctx);
|
||||
},
|
||||
get() {
|
||||
let instance = uni_modules_svEditor_components_common_store.options.actions.getEditor(this.eid);
|
||||
return instance;
|
||||
}
|
||||
},
|
||||
isReadOnly: {
|
||||
set(newVal) {
|
||||
uni_modules_svEditor_components_common_store.options.actions.setReadOnly(newVal);
|
||||
},
|
||||
get() {
|
||||
return uni_modules_svEditor_components_common_store.options.actions.getReadOnly();
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
readOnly(newVal) {
|
||||
this.isReadOnly = newVal;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (!uni_modules_svEditor_components_common_store.options.state.firstInstanceFlag) {
|
||||
this.editorEID = this.eid;
|
||||
uni_modules_svEditor_components_common_store.options.state.firstInstanceFlag = this.eid;
|
||||
uni_modules_svEditor_components_common_utils.copyrightPrint();
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
uni_modules_svEditor_components_common_store.options.actions.destroy();
|
||||
},
|
||||
unmounted() {
|
||||
uni_modules_svEditor_components_common_store.options.actions.destroy();
|
||||
},
|
||||
methods: {
|
||||
onEditorReady() {
|
||||
this.$nextTick(() => {
|
||||
common_vendor.index.createSelectorQuery().in(this).select("#" + this.eid).context((res) => {
|
||||
this.editorCtx = { eid: this.eid, ctx: res.context };
|
||||
this.bindMethods();
|
||||
this.$emit("ready", this.editorCtx);
|
||||
}).exec();
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 挂载实例api
|
||||
*/
|
||||
bindMethods() {
|
||||
var _a;
|
||||
this.editorCtx.createCoverThumbnail = (_a = uni_modules_svEditor_components_plugins_svEditorWxplugin.wxplugin) == null ? void 0 : _a.wxCreateCoverThumbnail;
|
||||
this.editorCtx.changeInput = () => {
|
||||
this.editorCtx.getContents({
|
||||
success: (res) => {
|
||||
this.$emit("input", { ctx: this.editorCtx, html: res.html, text: res.text });
|
||||
}
|
||||
});
|
||||
};
|
||||
this.editorCtx.getLastContent = async () => {
|
||||
return new Promise((resolve) => {
|
||||
this.editorCtx.getContents({
|
||||
success: (res) => {
|
||||
resolve(res);
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
this.editorCtx.initHtml = async (html, customCallback) => {
|
||||
let transHtml = await uni_modules_svEditor_components_common_parse.replaceVideoWithImageRender(html, customCallback);
|
||||
setTimeout(() => {
|
||||
this.editorCtx.setContents({
|
||||
html: transHtml,
|
||||
success: () => {
|
||||
this.editorCtx.changeInput();
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
this.editorCtx.exportHtml = (html) => {
|
||||
return uni_modules_svEditor_components_common_parse.parseHtmlWithVideo(html);
|
||||
};
|
||||
},
|
||||
onEditorInput(e) {
|
||||
if (Object.keys(e.detail).length <= 0)
|
||||
return;
|
||||
const { html, text } = e.detail;
|
||||
if (text.indexOf(uni_modules_svEditor_components_common_utils.linkFlag) !== -1)
|
||||
return;
|
||||
const maxlength = parseInt(this.maxlength);
|
||||
const textStr = text.replace(/[ \t\r\n]/g, "");
|
||||
this.textlength = textStr.length;
|
||||
if (this.textlength >= maxlength && maxlength > 0) {
|
||||
this.textlength = maxlength;
|
||||
if (!this.lockHtmlFlag) {
|
||||
this.lockHtml = html;
|
||||
this.lockHtmlFlag = true;
|
||||
this.$emit("input", { ctx: this.editorCtx, html, text });
|
||||
} else {
|
||||
this.$emit("overmax", { ctx: this.editorCtx });
|
||||
}
|
||||
this.editorCtx.setContents({ html: this.lockHtml });
|
||||
} else {
|
||||
this.$emit("input", { ctx: this.editorCtx, html, text });
|
||||
this.lockHtmlFlag = false;
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 样式格式改变时触发
|
||||
* 注意：微信小程序端在多编辑器实例下切换编辑器后可能不会及时触发onStatusChange
|
||||
*/
|
||||
onStatusChange(e) {
|
||||
uni_modules_svEditor_components_common_store.options.actions.setFormats(e.detail);
|
||||
this.$emit("statuschange", { ...e, ctx: this.editorCtx });
|
||||
common_vendor.index.$emit("E_EDITOR_STATUSCHANGE", { ...e, ctx: this.editorCtx });
|
||||
},
|
||||
onEditorFocus(e) {
|
||||
this.editorEID = this.eid;
|
||||
this.$emit("focus", { ...e, ctx: this.editorCtx });
|
||||
},
|
||||
onEditorBlur(e) {
|
||||
this.$emit("blur", { ...e, ctx: this.editorCtx });
|
||||
},
|
||||
ePaste(e) {
|
||||
this.$emit("epaste", { ...e, ctx: this.editorCtx });
|
||||
common_vendor.index.$emit("E_EDITOR_PASTE", { ...e, ctx: this.editorCtx });
|
||||
},
|
||||
/**
|
||||
* 微信小程序官方editor的长按事件有bug，需要重写覆盖，不需做任何逻辑，可见下面小程序社区问题链接
|
||||
* @tutorial https://developers.weixin.qq.com/community/develop/doc/000c04b3e1c1006f660065e4f61000
|
||||
*/
|
||||
eLongpress() {
|
||||
}
|
||||
}
|
||||
};
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return common_vendor.e({
|
||||
a: $props.eid,
|
||||
b: $props.placeholder,
|
||||
c: $options.isReadOnly,
|
||||
d: common_vendor.o((...args) => $options.onStatusChange && $options.onStatusChange(...args)),
|
||||
e: common_vendor.o((...args) => $options.onEditorReady && $options.onEditorReady(...args)),
|
||||
f: common_vendor.o((...args) => $options.onEditorInput && $options.onEditorInput(...args)),
|
||||
g: common_vendor.o((...args) => $options.onEditorFocus && $options.onEditorFocus(...args)),
|
||||
h: common_vendor.o((...args) => $options.onEditorBlur && $options.onEditorBlur(...args)),
|
||||
i: $props.maxlength > 0 && !$props.hideMax
|
||||
}, $props.maxlength > 0 && !$props.hideMax ? {
|
||||
j: common_vendor.t($data.textlength),
|
||||
k: common_vendor.t($props.maxlength)
|
||||
} : {}, {
|
||||
l: common_vendor.o((...args) => $options.eLongpress && $options.eLongpress(...args))
|
||||
});
|
||||
}
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
|
||||
wx.createComponent(Component);
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/sv-editor/components/sv-editor/sv-editor.js.map
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
+1
@@ -0,0 +1 @@
|
||||
<view class="sv-editor-wrapper" bindlongpress="{{l}}"><slot name="header"></slot><block wx:if="{{r0}}"><editor id="{{a}}" class="sv-editor-container" show-img-size show-img-toolbar show-img-resize placeholder="{{b}}" read-only="{{c}}" bindstatuschange="{{d}}" bindready="{{e}}" bindinput="{{f}}" bindfocus="{{g}}" bindblur="{{h}}"></editor></block><view wx:if="{{i}}" class="maxlength-tip">{{j}}/{{k}}</view><slot name="footer"></slot></view>
|
||||
+65
@@ -0,0 +1,65 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
.sv-editor-wrapper {
|
||||
--maxlength-text-color: #666666;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.sv-editor-wrapper .sv-editor-container {
|
||||
flex: 1;
|
||||
}
|
||||
.sv-editor-wrapper .maxlength-tip {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
font-size: 24rpx;
|
||||
color: var(--maxlength-text-color);
|
||||
opacity: 0.6;
|
||||
}
|
||||
.sv-editor-container .ql-blank::before {
|
||||
font-style: normal;
|
||||
color: #cccccc;
|
||||
}
|
||||
.ql-container {
|
||||
min-height: unset;
|
||||
}
|
||||
.ql-container .ql-image-overlay {
|
||||
pointer-events: none;
|
||||
}
|
||||
.ql-container .ql-image-overlay .ql-image-size {
|
||||
right: 28px !important;
|
||||
}
|
||||
.ql-container .ql-image-overlay .ql-image-toolbar {
|
||||
pointer-events: auto;
|
||||
}
|
||||
.ql-container .ql-image-overlay .ql-image-handle {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
pointer-events: auto;
|
||||
}
|
||||
+132
@@ -0,0 +1,132 @@
|
||||
"use strict";
|
||||
const uni_modules_zPaging_components_zPaging_js_zPagingStatic = require("../z-paging/js/z-paging-static.js");
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const _sfc_main = {
|
||||
name: "z-paging-empty-view",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
props: {
|
||||
// 空数据描述文字
|
||||
emptyViewText: {
|
||||
type: String,
|
||||
default: "没有数据哦~"
|
||||
},
|
||||
// 空数据图片
|
||||
emptyViewImg: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
// 是否显示空数据图重新加载按钮
|
||||
showEmptyViewReload: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 空数据点击重新加载文字
|
||||
emptyViewReloadText: {
|
||||
type: String,
|
||||
default: "重新加载"
|
||||
},
|
||||
// 是否是加载失败
|
||||
isLoadFailed: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 空数据图样式
|
||||
emptyViewStyle: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
// 空数据图img样式
|
||||
emptyViewImgStyle: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
// 空数据图描述文字样式
|
||||
emptyViewTitleStyle: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
// 空数据图重新加载按钮样式
|
||||
emptyViewReloadStyle: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
// 空数据图z-index
|
||||
emptyViewZIndex: {
|
||||
type: Number,
|
||||
default: 9
|
||||
},
|
||||
// 空数据图片是否使用fixed布局并铺满z-paging
|
||||
emptyViewFixed: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 空数据图中布局的单位，默认为rpx
|
||||
unit: {
|
||||
type: String,
|
||||
default: "rpx"
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
emptyImg() {
|
||||
return this.isLoadFailed ? uni_modules_zPaging_components_zPaging_js_zPagingStatic.zStatic.base64Error : uni_modules_zPaging_components_zPaging_js_zPagingStatic.zStatic.base64Empty;
|
||||
},
|
||||
finalEmptyViewStyle() {
|
||||
this.emptyViewStyle["z-index"] = this.emptyViewZIndex;
|
||||
return this.emptyViewStyle;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 点击了reload按钮
|
||||
reloadClick() {
|
||||
this.$emit("reload");
|
||||
},
|
||||
// 点击了空数据view
|
||||
emptyViewClick() {
|
||||
this.$emit("viewClick");
|
||||
}
|
||||
}
|
||||
};
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return common_vendor.e({
|
||||
a: !$props.emptyViewImg.length
|
||||
}, !$props.emptyViewImg.length ? {
|
||||
b: $props.unit === "rpx" ? 1 : "",
|
||||
c: $props.unit === "px" ? 1 : "",
|
||||
d: common_vendor.s($props.emptyViewImgStyle),
|
||||
e: $options.emptyImg
|
||||
} : {
|
||||
f: $props.unit === "rpx" ? 1 : "",
|
||||
g: $props.unit === "px" ? 1 : "",
|
||||
h: common_vendor.s($props.emptyViewImgStyle),
|
||||
i: $props.emptyViewImg
|
||||
}, {
|
||||
j: common_vendor.t($props.emptyViewText),
|
||||
k: $props.unit === "rpx" ? 1 : "",
|
||||
l: $props.unit === "px" ? 1 : "",
|
||||
m: common_vendor.s($props.emptyViewTitleStyle),
|
||||
n: $props.showEmptyViewReload
|
||||
}, $props.showEmptyViewReload ? {
|
||||
o: common_vendor.t($props.emptyViewReloadText),
|
||||
p: $props.unit === "rpx" ? 1 : "",
|
||||
q: $props.unit === "px" ? 1 : "",
|
||||
r: common_vendor.s($props.emptyViewReloadStyle),
|
||||
s: common_vendor.o((...args) => $options.reloadClick && $options.reloadClick(...args))
|
||||
} : {}, {
|
||||
t: $props.emptyViewFixed ? 1 : "",
|
||||
v: common_vendor.s($options.finalEmptyViewStyle),
|
||||
w: common_vendor.o((...args) => $options.emptyViewClick && $options.emptyViewClick(...args))
|
||||
});
|
||||
}
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-b7999e14"]]);
|
||||
wx.createComponent(Component);
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/z-paging/components/z-paging-empty-view/z-paging-empty-view.js.map
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
+1
@@ -0,0 +1 @@
|
||||
<view class="{{['data-v-b7999e14', 'zp-container', t && 'zp-container-fixed']}}" style="{{v}}" bindtap="{{w}}"><view class="zp-main data-v-b7999e14"><image wx:if="{{a}}" class="{{['data-v-b7999e14', b && 'zp-main-image-rpx', c && 'zp-main-image-px']}}" style="{{d}}" src="{{e}}"/><image wx:else class="{{['data-v-b7999e14', f && 'zp-main-image-rpx', g && 'zp-main-image-px']}}" mode="aspectFit" style="{{h}}" src="{{i}}"/><text class="{{['zp-main-title', 'data-v-b7999e14', k && 'zp-main-title-rpx', l && 'zp-main-title-px']}}" style="{{m}}">{{j}}</text><text wx:if="{{n}}" class="{{['data-v-b7999e14', 'zp-main-error-btn', p && 'zp-main-error-btn-rpx', q && 'zp-main-error-btn-px']}}" style="{{r}}" catchtap="{{s}}">{{o}}</text></view></view>
|
||||
+62
@@ -0,0 +1,62 @@
|
||||
|
||||
.zp-container.data-v-b7999e14{
|
||||
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.zp-container-fixed.data-v-b7999e14 {
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.zp-main.data-v-b7999e14{
|
||||
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 50rpx 0rpx;
|
||||
}
|
||||
.zp-main-image-rpx.data-v-b7999e14 {
|
||||
width: 240rpx;
|
||||
height: 240rpx;
|
||||
}
|
||||
.zp-main-image-px.data-v-b7999e14 {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
.zp-main-title.data-v-b7999e14 {
|
||||
color: #aaaaaa;
|
||||
text-align: center;
|
||||
}
|
||||
.zp-main-title-rpx.data-v-b7999e14 {
|
||||
font-size: 28rpx;
|
||||
margin-top: 10rpx;
|
||||
padding: 0rpx 20rpx;
|
||||
}
|
||||
.zp-main-title-px.data-v-b7999e14 {
|
||||
font-size: 14px;
|
||||
margin-top: 5px;
|
||||
padding: 0px 10px;
|
||||
}
|
||||
.zp-main-error-btn.data-v-b7999e14 {
|
||||
border: solid 1px #dddddd;
|
||||
color: #aaaaaa;
|
||||
}
|
||||
.zp-main-error-btn-rpx.data-v-b7999e14 {
|
||||
font-size: 28rpx;
|
||||
padding: 8rpx 24rpx;
|
||||
border-radius: 6rpx;
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
.zp-main-error-btn-px.data-v-b7999e14 {
|
||||
font-size: 14px;
|
||||
padding: 4px 12px;
|
||||
border-radius: 3px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
+121
@@ -0,0 +1,121 @@
|
||||
"use strict";
|
||||
const uni_modules_zPaging_components_zPaging_js_zPagingStatic = require("../js/z-paging-static.js");
|
||||
const uni_modules_zPaging_components_zPaging_js_zPagingEnum = require("../js/z-paging-enum.js");
|
||||
const common_vendor = require("../../../../../common/vendor.js");
|
||||
const _sfc_main = {
|
||||
name: "z-paging-load-more",
|
||||
data() {
|
||||
return {
|
||||
M: uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.More,
|
||||
zTheme: {
|
||||
title: { white: "#efefef", black: "#a4a4a4" },
|
||||
line: { white: "#efefef", black: "#eeeeee" },
|
||||
circleBorder: { white: "#aaaaaa", black: "#c8c8c8" },
|
||||
circleBorderTop: { white: "#ffffff", black: "#444444" },
|
||||
flower: { white: uni_modules_zPaging_components_zPaging_js_zPagingStatic.zStatic.base64FlowerWhite, black: uni_modules_zPaging_components_zPaging_js_zPagingStatic.zStatic.base64Flower },
|
||||
indicator: { white: "#eeeeee", black: "#777777" }
|
||||
}
|
||||
};
|
||||
},
|
||||
props: ["zConfig"],
|
||||
computed: {
|
||||
ts() {
|
||||
return this.c.defaultThemeStyle;
|
||||
},
|
||||
// 底部加载更多配置
|
||||
c() {
|
||||
return this.zConfig || {};
|
||||
},
|
||||
// 底部加载更多文字
|
||||
ownLoadingMoreText() {
|
||||
return {
|
||||
[this.M.Default]: this.c.defaultText,
|
||||
[this.M.Loading]: this.c.loadingText,
|
||||
[this.M.NoMore]: this.c.noMoreText,
|
||||
[this.M.Fail]: this.c.failText
|
||||
}[this.finalStatus];
|
||||
},
|
||||
// 底部加载更多状态
|
||||
finalStatus() {
|
||||
if (this.c.defaultAsLoading && this.c.status === this.M.Default)
|
||||
return this.M.Loading;
|
||||
return this.c.status;
|
||||
},
|
||||
// 加载更多icon类型
|
||||
finalLoadingIconType() {
|
||||
return this.c.loadingIconType;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 点击了加载更多
|
||||
doClick() {
|
||||
this.$emit("doClick");
|
||||
}
|
||||
}
|
||||
};
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return common_vendor.e({
|
||||
a: !$options.c.hideContent
|
||||
}, !$options.c.hideContent ? common_vendor.e({
|
||||
b: $options.c.showNoMoreLine && $options.finalStatus === $data.M.NoMore
|
||||
}, $options.c.showNoMoreLine && $options.finalStatus === $data.M.NoMore ? {
|
||||
c: $options.c.unit === "rpx" ? 1 : "",
|
||||
d: $options.c.unit === "px" ? 1 : "",
|
||||
e: common_vendor.s({
|
||||
backgroundColor: $data.zTheme.line[$options.ts]
|
||||
}),
|
||||
f: common_vendor.s($options.c.noMoreLineCustomStyle)
|
||||
} : {}, {
|
||||
g: $options.finalStatus === $data.M.Loading && !!$options.c.loadingIconCustomImage
|
||||
}, $options.finalStatus === $data.M.Loading && !!$options.c.loadingIconCustomImage ? {
|
||||
h: $options.c.loadingIconCustomImage,
|
||||
i: common_vendor.s($options.c.iconCustomStyle),
|
||||
j: $options.c.loadingAnimated ? 1 : "",
|
||||
k: $options.c.unit === "rpx" ? 1 : "",
|
||||
l: $options.c.unit === "px" ? 1 : ""
|
||||
} : {}, {
|
||||
m: $options.finalStatus === $data.M.Loading && $options.finalLoadingIconType === "flower" && !$options.c.loadingIconCustomImage.length
|
||||
}, $options.finalStatus === $data.M.Loading && $options.finalLoadingIconType === "flower" && !$options.c.loadingIconCustomImage.length ? {
|
||||
n: $options.c.unit === "rpx" ? 1 : "",
|
||||
o: $options.c.unit === "px" ? 1 : "",
|
||||
p: common_vendor.s($options.c.iconCustomStyle),
|
||||
q: $data.zTheme.flower[$options.ts]
|
||||
} : {}, {
|
||||
r: $options.finalStatus === $data.M.Loading && $options.finalLoadingIconType === "circle" && !$options.c.loadingIconCustomImage.length
|
||||
}, $options.finalStatus === $data.M.Loading && $options.finalLoadingIconType === "circle" && !$options.c.loadingIconCustomImage.length ? {
|
||||
s: $options.c.unit === "rpx" ? 1 : "",
|
||||
t: $options.c.unit === "px" ? 1 : "",
|
||||
v: common_vendor.s({
|
||||
borderColor: $data.zTheme.circleBorder[$options.ts],
|
||||
borderTopColor: $data.zTheme.circleBorderTop[$options.ts]
|
||||
}),
|
||||
w: common_vendor.s($options.c.iconCustomStyle)
|
||||
} : {}, {
|
||||
x: !$options.c.isChat || !$options.c.chatDefaultAsLoading && $options.finalStatus === $data.M.Default || $options.finalStatus === $data.M.Fail
|
||||
}, !$options.c.isChat || !$options.c.chatDefaultAsLoading && $options.finalStatus === $data.M.Default || $options.finalStatus === $data.M.Fail ? {
|
||||
y: common_vendor.t($options.ownLoadingMoreText),
|
||||
z: $options.c.unit === "rpx" ? 1 : "",
|
||||
A: $options.c.unit === "px" ? 1 : "",
|
||||
B: common_vendor.s({
|
||||
color: $data.zTheme.title[$options.ts]
|
||||
}),
|
||||
C: common_vendor.s($options.c.titleCustomStyle)
|
||||
} : {}, {
|
||||
D: $options.c.showNoMoreLine && $options.finalStatus === $data.M.NoMore
|
||||
}, $options.c.showNoMoreLine && $options.finalStatus === $data.M.NoMore ? {
|
||||
E: $options.c.unit === "rpx" ? 1 : "",
|
||||
F: $options.c.unit === "px" ? 1 : "",
|
||||
G: common_vendor.s({
|
||||
backgroundColor: $data.zTheme.line[$options.ts]
|
||||
}),
|
||||
H: common_vendor.s($options.c.noMoreLineCustomStyle)
|
||||
} : {}) : {}, {
|
||||
I: $options.c.unit === "rpx" ? 1 : "",
|
||||
J: $options.c.unit === "px" ? 1 : "",
|
||||
K: common_vendor.s($options.c.customStyle),
|
||||
L: common_vendor.o((...args) => $options.doClick && $options.doClick(...args))
|
||||
});
|
||||
}
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-8cc5c400"]]);
|
||||
wx.createComponent(Component);
|
||||
//# sourceMappingURL=../../../../../../.sourcemap/mp-weixin/uni_modules/z-paging/components/z-paging/components/z-paging-load-more.js.map
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
+1
@@ -0,0 +1 @@
|
||||
<view class="{{['zp-l-container', 'data-v-8cc5c400', I && 'zp-l-container-rpx', J && 'zp-l-container-px']}}" style="{{K}}" bindtap="{{L}}"><block wx:if="{{a}}"><text wx:if="{{b}}" class="{{['data-v-8cc5c400', c && 'zp-l-line-rpx', d && 'zp-l-line-px']}}" style="{{e + ';' + f}}"/><image wx:if="{{g}}" src="{{h}}" style="{{i}}" class="{{['data-v-8cc5c400', 'zp-l-line-loading-custom-image', j && 'zp-l-line-loading-custom-image-animated', k && 'zp-l-line-loading-custom-image-rpx', l && 'zp-l-line-loading-custom-image-px']}}"/><image wx:if="{{m}}" class="{{['data-v-8cc5c400', 'zp-line-loading-image', n && 'zp-line-loading-image-rpx', o && 'zp-line-loading-image-px']}}" style="{{p}}" src="{{q}}"/><text wx:if="{{r}}" class="{{['zp-l-circle-loading-view', 'data-v-8cc5c400', s && 'zp-l-circle-loading-view-rpx', t && 'zp-l-circle-loading-view-px']}}" style="{{v + ';' + w}}"/><text wx:if="{{x}}" class="{{['data-v-8cc5c400', z && 'zp-l-text-rpx', A && 'zp-l-text-px']}}" style="{{B + ';' + C}}">{{y}}</text><text wx:if="{{D}}" class="{{['data-v-8cc5c400', E && 'zp-l-line-rpx', F && 'zp-l-line-px']}}" style="{{G + ';' + H}}"/></block></view>
|
||||
+118
@@ -0,0 +1,118 @@
|
||||
/* [z-paging]公用的静态css资源 */
|
||||
.zp-line-loading-image.data-v-8cc5c400 {
|
||||
|
||||
animation: loading-flower-8cc5c400 1s steps(12) infinite;
|
||||
|
||||
color: #666666;
|
||||
}
|
||||
.zp-line-loading-image-rpx.data-v-8cc5c400 {
|
||||
margin-right: 8rpx;
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
}
|
||||
.zp-line-loading-image-px.data-v-8cc5c400 {
|
||||
margin-right: 4px;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
}
|
||||
.zp-loading-image-ios-rpx.data-v-8cc5c400 {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
.zp-loading-image-ios-px.data-v-8cc5c400 {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.zp-loading-image-android-rpx.data-v-8cc5c400 {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
}
|
||||
.zp-loading-image-android-px.data-v-8cc5c400 {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
}
|
||||
@keyframes loading-flower-8cc5c400 {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
}
|
||||
.zp-l-container.data-v-8cc5c400 {
|
||||
|
||||
clear: both;
|
||||
display: flex;
|
||||
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.zp-l-container-rpx.data-v-8cc5c400 {
|
||||
height: 80rpx;
|
||||
font-size: 27rpx;
|
||||
}
|
||||
.zp-l-container-px.data-v-8cc5c400 {
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.zp-l-line-loading-custom-image.data-v-8cc5c400 {
|
||||
color: #a4a4a4;
|
||||
}
|
||||
.zp-l-line-loading-custom-image-rpx.data-v-8cc5c400 {
|
||||
margin-right: 8rpx;
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
.zp-l-line-loading-custom-image-px.data-v-8cc5c400 {
|
||||
margin-right: 4px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
.zp-l-line-loading-custom-image-animated.data-v-8cc5c400{
|
||||
|
||||
animation: loading-circle-8cc5c400 1s linear infinite;
|
||||
}
|
||||
.zp-l-circle-loading-view.data-v-8cc5c400 {
|
||||
border: 3rpx solid #dddddd;
|
||||
border-radius: 50%;
|
||||
|
||||
animation: loading-circle-8cc5c400 1s linear infinite;
|
||||
}
|
||||
.zp-l-circle-loading-view-rpx.data-v-8cc5c400 {
|
||||
margin-right: 8rpx;
|
||||
width: 23rpx;
|
||||
height: 23rpx;
|
||||
}
|
||||
.zp-l-circle-loading-view-px.data-v-8cc5c400 {
|
||||
margin-right: 4px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
.zp-l-text-rpx.data-v-8cc5c400 {
|
||||
font-size: 30rpx;
|
||||
margin: 0rpx 6rpx;
|
||||
}
|
||||
.zp-l-text-px.data-v-8cc5c400 {
|
||||
font-size: 15px;
|
||||
margin: 0px 3px;
|
||||
}
|
||||
.zp-l-line-rpx.data-v-8cc5c400 {
|
||||
height: 1px;
|
||||
width: 100rpx;
|
||||
margin: 0rpx 10rpx;
|
||||
}
|
||||
.zp-l-line-px.data-v-8cc5c400 {
|
||||
height: 1px;
|
||||
width: 50px;
|
||||
margin: 0rpx 5px;
|
||||
}
|
||||
@keyframes loading-circle-8cc5c400 {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
unpackage/dist/dev/mp-weixin/uni_modules/z-paging/components/z-paging/components/z-paging-refresh.js
Vendored
+158
@@ -0,0 +1,158 @@
|
||||
"use strict";
|
||||
const uni_modules_zPaging_components_zPaging_js_zPagingStatic = require("../js/z-paging-static.js");
|
||||
const uni_modules_zPaging_components_zPaging_js_zPagingUtils = require("../js/z-paging-utils.js");
|
||||
const uni_modules_zPaging_components_zPaging_js_zPagingEnum = require("../js/z-paging-enum.js");
|
||||
const common_vendor = require("../../../../../common/vendor.js");
|
||||
const _sfc_main = {
|
||||
name: "z-paging-refresh",
|
||||
data() {
|
||||
return {
|
||||
R: uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.Refresher,
|
||||
refresherTimeText: "",
|
||||
zTheme: {
|
||||
title: { white: "#efefef", black: "#555555" },
|
||||
arrow: { white: uni_modules_zPaging_components_zPaging_js_zPagingStatic.zStatic.base64ArrowWhite, black: uni_modules_zPaging_components_zPaging_js_zPagingStatic.zStatic.base64Arrow },
|
||||
flower: { white: uni_modules_zPaging_components_zPaging_js_zPagingStatic.zStatic.base64FlowerWhite, black: uni_modules_zPaging_components_zPaging_js_zPagingStatic.zStatic.base64Flower },
|
||||
success: { white: uni_modules_zPaging_components_zPaging_js_zPagingStatic.zStatic.base64SuccessWhite, black: uni_modules_zPaging_components_zPaging_js_zPagingStatic.zStatic.base64Success },
|
||||
indicator: { white: "#eeeeee", black: "#777777" }
|
||||
}
|
||||
};
|
||||
},
|
||||
props: [
|
||||
"status",
|
||||
"defaultThemeStyle",
|
||||
"defaultText",
|
||||
"pullingText",
|
||||
"refreshingText",
|
||||
"completeText",
|
||||
"goF2Text",
|
||||
"defaultImg",
|
||||
"pullingImg",
|
||||
"refreshingImg",
|
||||
"completeImg",
|
||||
"refreshingAnimated",
|
||||
"showUpdateTime",
|
||||
"updateTimeKey",
|
||||
"imgStyle",
|
||||
"titleStyle",
|
||||
"updateTimeStyle",
|
||||
"updateTimeTextMap",
|
||||
"unit",
|
||||
"isIos"
|
||||
],
|
||||
computed: {
|
||||
ts() {
|
||||
return this.defaultThemeStyle;
|
||||
},
|
||||
// 当前状态Map
|
||||
statusTextMap() {
|
||||
this.updateTime();
|
||||
const { R, defaultText, pullingText, refreshingText, completeText, goF2Text } = this;
|
||||
return {
|
||||
[R.Default]: defaultText,
|
||||
[R.ReleaseToRefresh]: pullingText,
|
||||
[R.Loading]: refreshingText,
|
||||
[R.Complete]: completeText,
|
||||
[R.GoF2]: goF2Text
|
||||
};
|
||||
},
|
||||
// 当前状态文字
|
||||
currentTitle() {
|
||||
return this.statusTextMap[this.status] || this.defaultText;
|
||||
},
|
||||
// 左侧图片class
|
||||
leftImageClass() {
|
||||
const preSizeClass = `zp-r-left-image-pre-size-${this.unit}`;
|
||||
if (this.status === this.R.Complete)
|
||||
return preSizeClass;
|
||||
return `zp-r-left-image ${preSizeClass} ${this.status === this.R.Default ? "zp-r-arrow-down" : "zp-r-arrow-top"}`;
|
||||
},
|
||||
// 左侧图片style
|
||||
leftImageStyle() {
|
||||
const showUpdateTime = this.showUpdateTime;
|
||||
const size = showUpdateTime ? uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.addUnit(36, this.unit) : uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.addUnit(34, this.unit);
|
||||
return { width: size, height: size, "margin-right": showUpdateTime ? uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.addUnit(20, this.unit) : uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.addUnit(9, this.unit) };
|
||||
},
|
||||
// 左侧图片src
|
||||
leftImageSrc() {
|
||||
const R = this.R;
|
||||
const status = this.status;
|
||||
if (status === R.Default) {
|
||||
if (!!this.defaultImg)
|
||||
return this.defaultImg;
|
||||
return this.zTheme.arrow[this.ts];
|
||||
} else if (status === R.ReleaseToRefresh) {
|
||||
if (!!this.pullingImg)
|
||||
return this.pullingImg;
|
||||
if (!!this.defaultImg)
|
||||
return this.defaultImg;
|
||||
return this.zTheme.arrow[this.ts];
|
||||
} else if (status === R.Loading) {
|
||||
if (!!this.refreshingImg)
|
||||
return this.refreshingImg;
|
||||
return this.zTheme.flower[this.ts];
|
||||
} else if (status === R.Complete) {
|
||||
if (!!this.completeImg)
|
||||
return this.completeImg;
|
||||
return this.zTheme.success[this.ts];
|
||||
} else if (status === R.GoF2) {
|
||||
return this.zTheme.arrow[this.ts];
|
||||
}
|
||||
return "";
|
||||
},
|
||||
// 右侧文字style
|
||||
rightTextStyle() {
|
||||
let stl = {};
|
||||
stl["color"] = this.zTheme.title[this.ts];
|
||||
stl["font-size"] = uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.addUnit(30, this.unit);
|
||||
return stl;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 添加单位
|
||||
addUnit(value, unit) {
|
||||
return uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.addUnit(value, unit);
|
||||
},
|
||||
// 更新下拉刷新时间
|
||||
updateTime() {
|
||||
if (this.showUpdateTime) {
|
||||
this.refresherTimeText = uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.getRefesrherFormatTimeByKey(this.updateTimeKey, this.updateTimeTextMap);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return common_vendor.e({
|
||||
a: $props.status !== $data.R.Loading
|
||||
}, $props.status !== $data.R.Loading ? {
|
||||
b: common_vendor.n($options.leftImageClass),
|
||||
c: common_vendor.s($options.leftImageStyle),
|
||||
d: common_vendor.s($props.imgStyle),
|
||||
e: $options.leftImageSrc
|
||||
} : {
|
||||
f: $props.refreshingAnimated ? 1 : "",
|
||||
g: $props.unit === "rpx" ? 1 : "",
|
||||
h: $props.unit === "px" ? 1 : "",
|
||||
i: common_vendor.s($options.leftImageStyle),
|
||||
j: common_vendor.s($props.imgStyle),
|
||||
k: $options.leftImageSrc
|
||||
}, {
|
||||
l: common_vendor.t($options.currentTitle),
|
||||
m: common_vendor.s($options.rightTextStyle),
|
||||
n: common_vendor.s($props.titleStyle),
|
||||
o: $props.showUpdateTime && $data.refresherTimeText.length
|
||||
}, $props.showUpdateTime && $data.refresherTimeText.length ? {
|
||||
p: common_vendor.t($data.refresherTimeText),
|
||||
q: $props.unit === "rpx" ? 1 : "",
|
||||
r: $props.unit === "px" ? 1 : "",
|
||||
s: common_vendor.s({
|
||||
color: $data.zTheme.title[$options.ts]
|
||||
}),
|
||||
t: common_vendor.s($props.updateTimeStyle)
|
||||
} : {}, {
|
||||
v: common_vendor.n($props.showUpdateTime ? "zp-r-container zp-r-container-padding" : "zp-r-container")
|
||||
});
|
||||
}
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-00a16504"]]);
|
||||
wx.createComponent(Component);
|
||||
//# sourceMappingURL=../../../../../../.sourcemap/mp-weixin/uni_modules/z-paging/components/z-paging/components/z-paging-refresh.js.map
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
+1
@@ -0,0 +1 @@
|
||||
<view class="data-v-00a16504" style="height:100%"><view class="{{['data-v-00a16504', v]}}"><view class="zp-r-left data-v-00a16504"><image wx:if="{{a}}" class="{{['data-v-00a16504', b]}}" style="{{c + ';' + d}}" src="{{e}}"/><image wx:else class="{{['data-v-00a16504', f && 'zp-line-loading-image', 'zp-r-left-image', g && 'zp-r-left-image-pre-size-rpx', h && 'zp-r-left-image-pre-size-px']}}" style="{{i + ';' + j}}" src="{{k}}"/></view><view class="zp-r-right data-v-00a16504"><text class="zp-r-right-text data-v-00a16504" style="{{m + ';' + n}}">{{l}}</text><text wx:if="{{o}}" class="{{['zp-r-right-text', 'data-v-00a16504', q && 'zp-r-right-time-text-rpx', r && 'zp-r-right-time-text-px']}}" style="{{s + ';' + t}}">{{p}}</text></view></view></view>
|
||||
+99
@@ -0,0 +1,99 @@
|
||||
/* [z-paging]公用的静态css资源 */
|
||||
.zp-line-loading-image.data-v-00a16504 {
|
||||
|
||||
animation: loading-flower-00a16504 1s steps(12) infinite;
|
||||
|
||||
color: #666666;
|
||||
}
|
||||
.zp-line-loading-image-rpx.data-v-00a16504 {
|
||||
margin-right: 8rpx;
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
}
|
||||
.zp-line-loading-image-px.data-v-00a16504 {
|
||||
margin-right: 4px;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
}
|
||||
.zp-loading-image-ios-rpx.data-v-00a16504 {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
.zp-loading-image-ios-px.data-v-00a16504 {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.zp-loading-image-android-rpx.data-v-00a16504 {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
}
|
||||
.zp-loading-image-android-px.data-v-00a16504 {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
}
|
||||
@keyframes loading-flower-00a16504 {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
}
|
||||
.zp-r-container.data-v-00a16504 {
|
||||
|
||||
display: flex;
|
||||
height: 100%;
|
||||
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.zp-r-container-padding.data-v-00a16504 {
|
||||
}
|
||||
.zp-r-left.data-v-00a16504 {
|
||||
|
||||
display: flex;
|
||||
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.zp-r-left-image.data-v-00a16504 {
|
||||
transition-duration: .2s;
|
||||
transition-property: transform;
|
||||
color: #666666;
|
||||
}
|
||||
.zp-r-left-image-pre-size-rpx.data-v-00a16504 {
|
||||
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.zp-r-left-image-pre-size-px.data-v-00a16504 {
|
||||
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.zp-r-arrow-top.data-v-00a16504 {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
.zp-r-arrow-down.data-v-00a16504 {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.zp-r-right.data-v-00a16504 {
|
||||
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.zp-r-right-time-text-rpx.data-v-00a16504 {
|
||||
margin-top: 10rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.zp-r-right-time-text-px.data-v-00a16504 {
|
||||
margin-top: 5px;
|
||||
font-size: 13px;
|
||||
}
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
"use strict";
|
||||
const zLocalConfig = {};
|
||||
exports.zLocalConfig = zLocalConfig;
|
||||
//# sourceMappingURL=../../../../../../.sourcemap/mp-weixin/uni_modules/z-paging/components/z-paging/config/index.js.map
|
||||
+65
@@ -0,0 +1,65 @@
|
||||
"use strict";
|
||||
const en = {
|
||||
"zp.refresher.default": "Pull down to refresh",
|
||||
"zp.refresher.pulling": "Release to refresh",
|
||||
"zp.refresher.refreshing": "Refreshing...",
|
||||
"zp.refresher.complete": "Refresh succeeded",
|
||||
"zp.refresher.f2": "Refresh to enter 2f",
|
||||
"zp.loadingMore.default": "Click to load more",
|
||||
"zp.loadingMore.loading": "Loading...",
|
||||
"zp.loadingMore.noMore": "No more data",
|
||||
"zp.loadingMore.fail": "Load failed,click to reload",
|
||||
"zp.emptyView.title": "No data",
|
||||
"zp.emptyView.reload": "Reload",
|
||||
"zp.emptyView.error": "Sorry,load failed",
|
||||
"zp.refresherUpdateTime.title": "Last update: ",
|
||||
"zp.refresherUpdateTime.none": "None",
|
||||
"zp.refresherUpdateTime.today": "Today",
|
||||
"zp.refresherUpdateTime.yesterday": "Yesterday",
|
||||
"zp.systemLoading.title": "Loading..."
|
||||
};
|
||||
const zhHans = {
|
||||
"zp.refresher.default": "继续下拉刷新",
|
||||
"zp.refresher.pulling": "松开立即刷新",
|
||||
"zp.refresher.refreshing": "正在刷新...",
|
||||
"zp.refresher.complete": "刷新成功",
|
||||
"zp.refresher.f2": "松手进入二楼",
|
||||
"zp.loadingMore.default": "点击加载更多",
|
||||
"zp.loadingMore.loading": "正在加载...",
|
||||
"zp.loadingMore.noMore": "没有更多了",
|
||||
"zp.loadingMore.fail": "加载失败，点击重新加载",
|
||||
"zp.emptyView.title": "没有数据哦~",
|
||||
"zp.emptyView.reload": "重新加载",
|
||||
"zp.emptyView.error": "很抱歉，加载失败",
|
||||
"zp.refresherUpdateTime.title": "最后更新：",
|
||||
"zp.refresherUpdateTime.none": "无",
|
||||
"zp.refresherUpdateTime.today": "今天",
|
||||
"zp.refresherUpdateTime.yesterday": "昨天",
|
||||
"zp.systemLoading.title": "加载中..."
|
||||
};
|
||||
const zhHant = {
|
||||
"zp.refresher.default": "繼續下拉重繪",
|
||||
"zp.refresher.pulling": "鬆開立即重繪",
|
||||
"zp.refresher.refreshing": "正在重繪...",
|
||||
"zp.refresher.complete": "重繪成功",
|
||||
"zp.refresher.f2": "鬆手進入二樓",
|
||||
"zp.loadingMore.default": "點擊加載更多",
|
||||
"zp.loadingMore.loading": "正在加載...",
|
||||
"zp.loadingMore.noMore": "沒有更多了",
|
||||
"zp.loadingMore.fail": "加載失敗，點擊重新加載",
|
||||
"zp.emptyView.title": "沒有數據哦~",
|
||||
"zp.emptyView.reload": "重新加載",
|
||||
"zp.emptyView.error": "很抱歉，加載失敗",
|
||||
"zp.refresherUpdateTime.title": "最後更新：",
|
||||
"zp.refresherUpdateTime.none": "無",
|
||||
"zp.refresherUpdateTime.today": "今天",
|
||||
"zp.refresherUpdateTime.yesterday": "昨天",
|
||||
"zp.systemLoading.title": "加載中..."
|
||||
};
|
||||
const messages = {
|
||||
en,
|
||||
"zh-Hans": zhHans,
|
||||
"zh-Hant": zhHant
|
||||
};
|
||||
exports.messages = messages;
|
||||
//# sourceMappingURL=../../../../../../.sourcemap/mp-weixin/uni_modules/z-paging/components/z-paging/i18n/index.js.map
|
||||
Vendored
+121
@@ -0,0 +1,121 @@
|
||||
"use strict";
|
||||
const uni_modules_zPaging_components_zPaging_js_zPagingUtils = require("../z-paging-utils.js");
|
||||
const backToTopModule = {
|
||||
props: {
|
||||
// 自动显示点击返回顶部按钮，默认为否
|
||||
autoShowBackToTop: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("autoShowBackToTop", false)
|
||||
},
|
||||
// 点击返回顶部按钮显示/隐藏的阈值(滚动距离)，单位为px，默认为400rpx
|
||||
backToTopThreshold: {
|
||||
type: [Number, String],
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("backToTopThreshold", "400rpx")
|
||||
},
|
||||
// 点击返回顶部按钮的自定义图片地址，默认使用z-paging内置的图片
|
||||
backToTopImg: {
|
||||
type: String,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("backToTopImg", "")
|
||||
},
|
||||
// 点击返回顶部按钮返回到顶部时是否展示过渡动画，默认为是
|
||||
backToTopWithAnimate: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("backToTopWithAnimate", true)
|
||||
},
|
||||
// 点击返回顶部按钮与底部的距离，注意添加单位px或rpx，默认为160rpx
|
||||
backToTopBottom: {
|
||||
type: [Number, String],
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("backToTopBottom", "160rpx")
|
||||
},
|
||||
// 点击返回顶部按钮的自定义样式
|
||||
backToTopStyle: {
|
||||
type: Object,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("backToTopStyle", {})
|
||||
},
|
||||
// iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向，默认为是
|
||||
enableBackToTop: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("enableBackToTop", true)
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 点击返回顶部的class
|
||||
backToTopClass: "zp-back-to-top zp-back-to-top-hide",
|
||||
// 上次点击返回顶部的时间
|
||||
lastBackToTopShowTime: 0,
|
||||
// 点击返回顶部显示的class是否在展示中，使得按钮展示/隐藏过度效果更自然
|
||||
showBackToTopClass: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
backToTopThresholdUnitConverted() {
|
||||
return uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.addUnit(this.backToTopThreshold, this.unit);
|
||||
},
|
||||
backToTopBottomUnitConverted() {
|
||||
return uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.addUnit(this.backToTopBottom, this.unit);
|
||||
},
|
||||
finalEnableBackToTop() {
|
||||
return this.usePageScroll ? false : this.enableBackToTop;
|
||||
},
|
||||
finalBackToTopThreshold() {
|
||||
return uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.convertToPx(this.backToTopThresholdUnitConverted);
|
||||
},
|
||||
finalBackToTopStyle() {
|
||||
const backToTopStyle = this.backToTopStyle;
|
||||
if (!backToTopStyle.bottom) {
|
||||
backToTopStyle.bottom = this.windowBottom + uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.convertToPx(this.backToTopBottomUnitConverted) + "px";
|
||||
}
|
||||
if (!backToTopStyle.position) {
|
||||
backToTopStyle.position = this.usePageScroll ? "fixed" : "absolute";
|
||||
}
|
||||
return backToTopStyle;
|
||||
},
|
||||
finalBackToTopClass() {
|
||||
return `${this.backToTopClass} zp-back-to-top-${this.unit}`;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 点击了返回顶部
|
||||
_backToTopClick() {
|
||||
let callbacked = false;
|
||||
this.$emit("backToTopClick", (toTop) => {
|
||||
(toTop === void 0 || toTop === true) && this._handleToTop();
|
||||
callbacked = true;
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
!callbacked && this._handleToTop();
|
||||
});
|
||||
},
|
||||
// 处理滚动到顶部（聊天记录模式中为滚动到底部）
|
||||
_handleToTop() {
|
||||
!this.backToTopWithAnimate && this._checkShouldShowBackToTop(0);
|
||||
!this.useChatRecordMode ? this.scrollToTop(this.backToTopWithAnimate) : this.scrollToBottom(this.backToTopWithAnimate);
|
||||
},
|
||||
// 判断是否要显示返回顶部按钮
|
||||
_checkShouldShowBackToTop(scrollTop) {
|
||||
if (!this.autoShowBackToTop) {
|
||||
this.showBackToTopClass = false;
|
||||
return;
|
||||
}
|
||||
if (scrollTop > this.finalBackToTopThreshold) {
|
||||
if (!this.showBackToTopClass) {
|
||||
this.showBackToTopClass = true;
|
||||
this.lastBackToTopShowTime = (/* @__PURE__ */ new Date()).getTime();
|
||||
uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.delay(() => {
|
||||
this.backToTopClass = "zp-back-to-top zp-back-to-top-show";
|
||||
}, 300);
|
||||
}
|
||||
} else {
|
||||
if (this.showBackToTopClass) {
|
||||
this.backToTopClass = "zp-back-to-top zp-back-to-top-hide";
|
||||
uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.delay(() => {
|
||||
this.showBackToTopClass = false;
|
||||
}, (/* @__PURE__ */ new Date()).getTime() - this.lastBackToTopShowTime < 500 ? 0 : 300);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
exports.backToTopModule = backToTopModule;
|
||||
//# sourceMappingURL=../../../../../../../.sourcemap/mp-weixin/uni_modules/z-paging/components/z-paging/js/modules/back-to-top.js.map
|
||||
unpackage/dist/dev/mp-weixin/uni_modules/z-paging/components/z-paging/js/modules/chat-record-mode.js
Vendored
+136
@@ -0,0 +1,136 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../../../common/vendor.js");
|
||||
const uni_modules_zPaging_components_zPaging_js_zPagingUtils = require("../z-paging-utils.js");
|
||||
const chatRecordModerModule = {
|
||||
props: {
|
||||
// 使用聊天记录模式，默认为否
|
||||
useChatRecordMode: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("useChatRecordMode", false)
|
||||
},
|
||||
// 使用聊天记录模式时滚动到顶部后，列表垂直移动偏移距离。默认0rpx。单位px（暂时无效）
|
||||
chatRecordMoreOffset: {
|
||||
type: [Number, String],
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("chatRecordMoreOffset", "0rpx")
|
||||
},
|
||||
// 使用聊天记录模式时是否自动隐藏键盘：在用户触摸列表时候自动隐藏键盘，默认为是
|
||||
autoHideKeyboardWhenChat: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("autoHideKeyboardWhenChat", true)
|
||||
},
|
||||
// 使用聊天记录模式中键盘弹出时是否自动调整slot="bottom"高度，默认为是
|
||||
autoAdjustPositionWhenChat: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("autoAdjustPositionWhenChat", true)
|
||||
},
|
||||
// 使用聊天记录模式中键盘弹出时占位高度偏移距离。默认0rpx。单位px
|
||||
chatAdjustPositionOffset: {
|
||||
type: [Number, String],
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("chatAdjustPositionOffset", "0rpx")
|
||||
},
|
||||
// 使用聊天记录模式中键盘弹出时是否自动滚动到底部，默认为否
|
||||
autoToBottomWhenChat: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("autoToBottomWhenChat", false)
|
||||
},
|
||||
// 使用聊天记录模式中reload时是否显示chatLoading，默认为否
|
||||
showChatLoadingWhenReload: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("showChatLoadingWhenReload", false)
|
||||
},
|
||||
// 在聊天记录模式中滑动到顶部状态为默认状态时，以加载中的状态展示，默认为是。若设置为否，则默认会显示【点击加载更多】，然后才会显示loading
|
||||
chatLoadingMoreDefaultAsLoading: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("chatLoadingMoreDefaultAsLoading", true)
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 键盘高度
|
||||
keyboardHeight: 0,
|
||||
// 键盘高度是否未改变，此时占位高度变化不需要动画效果
|
||||
isKeyboardHeightChanged: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
finalChatRecordMoreOffset() {
|
||||
return uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.convertToPx(this.chatRecordMoreOffset);
|
||||
},
|
||||
finalChatAdjustPositionOffset() {
|
||||
return uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.convertToPx(this.chatAdjustPositionOffset);
|
||||
},
|
||||
// 聊天记录模式旋转180度style
|
||||
chatRecordRotateStyle() {
|
||||
let cellStyle;
|
||||
cellStyle = this.useChatRecordMode ? { transform: "scaleY(-1)" } : {};
|
||||
this.$emit("update:cellStyle", cellStyle);
|
||||
this.$emit("cellStyleChange", cellStyle);
|
||||
this.$nextTick(() => {
|
||||
if (this.isFirstPage && this.isChatRecordModeAndNotInversion) {
|
||||
this.$nextTick(() => {
|
||||
this._scrollToBottom(false);
|
||||
uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.delay(() => {
|
||||
this._scrollToBottom(false);
|
||||
uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.delay(() => {
|
||||
this._scrollToBottom(false);
|
||||
}, 50);
|
||||
}, 50);
|
||||
});
|
||||
}
|
||||
});
|
||||
return cellStyle;
|
||||
},
|
||||
// 是否是聊天记录列表并且有配置transform
|
||||
isChatRecordModeHasTransform() {
|
||||
return this.useChatRecordMode && this.chatRecordRotateStyle && this.chatRecordRotateStyle.transform;
|
||||
},
|
||||
// 是否是聊天记录列表并且列表未倒置
|
||||
isChatRecordModeAndNotInversion() {
|
||||
return this.isChatRecordModeHasTransform && this.chatRecordRotateStyle.transform === "scaleY(1)";
|
||||
},
|
||||
// 是否是聊天记录列表并且列表倒置
|
||||
isChatRecordModeAndInversion() {
|
||||
return this.isChatRecordModeHasTransform && this.chatRecordRotateStyle.transform === "scaleY(-1)";
|
||||
},
|
||||
// 最终的聊天记录模式中底部安全区域的高度，如果开启了底部安全区域并且键盘未弹出，则添加底部区域高度
|
||||
chatRecordModeSafeAreaBottom() {
|
||||
return this.safeAreaInsetBottom && !this.keyboardHeight ? this.safeAreaBottom : 0;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.useChatRecordMode) {
|
||||
common_vendor.index.onKeyboardHeightChange(this._handleKeyboardHeightChange);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 添加聊天记录
|
||||
addChatRecordData(data, toBottom = true, toBottomWithAnimate = true) {
|
||||
if (!this.useChatRecordMode)
|
||||
return;
|
||||
this.isTotalChangeFromAddData = true;
|
||||
this.addDataFromTop(data, toBottom, toBottomWithAnimate);
|
||||
},
|
||||
// 手动触发滚动到顶部加载更多，聊天记录模式时有效
|
||||
doChatRecordLoadMore() {
|
||||
this.useChatRecordMode && this._onLoadingMore("click");
|
||||
},
|
||||
// 处理键盘高度变化
|
||||
_handleKeyboardHeightChange(res) {
|
||||
this.$emit("keyboardHeightChange", res);
|
||||
if (this.autoAdjustPositionWhenChat) {
|
||||
this.isKeyboardHeightChanged = true;
|
||||
this.keyboardHeight = res.height > 0 ? res.height + this.finalChatAdjustPositionOffset : res.height;
|
||||
}
|
||||
if (this.autoToBottomWhenChat && this.keyboardHeight > 0) {
|
||||
uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.delay(() => {
|
||||
this.scrollToBottom(false);
|
||||
uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.delay(() => {
|
||||
this.scrollToBottom(false);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
exports.chatRecordModerModule = chatRecordModerModule;
|
||||
//# sourceMappingURL=../../../../../../../.sourcemap/mp-weixin/uni_modules/z-paging/components/z-paging/js/modules/chat-record-mode.js.map
|
||||
Vendored
+99
@@ -0,0 +1,99 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../../../common/vendor.js");
|
||||
const uni_modules_zPaging_components_zPaging_js_zPagingUtils = require("../z-paging-utils.js");
|
||||
const commonLayoutModule = {
|
||||
data() {
|
||||
return {
|
||||
systemInfo: null,
|
||||
cssSafeAreaInsetBottom: -1,
|
||||
isReadyDestroy: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 顶部可用距离
|
||||
windowTop() {
|
||||
if (!this.systemInfo)
|
||||
return 0;
|
||||
return this.systemInfo.windowTop || 0;
|
||||
},
|
||||
// 底部安全区域高度
|
||||
safeAreaBottom() {
|
||||
if (!this.systemInfo)
|
||||
return 0;
|
||||
let safeAreaBottom = 0;
|
||||
safeAreaBottom = Math.max(this.cssSafeAreaInsetBottom, 0);
|
||||
return safeAreaBottom;
|
||||
},
|
||||
// 是否是比较老的webview，在一些老的webview中，需要进行一些特殊处理
|
||||
isOldWebView() {
|
||||
try {
|
||||
const systemInfos = uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.getSystemInfoSync(true).system.split(" ");
|
||||
const deviceType = systemInfos[0];
|
||||
const version = parseInt(systemInfos[1]);
|
||||
if (deviceType === "iOS" && version <= 10 || deviceType === "Android" && version <= 6) {
|
||||
return true;
|
||||
}
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
// 当前组件的$slots，兼容不同平台
|
||||
zSlots() {
|
||||
return this.$slots;
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.isReadyDestroy = true;
|
||||
},
|
||||
unmounted() {
|
||||
this.isReadyDestroy = true;
|
||||
},
|
||||
methods: {
|
||||
// 更新fixed模式下z-paging的布局
|
||||
updateFixedLayout() {
|
||||
this.fixed && this.$nextTick(() => {
|
||||
this.systemInfo = uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.getSystemInfoSync();
|
||||
});
|
||||
},
|
||||
// 获取节点尺寸
|
||||
_getNodeClientRect(select, inDom = true, scrollOffset = false) {
|
||||
if (this.isReadyDestroy) {
|
||||
return Promise.resolve(false);
|
||||
}
|
||||
let res = !!inDom ? common_vendor.index.createSelectorQuery().in(inDom === true ? this : inDom) : common_vendor.index.createSelectorQuery();
|
||||
scrollOffset ? res.select(select).scrollOffset() : res.select(select).boundingClientRect();
|
||||
return new Promise((resolve, reject) => {
|
||||
res.exec((data) => {
|
||||
resolve(data && data != "" && data != void 0 && data.length ? data : false);
|
||||
});
|
||||
});
|
||||
},
|
||||
// 获取slot="left"和slot="right"宽度并且更新布局
|
||||
_updateLeftAndRightWidth(targetStyle, parentNodePrefix) {
|
||||
this.$nextTick(() => {
|
||||
let delayTime = 0;
|
||||
setTimeout(() => {
|
||||
["left", "right"].map((position) => {
|
||||
this._getNodeClientRect(`.${parentNodePrefix}-${position}`).then((res) => {
|
||||
this.$set(targetStyle, position, res ? res[0].width + "px" : "0px");
|
||||
});
|
||||
});
|
||||
}, delayTime);
|
||||
});
|
||||
},
|
||||
// 通过获取css设置的底部安全区域占位view高度设置bottom距离（直接通过systemInfo在部分平台上无法获取到底部安全区域）
|
||||
_getCssSafeAreaInsetBottom(success) {
|
||||
this._getNodeClientRect(".zp-safe-area-inset-bottom").then((res) => {
|
||||
this.cssSafeAreaInsetBottom = res ? res[0].height : -1;
|
||||
res && success && success();
|
||||
});
|
||||
},
|
||||
// 同步获取系统信息，兼容不同平台（供z-paging-swiper使用）
|
||||
_getSystemInfoSync(useCache = false) {
|
||||
return uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.getSystemInfoSync(useCache);
|
||||
}
|
||||
}
|
||||
};
|
||||
exports.commonLayoutModule = commonLayoutModule;
|
||||
//# sourceMappingURL=../../../../../../../.sourcemap/mp-weixin/uni_modules/z-paging/components/z-paging/js/modules/common-layout.js.map
|
||||
Vendored
+654
@@ -0,0 +1,654 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../../../common/vendor.js");
|
||||
const uni_modules_zPaging_components_zPaging_js_zPagingUtils = require("../z-paging-utils.js");
|
||||
const uni_modules_zPaging_components_zPaging_js_zPagingConstant = require("../z-paging-constant.js");
|
||||
const uni_modules_zPaging_components_zPaging_js_zPagingEnum = require("../z-paging-enum.js");
|
||||
const uni_modules_zPaging_components_zPaging_js_zPagingInterceptor = require("../z-paging-interceptor.js");
|
||||
const dataHandleModule = {
|
||||
props: {
|
||||
// 自定义初始的pageNo，默认为1
|
||||
defaultPageNo: {
|
||||
type: Number,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("defaultPageNo", 1),
|
||||
observer: function(newVal) {
|
||||
this.pageNo = newVal;
|
||||
}
|
||||
},
|
||||
// 自定义pageSize，默认为10
|
||||
defaultPageSize: {
|
||||
type: Number,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("defaultPageSize", 10),
|
||||
validator: (value) => {
|
||||
if (value <= 0)
|
||||
uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.consoleErr("default-page-size必须大于0！");
|
||||
return value > 0;
|
||||
}
|
||||
},
|
||||
// 为保证数据一致，设置当前tab切换时的标识key，并在complete中传递相同key，若二者不一致，则complete将不会生效
|
||||
dataKey: {
|
||||
type: [Number, String, Object],
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("dataKey", null)
|
||||
},
|
||||
// 使用缓存，若开启将自动缓存第一页的数据，默认为否。请注意，因考虑到切换tab时不同tab数据不同的情况，默认仅会缓存组件首次加载时第一次请求到的数据，后续的下拉刷新操作不会更新缓存。
|
||||
useCache: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("useCache", false)
|
||||
},
|
||||
// 使用缓存时缓存的key，用于区分不同列表的缓存数据，useCache为true时必须设置，否则缓存无效
|
||||
cacheKey: {
|
||||
type: String,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("cacheKey", null)
|
||||
},
|
||||
// 缓存模式，默认仅会缓存组件首次加载时第一次请求到的数据，可设置为always，即代表总是缓存，每次列表刷新(下拉刷新、调用reload等)都会更新缓存
|
||||
cacheMode: {
|
||||
type: String,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("cacheMode", uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.CacheMode.Default)
|
||||
},
|
||||
// 自动注入的list名，可自动修改父view(包含ref="paging")中对应name的list值
|
||||
autowireListName: {
|
||||
type: String,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("autowireListName", "")
|
||||
},
|
||||
// 自动注入的query名，可自动调用父view(包含ref="paging")中的query方法
|
||||
autowireQueryName: {
|
||||
type: String,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("autowireQueryName", "")
|
||||
},
|
||||
// 获取分页数据Function，功能与@query类似。若设置了fetch则@query将不再触发
|
||||
fetch: {
|
||||
type: Function,
|
||||
default: null
|
||||
},
|
||||
// fetch的附加参数，fetch配置后有效
|
||||
fetchParams: {
|
||||
type: Object,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("fetchParams", null)
|
||||
},
|
||||
// z-paging mounted后自动调用reload方法(mounted后自动调用接口)，默认为是
|
||||
auto: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("auto", true)
|
||||
},
|
||||
// 用户下拉刷新时是否触发reload方法，默认为是
|
||||
reloadWhenRefresh: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("reloadWhenRefresh", true)
|
||||
},
|
||||
// reload时自动滚动到顶部，默认为是
|
||||
autoScrollToTopWhenReload: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("autoScrollToTopWhenReload", true)
|
||||
},
|
||||
// reload时立即自动清空原list，默认为是，若立即自动清空，则在reload之后、请求回调之前页面是空白的
|
||||
autoCleanListWhenReload: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("autoCleanListWhenReload", true)
|
||||
},
|
||||
// 列表刷新时自动显示下拉刷新view，默认为否
|
||||
showRefresherWhenReload: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("showRefresherWhenReload", false)
|
||||
},
|
||||
// 列表刷新时自动显示加载更多view，且为加载中状态，默认为否
|
||||
showLoadingMoreWhenReload: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("showLoadingMoreWhenReload", false)
|
||||
},
|
||||
// 组件created时立即触发reload(可解决一些情况下先看到页面再看到loading的问题)，auto为true时有效。为否时将在mounted+nextTick后触发reload，默认为否
|
||||
createdReload: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("createdReload", false)
|
||||
},
|
||||
// 本地分页时上拉加载更多延迟时间，单位为毫秒，默认200毫秒
|
||||
localPagingLoadingTime: {
|
||||
type: [Number, String],
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("localPagingLoadingTime", 200)
|
||||
},
|
||||
// 自动拼接complete中传过来的数组(使用聊天记录模式时无效)
|
||||
concat: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("concat", true)
|
||||
},
|
||||
// 请求失败是否触发reject，默认为是
|
||||
callNetworkReject: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("callNetworkReject", true)
|
||||
},
|
||||
// 父组件v-model所绑定的list的值
|
||||
value: {
|
||||
type: Array,
|
||||
default: function() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
modelValue: {
|
||||
type: Array,
|
||||
default: function() {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentData: [],
|
||||
totalData: [],
|
||||
realTotalData: [],
|
||||
totalLocalPagingList: [],
|
||||
dataPromiseResultMap: {
|
||||
reload: null,
|
||||
complete: null,
|
||||
localPaging: null
|
||||
},
|
||||
isSettingCacheList: false,
|
||||
pageNo: 1,
|
||||
currentRefreshPageSize: 0,
|
||||
isLocalPaging: false,
|
||||
isAddedData: false,
|
||||
isTotalChangeFromAddData: false,
|
||||
privateConcat: true,
|
||||
myParentQuery: -1,
|
||||
firstPageLoaded: false,
|
||||
pagingLoaded: false,
|
||||
loaded: false,
|
||||
isUserReload: true,
|
||||
fromEmptyViewReload: false,
|
||||
queryFrom: "",
|
||||
listRendering: false,
|
||||
isHandlingRefreshToPage: false,
|
||||
isFirstPageAndNoMore: false,
|
||||
totalDataChangeThrow: true
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
pageSize() {
|
||||
return this.defaultPageSize;
|
||||
},
|
||||
finalConcat() {
|
||||
return this.concat && this.privateConcat;
|
||||
},
|
||||
finalUseCache() {
|
||||
if (this.useCache && !this.cacheKey) {
|
||||
uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.consoleErr("use-cache为true时，必须设置cache-key，否则缓存无效！");
|
||||
}
|
||||
return this.useCache && !!this.cacheKey;
|
||||
},
|
||||
finalCacheKey() {
|
||||
return this.cacheKey ? `${uni_modules_zPaging_components_zPaging_js_zPagingConstant.c.cachePrefixKey}-${this.cacheKey}` : null;
|
||||
},
|
||||
isFirstPage() {
|
||||
return this.pageNo === this.defaultPageNo;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
totalData(newVal, oldVal) {
|
||||
this._totalDataChange(newVal, oldVal, this.totalDataChangeThrow);
|
||||
this.totalDataChangeThrow = true;
|
||||
},
|
||||
currentData(newVal, oldVal) {
|
||||
this._currentDataChange(newVal, oldVal);
|
||||
},
|
||||
useChatRecordMode(newVal, oldVal) {
|
||||
if (newVal) {
|
||||
this.nLoadingMoreFixedHeight = false;
|
||||
}
|
||||
},
|
||||
value: {
|
||||
handler(newVal) {
|
||||
if (newVal !== this.totalData) {
|
||||
this.totalDataChangeThrow = false;
|
||||
this.totalData = newVal;
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
modelValue: {
|
||||
handler(newVal) {
|
||||
if (newVal !== this.totalData) {
|
||||
this.totalDataChangeThrow = false;
|
||||
this.totalData = newVal;
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 请求结束(成功或者失败)调用此方法，将请求的结果传递给z-paging处理，第一个参数为请求结果数组，第二个参数为是否成功(默认为是）
|
||||
complete(data, success = true) {
|
||||
this.customNoMore = -1;
|
||||
return this.addData(data, success);
|
||||
},
|
||||
//【保证数据一致】请求结束(成功或者失败)调用此方法，将请求的结果传递给z-paging处理，第一个参数为请求结果数组，第二个参数为dataKey，需与:data-key绑定的一致，第三个参数为是否成功(默认为是）
|
||||
completeByKey(data, dataKey = null, success = true) {
|
||||
if (dataKey !== null && this.dataKey !== null && dataKey !== this.dataKey) {
|
||||
this.isFirstPage && this.endRefresh();
|
||||
return new Promise((resolve) => resolve());
|
||||
}
|
||||
this.customNoMore = -1;
|
||||
return this.addData(data, success);
|
||||
},
|
||||
//【通过total判断是否有更多数据】请求结束(成功或者失败)调用此方法，将请求的结果传递给z-paging处理，第一个参数为请求结果数组，第二个参数为total(列表总数)，第三个参数为是否成功(默认为是）
|
||||
completeByTotal(data, total, success = true) {
|
||||
if (total == "undefined") {
|
||||
this.customNoMore = -1;
|
||||
} else {
|
||||
const dataTypeRes = this._checkDataType(data, success, false);
|
||||
data = dataTypeRes.data;
|
||||
success = dataTypeRes.success;
|
||||
if (total >= 0 && success) {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$nextTick(() => {
|
||||
let nomore = false;
|
||||
const realTotalDataCount = this.pageNo == this.defaultPageNo ? 0 : this.realTotalData.length;
|
||||
const dataLength = this.privateConcat ? data.length : 0;
|
||||
let exceedCount = realTotalDataCount + dataLength - total;
|
||||
if (exceedCount >= 0) {
|
||||
nomore = true;
|
||||
exceedCount = this.defaultPageSize - exceedCount;
|
||||
if (this.privateConcat && exceedCount > 0 && exceedCount < data.length) {
|
||||
data = data.splice(0, exceedCount);
|
||||
}
|
||||
}
|
||||
this.completeByNoMore(data, nomore, success).then((res) => resolve(res)).catch(() => reject());
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
return this.addData(data, success);
|
||||
},
|
||||
//【自行判断是否有更多数据】请求结束(成功或者失败)调用此方法，将请求的结果传递给z-paging处理，第一个参数为请求结果数组，第二个参数为是否没有更多数据，第三个参数为是否成功(默认是是）
|
||||
completeByNoMore(data, nomore, success = true) {
|
||||
if (nomore != "undefined") {
|
||||
this.customNoMore = nomore == true ? 1 : 0;
|
||||
}
|
||||
return this.addData(data, success);
|
||||
},
|
||||
// 请求结束且请求失败时调用，支持传入请求失败原因
|
||||
completeByError(errorMsg) {
|
||||
this.customerEmptyViewErrorText = errorMsg;
|
||||
return this.complete(false);
|
||||
},
|
||||
// 与上方complete方法功能一致，新版本中设置服务端回调数组请使用complete方法
|
||||
addData(data, success = true) {
|
||||
if (!this.fromCompleteEmit) {
|
||||
this.disabledCompleteEmit = true;
|
||||
this.fromCompleteEmit = false;
|
||||
}
|
||||
const currentTimeStamp = uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.getTime();
|
||||
const disTime = currentTimeStamp - this.requestTimeStamp;
|
||||
let minDelay = this.minDelay;
|
||||
if (this.isFirstPage && this.finalShowRefresherWhenReload) {
|
||||
minDelay = Math.max(400, minDelay);
|
||||
}
|
||||
const addDataDalay = this.requestTimeStamp > 0 && disTime < minDelay ? minDelay - disTime : 0;
|
||||
this.$nextTick(() => {
|
||||
uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.delay(() => {
|
||||
this._addData(data, success, false);
|
||||
}, this.delay > 0 ? this.delay : addDataDalay);
|
||||
});
|
||||
return new Promise((resolve, reject) => {
|
||||
this.dataPromiseResultMap.complete = { resolve, reject };
|
||||
});
|
||||
},
|
||||
// 从顶部添加数据，不会影响分页的pageNo和pageSize
|
||||
addDataFromTop(data, toTop = true, toTopWithAnimate = true) {
|
||||
let addFromTop = !this.isChatRecordModeAndNotInversion;
|
||||
data = Object.prototype.toString.call(data) !== "[object Array]" ? [data] : addFromTop ? data.reverse() : data;
|
||||
this.finalUseVirtualList && this._setCellIndex(data, "top");
|
||||
this.totalData = addFromTop ? [...data, ...this.totalData] : [...this.totalData, ...data];
|
||||
if (toTop) {
|
||||
uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.delay(() => this.useChatRecordMode ? this.scrollToBottom(toTopWithAnimate) : this.scrollToTop(toTopWithAnimate));
|
||||
}
|
||||
},
|
||||
// 重新设置列表数据，调用此方法不会影响pageNo和pageSize，也不会触发请求。适用场景：当需要删除列表中某一项时，将删除对应项后的数组通过此方法传递给z-paging。(当出现类似的需要修改列表数组的场景时，请使用此方法，请勿直接修改page中:list.sync绑定的数组)
|
||||
resetTotalData(data) {
|
||||
this.isTotalChangeFromAddData = true;
|
||||
data = Object.prototype.toString.call(data) !== "[object Array]" ? [data] : data;
|
||||
this.totalData = data;
|
||||
},
|
||||
// 设置本地分页数据，请求结束(成功或者失败)调用此方法，将请求的结果传递给z-paging作分页处理（若调用了此方法，则上拉加载更多时内部会自动分页，不会触发@query所绑定的事件）
|
||||
setLocalPaging(data, success = true) {
|
||||
this.isLocalPaging = true;
|
||||
this.$nextTick(() => {
|
||||
this._addData(data, success, true);
|
||||
});
|
||||
return new Promise((resolve, reject) => {
|
||||
this.dataPromiseResultMap.localPaging = { resolve, reject };
|
||||
});
|
||||
},
|
||||
// 重新加载分页数据，pageNo会恢复为默认值，相当于下拉刷新的效果(animate为true时会展示下拉刷新动画，默认为false)
|
||||
reload(animate = this.showRefresherWhenReload) {
|
||||
if (animate) {
|
||||
this.privateShowRefresherWhenReload = animate;
|
||||
this.isUserPullDown = true;
|
||||
}
|
||||
if (!this.showLoadingMoreWhenReload) {
|
||||
this.listRendering = true;
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this._preReload(animate, false);
|
||||
});
|
||||
return new Promise((resolve, reject) => {
|
||||
this.dataPromiseResultMap.reload = { resolve, reject };
|
||||
});
|
||||
},
|
||||
// 刷新列表数据，pageNo和pageSize不会重置，列表数据会重新从服务端获取。必须保证@query绑定的方法中的pageNo和pageSize和传给服务端的一致
|
||||
refresh() {
|
||||
return this._handleRefreshWithDisPageNo(this.pageNo - this.defaultPageNo + 1);
|
||||
},
|
||||
// 刷新列表数据至指定页，例如pageNo=5时则代表刷新列表至第5页，此时pageNo会变为5，列表会展示前5页的数据。必须保证@query绑定的方法中的pageNo和pageSize和传给服务端的一致
|
||||
refreshToPage(pageNo) {
|
||||
this.isHandlingRefreshToPage = true;
|
||||
return this._handleRefreshWithDisPageNo(pageNo + this.defaultPageNo - 1);
|
||||
},
|
||||
// 手动更新列表缓存数据，将自动截取v-model绑定的list中的前pageSize条覆盖缓存，请确保在list数据更新到预期结果后再调用此方法
|
||||
updateCache() {
|
||||
if (this.finalUseCache && this.totalData.length) {
|
||||
this._saveLocalCache(this.totalData.slice(0, Math.min(this.totalData.length, this.pageSize)));
|
||||
}
|
||||
},
|
||||
// 清空分页数据
|
||||
clean() {
|
||||
this._reload(true);
|
||||
this._addData([], true, false);
|
||||
},
|
||||
// 清空分页数据
|
||||
clear() {
|
||||
this.clean();
|
||||
},
|
||||
// reload之前的一些处理
|
||||
_preReload(animate = this.showRefresherWhenReload, isFromMounted = true, retryCount = 0) {
|
||||
const showRefresher = this.finalRefresherEnabled && this.useCustomRefresher;
|
||||
if (this.customRefresherHeight === -1 && showRefresher) {
|
||||
uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.delay(() => {
|
||||
retryCount++;
|
||||
if (retryCount % 10 === 0) {
|
||||
this._updateCustomRefresherHeight();
|
||||
}
|
||||
this._preReload(animate, isFromMounted, retryCount);
|
||||
}, uni_modules_zPaging_components_zPaging_js_zPagingConstant.c.delayTime / 2);
|
||||
return;
|
||||
}
|
||||
this.isUserReload = true;
|
||||
this.loadingType = uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.LoadingType.Refresher;
|
||||
if (animate) {
|
||||
this.privateShowRefresherWhenReload = animate;
|
||||
if (this.useCustomRefresher) {
|
||||
this._doRefresherRefreshAnimate();
|
||||
} else {
|
||||
this.refresherTriggered = true;
|
||||
}
|
||||
} else {
|
||||
this._refresherEnd(false, false, false, false);
|
||||
}
|
||||
this._reload(false, isFromMounted);
|
||||
},
|
||||
// 重新加载分页数据
|
||||
_reload(isClean = false, isFromMounted = false, isUserPullDown = false) {
|
||||
this.isAddedData = false;
|
||||
this.insideOfPaging = -1;
|
||||
this.cacheScrollNodeHeight = -1;
|
||||
this.pageNo = this.defaultPageNo;
|
||||
this._cleanRefresherEndTimeout();
|
||||
!this.privateShowRefresherWhenReload && !isClean && this._startLoading(true);
|
||||
this.firstPageLoaded = true;
|
||||
this.isTotalChangeFromAddData = false;
|
||||
if (!this.isSettingCacheList) {
|
||||
this.totalData = [];
|
||||
}
|
||||
if (!isClean) {
|
||||
this._emitQuery(this.pageNo, this.defaultPageSize, isUserPullDown ? uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.QueryFrom.UserPullDown : uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.QueryFrom.Reload);
|
||||
let delay = 0;
|
||||
uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.delay(this._callMyParentQuery, delay);
|
||||
if (!isFromMounted && this.autoScrollToTopWhenReload) {
|
||||
this._scrollToTop(false);
|
||||
}
|
||||
}
|
||||
},
|
||||
// 处理服务端返回的数组
|
||||
_addData(data, success, isLocal) {
|
||||
this.isAddedData = true;
|
||||
this.fromEmptyViewReload = false;
|
||||
this.isTotalChangeFromAddData = true;
|
||||
this.refresherTriggered = false;
|
||||
this._endSystemLoadingAndRefresh();
|
||||
const tempIsUserPullDown = this.isUserPullDown;
|
||||
if (this.showRefresherUpdateTime && this.isFirstPage) {
|
||||
uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.setRefesrherTime(uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.getTime(), this.refresherUpdateTimeKey);
|
||||
this.$refs.refresh && this.$refs.refresh.updateTime();
|
||||
}
|
||||
if (!isLocal && tempIsUserPullDown && this.isFirstPage) {
|
||||
this.isUserPullDown = false;
|
||||
}
|
||||
this.listRendering = true;
|
||||
this.$nextTick(() => {
|
||||
uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.delay(() => this.listRendering = false);
|
||||
});
|
||||
let dataTypeRes = this._checkDataType(data, success, isLocal);
|
||||
data = dataTypeRes.data;
|
||||
success = dataTypeRes.success;
|
||||
let delayTime = uni_modules_zPaging_components_zPaging_js_zPagingConstant.c.delayTime;
|
||||
if (this.useChatRecordMode)
|
||||
delayTime = 0;
|
||||
this.loadingForNow = false;
|
||||
uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.delay(() => {
|
||||
this.pagingLoaded = true;
|
||||
this.$nextTick(() => {
|
||||
!isLocal && this._refresherEnd(delayTime > 0, true, tempIsUserPullDown);
|
||||
});
|
||||
});
|
||||
if (this.isFirstPage) {
|
||||
this.isLoadFailed = !success;
|
||||
this.$emit("isLoadFailedChange", this.isLoadFailed);
|
||||
if (this.finalUseCache && success && (this.cacheMode === uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.CacheMode.Always ? true : this.isSettingCacheList)) {
|
||||
this._saveLocalCache(data);
|
||||
}
|
||||
}
|
||||
this.isSettingCacheList = false;
|
||||
if (success) {
|
||||
if (!(this.privateConcat === false && !this.isHandlingRefreshToPage && this.loadingStatus === uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.More.NoMore)) {
|
||||
this.loadingStatus = uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.More.Default;
|
||||
}
|
||||
if (isLocal) {
|
||||
this.totalLocalPagingList = data;
|
||||
const localPageNo = this.defaultPageNo;
|
||||
const localPageSize = this.queryFrom !== uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.QueryFrom.Refresh ? this.defaultPageSize : this.currentRefreshPageSize;
|
||||
this._localPagingQueryList(localPageNo, localPageSize, 0, (res) => {
|
||||
uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.delay(() => {
|
||||
this.completeByTotal(res, this.totalLocalPagingList.length);
|
||||
}, 0);
|
||||
});
|
||||
} else {
|
||||
let dataChangeDelayTime = 0;
|
||||
uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.delay(() => {
|
||||
this._currentDataChange(data, this.currentData);
|
||||
this._callDataPromise(true, this.totalData);
|
||||
}, dataChangeDelayTime);
|
||||
}
|
||||
if (this.isHandlingRefreshToPage) {
|
||||
this.isHandlingRefreshToPage = false;
|
||||
this.pageNo = this.defaultPageNo + Math.ceil(data.length / this.pageSize) - 1;
|
||||
if (data.length % this.pageSize !== 0) {
|
||||
this.customNoMore = 1;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this._currentDataChange(data, this.currentData);
|
||||
this._callDataPromise(false);
|
||||
this.loadingStatus = uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.More.Fail;
|
||||
this.isHandlingRefreshToPage = false;
|
||||
if (this.loadingType === uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.LoadingType.LoadMore) {
|
||||
this.pageNo--;
|
||||
}
|
||||
}
|
||||
},
|
||||
// 所有数据改变时调用
|
||||
_totalDataChange(newVal, oldVal, eventThrow = true) {
|
||||
if ((!this.isUserReload || !this.autoCleanListWhenReload) && this.firstPageLoaded && !newVal.length && oldVal.length) {
|
||||
return;
|
||||
}
|
||||
this._doCheckScrollViewShouldFullHeight(newVal);
|
||||
if (!this.realTotalData.length && !newVal.length) {
|
||||
eventThrow = false;
|
||||
}
|
||||
this.realTotalData = newVal;
|
||||
if (eventThrow) {
|
||||
this.$emit("input", newVal);
|
||||
this.$emit("update:modelValue", newVal);
|
||||
this.$emit("update:list", newVal);
|
||||
this.$emit("listChange", newVal);
|
||||
this._callMyParentList(newVal);
|
||||
}
|
||||
this.firstPageLoaded = false;
|
||||
this.isTotalChangeFromAddData = false;
|
||||
this.$nextTick(() => {
|
||||
uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.delay(() => {
|
||||
this._getNodeClientRect(".zp-paging-container-content").then((res) => {
|
||||
res && this.$emit("contentHeightChanged", res[0].height);
|
||||
});
|
||||
}, uni_modules_zPaging_components_zPaging_js_zPagingConstant.c.delayTime * (this.isIos ? 1 : 3));
|
||||
});
|
||||
},
|
||||
// 当前数据改变时调用
|
||||
_currentDataChange(newVal, oldVal) {
|
||||
newVal = [...newVal];
|
||||
this.finalUseVirtualList && this._setCellIndex(newVal, "bottom");
|
||||
if (this.isFirstPage && this.finalConcat) {
|
||||
this.totalData = [];
|
||||
}
|
||||
if (this.customNoMore !== -1) {
|
||||
if (this.customNoMore === 1 || this.customNoMore !== 0 && !newVal.length) {
|
||||
this.loadingStatus = uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.More.NoMore;
|
||||
}
|
||||
} else {
|
||||
if (!newVal.length || newVal.length && newVal.length < this.defaultPageSize) {
|
||||
this.loadingStatus = uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.More.NoMore;
|
||||
}
|
||||
}
|
||||
if (!this.totalData.length) {
|
||||
this.totalData = newVal;
|
||||
} else {
|
||||
if (this.finalConcat) {
|
||||
const currentScrollTop = this.oldScrollTop;
|
||||
this.totalData = [...this.totalData, ...newVal];
|
||||
if (!this.isIos && !this.refresherOnly && !this.usePageScroll && newVal.length) {
|
||||
this.loadingMoreTimeStamp = uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.getTime();
|
||||
this.$nextTick(() => {
|
||||
this.scrollToY(currentScrollTop);
|
||||
});
|
||||
}
|
||||
} else {
|
||||
this.totalData = newVal;
|
||||
}
|
||||
}
|
||||
this.privateConcat = true;
|
||||
},
|
||||
// 根据pageNo处理refresh操作
|
||||
_handleRefreshWithDisPageNo(pageNo) {
|
||||
if (!this.isHandlingRefreshToPage && !this.realTotalData.length)
|
||||
return this.reload();
|
||||
if (pageNo >= 1) {
|
||||
this.loading = true;
|
||||
this.privateConcat = false;
|
||||
const totalPageSize = pageNo * this.pageSize;
|
||||
this.currentRefreshPageSize = totalPageSize;
|
||||
if (this.isLocalPaging && this.isHandlingRefreshToPage) {
|
||||
this._localPagingQueryList(this.defaultPageNo, totalPageSize, 0, (res) => {
|
||||
this.complete(res);
|
||||
});
|
||||
} else {
|
||||
this._emitQuery(this.defaultPageNo, totalPageSize, uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.QueryFrom.Refresh);
|
||||
this._callMyParentQuery(this.defaultPageNo, totalPageSize);
|
||||
}
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
this.dataPromiseResultMap.reload = { resolve, reject };
|
||||
});
|
||||
},
|
||||
// 本地分页请求
|
||||
_localPagingQueryList(pageNo, pageSize, localPagingLoadingTime, callback) {
|
||||
pageNo = Math.max(1, pageNo);
|
||||
pageSize = Math.max(1, pageSize);
|
||||
const totalPagingList = [...this.totalLocalPagingList];
|
||||
const pageNoIndex = (pageNo - 1) * pageSize;
|
||||
const finalPageNoIndex = Math.min(totalPagingList.length, pageNoIndex + pageSize);
|
||||
const resultPagingList = totalPagingList.splice(pageNoIndex, finalPageNoIndex - pageNoIndex);
|
||||
uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.delay(() => callback(resultPagingList), localPagingLoadingTime);
|
||||
},
|
||||
// 存储列表缓存数据
|
||||
_saveLocalCache(data) {
|
||||
common_vendor.index.setStorageSync(this.finalCacheKey, data);
|
||||
},
|
||||
// 通过缓存数据填充列表数据
|
||||
_setListByLocalCache() {
|
||||
this.totalData = common_vendor.index.getStorageSync(this.finalCacheKey) || [];
|
||||
this.isSettingCacheList = true;
|
||||
},
|
||||
// 修改父view的list
|
||||
_callMyParentList(newVal) {
|
||||
if (this.autowireListName.length) {
|
||||
const myParent = uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.getParent(this.$parent);
|
||||
if (myParent && myParent[this.autowireListName]) {
|
||||
myParent[this.autowireListName] = newVal;
|
||||
}
|
||||
}
|
||||
},
|
||||
// 调用父view的query
|
||||
_callMyParentQuery(customPageNo = 0, customPageSize = 0) {
|
||||
if (this.autowireQueryName) {
|
||||
if (this.myParentQuery === -1) {
|
||||
const myParent = uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.getParent(this.$parent);
|
||||
if (myParent && myParent[this.autowireQueryName]) {
|
||||
this.myParentQuery = myParent[this.autowireQueryName];
|
||||
}
|
||||
}
|
||||
if (this.myParentQuery !== -1) {
|
||||
customPageSize > 0 ? this.myParentQuery(customPageNo, customPageSize) : this.myParentQuery(this.pageNo, this.defaultPageSize);
|
||||
}
|
||||
}
|
||||
},
|
||||
// emit query事件
|
||||
_emitQuery(pageNo, pageSize, from) {
|
||||
this.queryFrom = from;
|
||||
this.requestTimeStamp = uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.getTime();
|
||||
const [lastItem] = this.realTotalData.slice(-1);
|
||||
if (this.fetch) {
|
||||
const fetchParams = uni_modules_zPaging_components_zPaging_js_zPagingInterceptor.interceptor._handleFetchParams({ pageNo, pageSize, from, lastItem: lastItem || null }, this.fetchParams);
|
||||
const fetchResult = this.fetch(fetchParams);
|
||||
if (!uni_modules_zPaging_components_zPaging_js_zPagingInterceptor.interceptor._handleFetchResult(fetchResult, this, fetchParams)) {
|
||||
uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.isPromise(fetchResult) ? fetchResult.then((res) => {
|
||||
this.complete(res);
|
||||
}).catch((err) => {
|
||||
this.complete(false);
|
||||
}) : this.complete(fetchResult);
|
||||
}
|
||||
} else {
|
||||
this.$emit("query", ...uni_modules_zPaging_components_zPaging_js_zPagingInterceptor.interceptor._handleQuery(pageNo, pageSize, from, lastItem || null));
|
||||
}
|
||||
},
|
||||
// 触发数据改变promise
|
||||
_callDataPromise(success, totalList) {
|
||||
for (const key in this.dataPromiseResultMap) {
|
||||
const obj = this.dataPromiseResultMap[key];
|
||||
if (!obj)
|
||||
continue;
|
||||
success ? obj.resolve({ totalList, noMore: this.loadingStatus === uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.More.NoMore }) : this.callNetworkReject && obj.reject(`z-paging-${key}-error`);
|
||||
}
|
||||
},
|
||||
// 检查complete data的类型
|
||||
_checkDataType(data, success, isLocal) {
|
||||
const dataType = Object.prototype.toString.call(data);
|
||||
if (dataType === "[object Boolean]") {
|
||||
success = data;
|
||||
data = [];
|
||||
} else if (dataType !== "[object Array]") {
|
||||
data = [];
|
||||
if (dataType !== "[object Undefined]" && dataType !== "[object Null]") {
|
||||
uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.consoleErr(`${isLocal ? "setLocalPaging" : "complete"}参数类型不正确，第一个参数类型必须为Array!`);
|
||||
}
|
||||
}
|
||||
return { data, success };
|
||||
}
|
||||
}
|
||||
};
|
||||
exports.dataHandleModule = dataHandleModule;
|
||||
//# sourceMappingURL=../../../../../../../.sourcemap/mp-weixin/uni_modules/z-paging/components/z-paging/js/modules/data-handle.js.map
|
||||
+148
@@ -0,0 +1,148 @@
|
||||
"use strict";
|
||||
const uni_modules_zPaging_components_zPaging_js_zPagingUtils = require("../z-paging-utils.js");
|
||||
const emptyModule = {
|
||||
props: {
|
||||
// 是否强制隐藏空数据图，默认为否
|
||||
hideEmptyView: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("hideEmptyView", false)
|
||||
},
|
||||
// 空数据图描述文字，默认为“没有数据哦~”
|
||||
emptyViewText: {
|
||||
type: [String, Object],
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("emptyViewText", null)
|
||||
},
|
||||
// 是否显示空数据图重新加载按钮(无数据时)，默认为否
|
||||
showEmptyViewReload: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("showEmptyViewReload", false)
|
||||
},
|
||||
// 加载失败时是否显示空数据图重新加载按钮，默认为是
|
||||
showEmptyViewReloadWhenError: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("showEmptyViewReloadWhenError", true)
|
||||
},
|
||||
// 空数据图点击重新加载文字，默认为“重新加载”
|
||||
emptyViewReloadText: {
|
||||
type: [String, Object],
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("emptyViewReloadText", null)
|
||||
},
|
||||
// 空数据图图片，默认使用z-paging内置的图片
|
||||
emptyViewImg: {
|
||||
type: String,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("emptyViewImg", "")
|
||||
},
|
||||
// 空数据图“加载失败”描述文字，默认为“很抱歉，加载失败”
|
||||
emptyViewErrorText: {
|
||||
type: [String, Object],
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("emptyViewErrorText", null)
|
||||
},
|
||||
// 空数据图“加载失败”图片，默认使用z-paging内置的图片
|
||||
emptyViewErrorImg: {
|
||||
type: String,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("emptyViewErrorImg", "")
|
||||
},
|
||||
// 空数据图样式
|
||||
emptyViewStyle: {
|
||||
type: Object,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("emptyViewStyle", {})
|
||||
},
|
||||
// 空数据图容器样式
|
||||
emptyViewSuperStyle: {
|
||||
type: Object,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("emptyViewSuperStyle", {})
|
||||
},
|
||||
// 空数据图img样式
|
||||
emptyViewImgStyle: {
|
||||
type: Object,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("emptyViewImgStyle", {})
|
||||
},
|
||||
// 空数据图描述文字样式
|
||||
emptyViewTitleStyle: {
|
||||
type: Object,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("emptyViewTitleStyle", {})
|
||||
},
|
||||
// 空数据图重新加载按钮样式
|
||||
emptyViewReloadStyle: {
|
||||
type: Object,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("emptyViewReloadStyle", {})
|
||||
},
|
||||
// 空数据图片是否铺满z-paging，默认为否，即填充满z-paging内列表(滚动区域)部分。若设置为否，则为填铺满整个z-paging
|
||||
emptyViewFixed: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("emptyViewFixed", false)
|
||||
},
|
||||
// 空数据图片是否垂直居中，默认为是，若设置为否即为从空数据容器顶部开始显示。emptyViewFixed为false时有效
|
||||
emptyViewCenter: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("emptyViewCenter", true)
|
||||
},
|
||||
// 加载中时是否自动隐藏空数据图，默认为是
|
||||
autoHideEmptyViewWhenLoading: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("autoHideEmptyViewWhenLoading", true)
|
||||
},
|
||||
// 用户下拉列表触发下拉刷新加载中时是否自动隐藏空数据图，默认为是
|
||||
autoHideEmptyViewWhenPull: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("autoHideEmptyViewWhenPull", true)
|
||||
},
|
||||
// 空数据view的z-index，默认为9
|
||||
emptyViewZIndex: {
|
||||
type: Number,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("emptyViewZIndex", 9)
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
customerEmptyViewErrorText: ""
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
finalEmptyViewImg() {
|
||||
return this.isLoadFailed ? this.emptyViewErrorImg : this.emptyViewImg;
|
||||
},
|
||||
finalShowEmptyViewReload() {
|
||||
return this.isLoadFailed ? this.showEmptyViewReloadWhenError : this.showEmptyViewReload;
|
||||
},
|
||||
// 是否展示空数据图
|
||||
showEmpty() {
|
||||
if (this.refresherOnly || this.hideEmptyView || this.realTotalData.length)
|
||||
return false;
|
||||
if (this.autoHideEmptyViewWhenLoading) {
|
||||
if (this.isAddedData && !this.firstPageLoaded && !this.loading)
|
||||
return true;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
return !this.autoHideEmptyViewWhenPull && !this.isUserReload;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 点击了空数据view重新加载按钮
|
||||
_emptyViewReload() {
|
||||
let callbacked = false;
|
||||
this.$emit("emptyViewReload", (reload) => {
|
||||
if (reload === void 0 || reload === true) {
|
||||
this.fromEmptyViewReload = true;
|
||||
this.reload().catch(() => {
|
||||
});
|
||||
}
|
||||
callbacked = true;
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
if (!callbacked) {
|
||||
this.fromEmptyViewReload = true;
|
||||
this.reload().catch(() => {
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 点击了空数据view
|
||||
_emptyViewClick() {
|
||||
this.$emit("emptyViewClick");
|
||||
}
|
||||
}
|
||||
};
|
||||
exports.emptyModule = emptyModule;
|
||||
//# sourceMappingURL=../../../../../../../.sourcemap/mp-weixin/uni_modules/z-paging/components/z-paging/js/modules/empty.js.map
|
||||
+112
@@ -0,0 +1,112 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../../../common/vendor.js");
|
||||
const uni_modules_zPaging_components_zPaging_i18n_index = require("../../i18n/index.js");
|
||||
const uni_modules_zPaging_components_zPaging_js_zPagingInterceptor = require("../z-paging-interceptor.js");
|
||||
const { t } = common_vendor.initVueI18n(uni_modules_zPaging_components_zPaging_i18n_index.messages);
|
||||
const i18nModule = {
|
||||
computed: {
|
||||
finalLanguage() {
|
||||
try {
|
||||
const local = common_vendor.index.getLocale();
|
||||
const language = this.systemInfo.appLanguage;
|
||||
return local === "auto" ? uni_modules_zPaging_components_zPaging_js_zPagingInterceptor.interceptor._handleLanguage2Local(language, this._language2Local(language)) : local;
|
||||
} catch (e) {
|
||||
return "zh-Hans";
|
||||
}
|
||||
},
|
||||
// 最终的下拉刷新默认状态的文字
|
||||
finalRefresherDefaultText() {
|
||||
return this._getI18nText("zp.refresher.default", this.refresherDefaultText);
|
||||
},
|
||||
// 最终的下拉刷新下拉中的文字
|
||||
finalRefresherPullingText() {
|
||||
return this._getI18nText("zp.refresher.pulling", this.refresherPullingText);
|
||||
},
|
||||
// 最终的下拉刷新中文字
|
||||
finalRefresherRefreshingText() {
|
||||
return this._getI18nText("zp.refresher.refreshing", this.refresherRefreshingText);
|
||||
},
|
||||
// 最终的下拉刷新完成文字
|
||||
finalRefresherCompleteText() {
|
||||
return this._getI18nText("zp.refresher.complete", this.refresherCompleteText);
|
||||
},
|
||||
// 最终的下拉刷新上次更新时间文字
|
||||
finalRefresherUpdateTimeTextMap() {
|
||||
return {
|
||||
title: t("zp.refresherUpdateTime.title"),
|
||||
none: t("zp.refresherUpdateTime.none"),
|
||||
today: t("zp.refresherUpdateTime.today"),
|
||||
yesterday: t("zp.refresherUpdateTime.yesterday")
|
||||
};
|
||||
},
|
||||
// 最终的继续下拉进入二楼文字
|
||||
finalRefresherGoF2Text() {
|
||||
return this._getI18nText("zp.refresher.f2", this.refresherGoF2Text);
|
||||
},
|
||||
// 最终的底部加载更多默认状态文字
|
||||
finalLoadingMoreDefaultText() {
|
||||
return this._getI18nText("zp.loadingMore.default", this.loadingMoreDefaultText);
|
||||
},
|
||||
// 最终的底部加载更多加载中文字
|
||||
finalLoadingMoreLoadingText() {
|
||||
return this._getI18nText("zp.loadingMore.loading", this.loadingMoreLoadingText);
|
||||
},
|
||||
// 最终的底部加载更多没有更多数据文字
|
||||
finalLoadingMoreNoMoreText() {
|
||||
return this._getI18nText("zp.loadingMore.noMore", this.loadingMoreNoMoreText);
|
||||
},
|
||||
// 最终的底部加载更多加载失败文字
|
||||
finalLoadingMoreFailText() {
|
||||
return this._getI18nText("zp.loadingMore.fail", this.loadingMoreFailText);
|
||||
},
|
||||
// 最终的空数据图title
|
||||
finalEmptyViewText() {
|
||||
return this.isLoadFailed ? this.finalEmptyViewErrorText : this._getI18nText("zp.emptyView.title", this.emptyViewText);
|
||||
},
|
||||
// 最终的空数据图reload title
|
||||
finalEmptyViewReloadText() {
|
||||
return this._getI18nText("zp.emptyView.reload", this.emptyViewReloadText);
|
||||
},
|
||||
// 最终的空数据图加载失败文字
|
||||
finalEmptyViewErrorText() {
|
||||
return this.customerEmptyViewErrorText || this._getI18nText("zp.emptyView.error", this.emptyViewErrorText);
|
||||
},
|
||||
// 最终的系统loading title
|
||||
finalSystemLoadingText() {
|
||||
return this._getI18nText("zp.systemLoading.title", this.systemLoadingText);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取当前z-paging的语言
|
||||
getLanguage() {
|
||||
return this.finalLanguage;
|
||||
},
|
||||
// 获取国际化转换后的文本
|
||||
_getI18nText(key, value) {
|
||||
const dataType = Object.prototype.toString.call(value);
|
||||
if (dataType === "[object Object]") {
|
||||
const nextValue = value[this.finalLanguage];
|
||||
if (nextValue)
|
||||
return nextValue;
|
||||
} else if (dataType === "[object String]") {
|
||||
return value;
|
||||
}
|
||||
return t(key);
|
||||
},
|
||||
// 系统language转i18n local
|
||||
_language2Local(language) {
|
||||
const formatedLanguage = language.toLowerCase().replace(new RegExp("_", ""), "-");
|
||||
if (formatedLanguage.indexOf("zh") !== -1) {
|
||||
if (formatedLanguage === "zh" || formatedLanguage === "zh-cn" || formatedLanguage.indexOf("zh-hans") !== -1) {
|
||||
return "zh-Hans";
|
||||
}
|
||||
return "zh-Hant";
|
||||
}
|
||||
if (formatedLanguage.indexOf("en") !== -1)
|
||||
return "en";
|
||||
return language;
|
||||
}
|
||||
}
|
||||
};
|
||||
exports.i18nModule = i18nModule;
|
||||
//# sourceMappingURL=../../../../../../../.sourcemap/mp-weixin/uni_modules/z-paging/components/z-paging/js/modules/i18n.js.map
|
||||
Vendored
+338
@@ -0,0 +1,338 @@
|
||||
"use strict";
|
||||
const uni_modules_zPaging_components_zPaging_js_zPagingUtils = require("../z-paging-utils.js");
|
||||
const uni_modules_zPaging_components_zPaging_js_zPagingEnum = require("../z-paging-enum.js");
|
||||
const loadMoreModule = {
|
||||
props: {
|
||||
// 自定义底部加载更多样式
|
||||
loadingMoreCustomStyle: {
|
||||
type: Object,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("loadingMoreCustomStyle", {})
|
||||
},
|
||||
// 自定义底部加载更多文字样式
|
||||
loadingMoreTitleCustomStyle: {
|
||||
type: Object,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("loadingMoreTitleCustomStyle", {})
|
||||
},
|
||||
// 自定义底部加载更多加载中动画样式
|
||||
loadingMoreLoadingIconCustomStyle: {
|
||||
type: Object,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("loadingMoreLoadingIconCustomStyle", {})
|
||||
},
|
||||
// 自定义底部加载更多加载中动画图标类型，可选flower或circle，默认为flower
|
||||
loadingMoreLoadingIconType: {
|
||||
type: String,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("loadingMoreLoadingIconType", "flower")
|
||||
},
|
||||
// 自定义底部加载更多加载中动画图标图片
|
||||
loadingMoreLoadingIconCustomImage: {
|
||||
type: String,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("loadingMoreLoadingIconCustomImage", "")
|
||||
},
|
||||
// 底部加载更多加载中view是否展示旋转动画，默认为是
|
||||
loadingMoreLoadingAnimated: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("loadingMoreLoadingAnimated", true)
|
||||
},
|
||||
// 是否启用加载更多数据(含滑动到底部加载更多数据和点击加载更多数据)，默认为是
|
||||
loadingMoreEnabled: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("loadingMoreEnabled", true)
|
||||
},
|
||||
// 是否启用滑动到底部加载更多数据，默认为是
|
||||
toBottomLoadingMoreEnabled: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("toBottomLoadingMoreEnabled", true)
|
||||
},
|
||||
// 滑动到底部状态为默认状态时，以加载中的状态展示，默认为否。若设置为是，可避免滚动到底部看到默认状态然后立刻变为加载中状态的问题，但分页数量未超过一屏时，不会显示【点击加载更多】
|
||||
loadingMoreDefaultAsLoading: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("loadingMoreDefaultAsLoading", false)
|
||||
},
|
||||
// 滑动到底部"默认"文字，默认为【点击加载更多】
|
||||
loadingMoreDefaultText: {
|
||||
type: [String, Object],
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("loadingMoreDefaultText", null)
|
||||
},
|
||||
// 滑动到底部"加载中"文字，默认为【正在加载...】
|
||||
loadingMoreLoadingText: {
|
||||
type: [String, Object],
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("loadingMoreLoadingText", null)
|
||||
},
|
||||
// 滑动到底部"没有更多"文字，默认为【没有更多了】
|
||||
loadingMoreNoMoreText: {
|
||||
type: [String, Object],
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("loadingMoreNoMoreText", null)
|
||||
},
|
||||
// 滑动到底部"加载失败"文字，默认为【加载失败，点击重新加载】
|
||||
loadingMoreFailText: {
|
||||
type: [String, Object],
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("loadingMoreFailText", null)
|
||||
},
|
||||
// 当没有更多数据且分页内容未超出z-paging时是否隐藏没有更多数据的view，默认为否
|
||||
hideNoMoreInside: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("hideNoMoreInside", false)
|
||||
},
|
||||
// 当没有更多数据且分页数组长度少于这个值时，隐藏没有更多数据的view，默认为0，代表不限制。
|
||||
hideNoMoreByLimit: {
|
||||
type: Number,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("hideNoMoreByLimit", 0)
|
||||
},
|
||||
// 是否显示默认的加载更多text，默认为是
|
||||
showDefaultLoadingMoreText: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("showDefaultLoadingMoreText", true)
|
||||
},
|
||||
// 是否显示没有更多数据的view
|
||||
showLoadingMoreNoMoreView: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("showLoadingMoreNoMoreView", true)
|
||||
},
|
||||
// 是否显示没有更多数据的分割线，默认为是
|
||||
showLoadingMoreNoMoreLine: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("showLoadingMoreNoMoreLine", true)
|
||||
},
|
||||
// 自定义底部没有更多数据的分割线样式
|
||||
loadingMoreNoMoreLineCustomStyle: {
|
||||
type: Object,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("loadingMoreNoMoreLineCustomStyle", {})
|
||||
},
|
||||
// 当分页未满一屏时，是否自动加载更多，默认为否(nvue无效)
|
||||
insideMore: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("insideMore", false)
|
||||
},
|
||||
// 距底部/右边多远时（单位px），触发 scrolltolower 事件，默认为100rpx
|
||||
lowerThreshold: {
|
||||
type: [Number, String],
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("lowerThreshold", "100rpx")
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
M: uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.More,
|
||||
// 底部加载更多状态
|
||||
loadingStatus: uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.More.Default,
|
||||
// 在渲染之后的底部加载更多状态
|
||||
loadingStatusAfterRender: uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.More.Default,
|
||||
// 底部加载更多时间戳
|
||||
loadingMoreTimeStamp: 0,
|
||||
// 底部加载更多slot
|
||||
loadingMoreDefaultSlot: null,
|
||||
// 是否展示底部加载更多
|
||||
showLoadingMore: false,
|
||||
// 是否是开发者自定义的加载更多，-1代表交由z-paging自行判断；1代表没有更多了；0代表还有更多数据
|
||||
customNoMore: -1
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 底部加载更多配置
|
||||
zLoadMoreConfig() {
|
||||
return {
|
||||
status: this.loadingStatusAfterRender,
|
||||
defaultAsLoading: this.loadingMoreDefaultAsLoading || this.useChatRecordMode && this.chatLoadingMoreDefaultAsLoading,
|
||||
defaultThemeStyle: this.finalLoadingMoreThemeStyle,
|
||||
customStyle: this.loadingMoreCustomStyle,
|
||||
titleCustomStyle: this.loadingMoreTitleCustomStyle,
|
||||
iconCustomStyle: this.loadingMoreLoadingIconCustomStyle,
|
||||
loadingIconType: this.loadingMoreLoadingIconType,
|
||||
loadingIconCustomImage: this.loadingMoreLoadingIconCustomImage,
|
||||
loadingAnimated: this.loadingMoreLoadingAnimated,
|
||||
showNoMoreLine: this.showLoadingMoreNoMoreLine,
|
||||
noMoreLineCustomStyle: this.loadingMoreNoMoreLineCustomStyle,
|
||||
defaultText: this.finalLoadingMoreDefaultText,
|
||||
loadingText: this.finalLoadingMoreLoadingText,
|
||||
noMoreText: this.finalLoadingMoreNoMoreText,
|
||||
failText: this.finalLoadingMoreFailText,
|
||||
hideContent: !this.loadingMoreDefaultAsLoading && this.listRendering,
|
||||
unit: this.unit,
|
||||
isChat: this.useChatRecordMode,
|
||||
chatDefaultAsLoading: this.chatLoadingMoreDefaultAsLoading
|
||||
};
|
||||
},
|
||||
// 最终的底部加载更多主题
|
||||
finalLoadingMoreThemeStyle() {
|
||||
return this.loadingMoreThemeStyle.length ? this.loadingMoreThemeStyle : this.defaultThemeStyle;
|
||||
},
|
||||
// 最终的底部加载更多触发阈值
|
||||
finalLowerThreshold() {
|
||||
return uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.convertToPx(this.lowerThreshold);
|
||||
},
|
||||
// 是否显示默认状态下的底部加载更多
|
||||
showLoadingMoreDefault() {
|
||||
return this._showLoadingMore("Default");
|
||||
},
|
||||
// 是否显示加载中状态下的底部加载更多
|
||||
showLoadingMoreLoading() {
|
||||
return this._showLoadingMore("Loading");
|
||||
},
|
||||
// 是否显示没有更多了状态下的底部加载更多
|
||||
showLoadingMoreNoMore() {
|
||||
return this._showLoadingMore("NoMore");
|
||||
},
|
||||
// 是否显示加载失败状态下的底部加载更多
|
||||
showLoadingMoreFail() {
|
||||
return this._showLoadingMore("Fail");
|
||||
},
|
||||
// 是否显示自定义状态下的底部加载更多
|
||||
showLoadingMoreCustom() {
|
||||
return this._showLoadingMore("Custom");
|
||||
},
|
||||
// 底部加载更多固定高度
|
||||
loadingMoreFixedHeight() {
|
||||
return uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.addUnit("80rpx", this.unit);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 页面滚动到底部时通知z-paging进行进一步处理
|
||||
pageReachBottom() {
|
||||
!this.useChatRecordMode && this.toBottomLoadingMoreEnabled && this._onLoadingMore("toBottom");
|
||||
},
|
||||
// 手动触发上拉加载更多(非必须，可依据具体需求使用)
|
||||
doLoadMore(type) {
|
||||
this._onLoadingMore(type);
|
||||
},
|
||||
// 通过@scroll事件检测是否滚动到了底部(顺带检测下是否滚动到了顶部)
|
||||
_checkScrolledToBottom(scrollDiff, checked = false) {
|
||||
if (this.cacheScrollNodeHeight === -1) {
|
||||
this._getNodeClientRect(".zp-scroll-view").then((res) => {
|
||||
if (res) {
|
||||
const scrollNodeHeight = res[0].height;
|
||||
this.cacheScrollNodeHeight = scrollNodeHeight;
|
||||
if (scrollDiff - scrollNodeHeight <= this.finalLowerThreshold) {
|
||||
this._onLoadingMore("toBottom");
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
if (scrollDiff - this.cacheScrollNodeHeight <= this.finalLowerThreshold) {
|
||||
this._onLoadingMore("toBottom");
|
||||
} else if (scrollDiff - this.cacheScrollNodeHeight <= 500 && !checked) {
|
||||
uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.delay(() => {
|
||||
this._getNodeClientRect(".zp-scroll-view", true, true).then((res) => {
|
||||
if (res) {
|
||||
this.oldScrollTop = res[0].scrollTop;
|
||||
const newScrollDiff = res[0].scrollHeight - this.oldScrollTop;
|
||||
this._checkScrolledToBottom(newScrollDiff, true);
|
||||
}
|
||||
});
|
||||
}, 150, "checkScrolledToBottomDelay");
|
||||
}
|
||||
if (this.oldScrollTop <= 150 && this.oldScrollTop !== 0) {
|
||||
uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.delay(() => {
|
||||
if (this.oldScrollTop !== 0) {
|
||||
this._getNodeClientRect(".zp-scroll-view", true, true).then((res) => {
|
||||
if (res && res[0].scrollTop === 0 && this.oldScrollTop !== 0) {
|
||||
this._onScrollToUpper();
|
||||
}
|
||||
});
|
||||
}
|
||||
}, 150, "checkScrolledToTopDelay");
|
||||
}
|
||||
}
|
||||
},
|
||||
// 触发加载更多时调用,from:toBottom-滑动到底部触发；click-点击加载更多触发
|
||||
_onLoadingMore(from = "click") {
|
||||
if (this.isIos && from === "toBottom" && !this.scrollToBottomBounceEnabled && this.scrollEnable) {
|
||||
this.scrollEnable = false;
|
||||
this.$nextTick(() => {
|
||||
this.scrollEnable = true;
|
||||
});
|
||||
}
|
||||
this._emitScrollEvent("scrolltolower");
|
||||
if (this.refresherOnly || !this.loadingMoreEnabled || !(this.loadingStatus === uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.More.Default || this.loadingStatus === uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.More.Fail) || this.loading || this.showEmpty)
|
||||
return;
|
||||
if (!this.isIos && !this.refresherOnly && !this.usePageScroll) {
|
||||
const currentTimestamp = uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.getTime();
|
||||
if (this.loadingMoreTimeStamp > 0 && currentTimestamp - this.loadingMoreTimeStamp < 100) {
|
||||
this.loadingMoreTimeStamp = 0;
|
||||
return;
|
||||
}
|
||||
}
|
||||
this._doLoadingMore();
|
||||
},
|
||||
// 处理开始加载更多
|
||||
_doLoadingMore() {
|
||||
if (this.pageNo >= this.defaultPageNo && this.loadingStatus !== uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.More.NoMore) {
|
||||
this.pageNo++;
|
||||
this._startLoading(false);
|
||||
if (this.isLocalPaging) {
|
||||
this._localPagingQueryList(this.pageNo, this.defaultPageSize, this.localPagingLoadingTime, (res) => {
|
||||
this.completeByTotal(res, this.totalLocalPagingList.length);
|
||||
this.queryFrom = uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.QueryFrom.LoadMore;
|
||||
});
|
||||
} else {
|
||||
this._emitQuery(this.pageNo, this.defaultPageSize, uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.QueryFrom.LoadMore);
|
||||
this._callMyParentQuery();
|
||||
}
|
||||
this.loadingType = uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.LoadingType.LoadMore;
|
||||
}
|
||||
},
|
||||
// (预处理)判断当没有更多数据且分页内容未超出z-paging时是否显示没有更多数据的view
|
||||
_preCheckShowNoMoreInside(newVal, scrollViewNode, pagingContainerNode) {
|
||||
if (this.loadingStatus === uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.More.NoMore && this.hideNoMoreByLimit > 0 && newVal.length) {
|
||||
this.showLoadingMore = newVal.length > this.hideNoMoreByLimit;
|
||||
} else if (this.loadingStatus === uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.More.NoMore && this.hideNoMoreInside && newVal.length || this.insideMore && this.insideOfPaging !== false && newVal.length) {
|
||||
this.$nextTick(() => {
|
||||
this._checkShowNoMoreInside(newVal, scrollViewNode, pagingContainerNode);
|
||||
});
|
||||
if (this.insideMore && this.insideOfPaging !== false && newVal.length) {
|
||||
this.showLoadingMore = newVal.length;
|
||||
}
|
||||
} else {
|
||||
this.showLoadingMore = newVal.length;
|
||||
}
|
||||
},
|
||||
// 判断当没有更多数据且分页内容未超出z-paging时是否显示没有更多数据的view
|
||||
async _checkShowNoMoreInside(totalData, oldScrollViewNode, oldPagingContainerNode) {
|
||||
try {
|
||||
const scrollViewNode = oldScrollViewNode || await this._getNodeClientRect(".zp-scroll-view");
|
||||
if (this.usePageScroll) {
|
||||
if (scrollViewNode) {
|
||||
const scrollViewTotalH = scrollViewNode[0].top + scrollViewNode[0].height;
|
||||
this.insideOfPaging = scrollViewTotalH < this.windowHeight;
|
||||
if (this.hideNoMoreInside) {
|
||||
this.showLoadingMore = !this.insideOfPaging;
|
||||
}
|
||||
this._updateInsideOfPaging();
|
||||
}
|
||||
} else {
|
||||
const pagingContainerNode = oldPagingContainerNode || await this._getNodeClientRect(".zp-paging-container-content");
|
||||
const pagingContainerH = pagingContainerNode ? pagingContainerNode[0].height : 0;
|
||||
const scrollViewH = scrollViewNode ? scrollViewNode[0].height : 0;
|
||||
this.insideOfPaging = pagingContainerH < scrollViewH;
|
||||
if (this.hideNoMoreInside) {
|
||||
this.showLoadingMore = !this.insideOfPaging;
|
||||
}
|
||||
this._updateInsideOfPaging();
|
||||
}
|
||||
} catch (e) {
|
||||
this.insideOfPaging = !totalData.length;
|
||||
if (this.hideNoMoreInside) {
|
||||
this.showLoadingMore = !this.insideOfPaging;
|
||||
}
|
||||
this._updateInsideOfPaging();
|
||||
}
|
||||
},
|
||||
// 是否要展示上拉加载更多view
|
||||
_showLoadingMore(type) {
|
||||
if (!this.showLoadingMoreWhenReload && (!(this.loadingStatus === uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.More.Default ? this.nShowBottom : true) || !this.realTotalData.length))
|
||||
return false;
|
||||
if ((!this.showLoadingMoreWhenReload || this.isUserPullDown || this.loadingStatus !== uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.More.Loading) && !this.showLoadingMore || !this.loadingMoreEnabled && (!this.showLoadingMoreWhenReload || this.isUserPullDown || this.loadingStatus !== uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.More.Loading) || this.refresherOnly) {
|
||||
return false;
|
||||
}
|
||||
if (this.useChatRecordMode && type !== "Loading")
|
||||
return false;
|
||||
if (!this.zSlots)
|
||||
return false;
|
||||
if (type === "Custom") {
|
||||
return this.showDefaultLoadingMoreText && !(this.loadingStatus === uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.More.NoMore && !this.showLoadingMoreNoMoreView);
|
||||
}
|
||||
const res = this.loadingStatus === uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.More[type] && this.zSlots[`loadingMore${type}`] && (type === "NoMore" ? this.showLoadingMoreNoMoreView : true);
|
||||
return res;
|
||||
}
|
||||
}
|
||||
};
|
||||
exports.loadMoreModule = loadMoreModule;
|
||||
//# sourceMappingURL=../../../../../../../.sourcemap/mp-weixin/uni_modules/z-paging/components/z-paging/js/modules/load-more.js.map
|
||||
Vendored
+94
@@ -0,0 +1,94 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../../../common/vendor.js");
|
||||
const uni_modules_zPaging_components_zPaging_js_zPagingUtils = require("../z-paging-utils.js");
|
||||
const uni_modules_zPaging_components_zPaging_js_zPagingEnum = require("../z-paging-enum.js");
|
||||
const loadingModule = {
|
||||
props: {
|
||||
// 第一次加载后自动隐藏loading slot，默认为是
|
||||
autoHideLoadingAfterFirstLoaded: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("autoHideLoadingAfterFirstLoaded", true)
|
||||
},
|
||||
// loading slot是否铺满屏幕并固定，默认为否
|
||||
loadingFullFixed: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("loadingFullFixed", false)
|
||||
},
|
||||
// 是否自动显示系统Loading：即uni.showLoading，若开启则将在刷新列表时(调用reload、refresh时)显示，下拉刷新和滚动到底部加载更多不会显示，默认为false。
|
||||
autoShowSystemLoading: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("autoShowSystemLoading", false)
|
||||
},
|
||||
// 显示系统Loading时是否显示透明蒙层，防止触摸穿透，默认为是(H5、App、微信小程序、百度小程序有效)
|
||||
systemLoadingMask: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("systemLoadingMask", true)
|
||||
},
|
||||
// 显示系统Loading时显示的文字，默认为"加载中"
|
||||
systemLoadingText: {
|
||||
type: [String, Object],
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("systemLoadingText", null)
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
loadingForNow: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// loading状态
|
||||
loadingStatus(newVal) {
|
||||
this.$emit("loadingStatusChange", newVal);
|
||||
this.$nextTick(() => {
|
||||
this.loadingStatusAfterRender = newVal;
|
||||
});
|
||||
if (this.useChatRecordMode) {
|
||||
if (this.isFirstPage && (newVal === uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.More.NoMore || newVal === uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.More.Fail)) {
|
||||
this.isFirstPageAndNoMore = true;
|
||||
return;
|
||||
}
|
||||
}
|
||||
this.isFirstPageAndNoMore = false;
|
||||
},
|
||||
loading(newVal) {
|
||||
if (newVal) {
|
||||
this.loadingForNow = newVal;
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 是否显示loading
|
||||
showLoading() {
|
||||
if (this.firstPageLoaded || !this.loading || !this.loadingForNow)
|
||||
return false;
|
||||
if (this.finalShowSystemLoading) {
|
||||
common_vendor.index.showLoading({
|
||||
title: this.finalSystemLoadingText,
|
||||
mask: this.systemLoadingMask
|
||||
});
|
||||
}
|
||||
return this.autoHideLoadingAfterFirstLoaded ? this.fromEmptyViewReload ? true : !this.pagingLoaded : this.loadingType === uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.LoadingType.Refresher;
|
||||
},
|
||||
// 最终的是否显示系统loading
|
||||
finalShowSystemLoading() {
|
||||
return this.autoShowSystemLoading && this.loadingType === uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.LoadingType.Refresher;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理开始加载更多状态
|
||||
_startLoading(isReload = false) {
|
||||
if (this.showLoadingMoreWhenReload && !this.isUserPullDown || !isReload) {
|
||||
this.loadingStatus = uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.More.Loading;
|
||||
}
|
||||
this.loading = true;
|
||||
},
|
||||
// 停止系统loading和refresh
|
||||
_endSystemLoadingAndRefresh() {
|
||||
this.finalShowSystemLoading && common_vendor.index.hideLoading();
|
||||
!this.useCustomRefresher && common_vendor.index.stopPullDownRefresh();
|
||||
}
|
||||
}
|
||||
};
|
||||
exports.loadingModule = loadingModule;
|
||||
//# sourceMappingURL=../../../../../../../.sourcemap/mp-weixin/uni_modules/z-paging/components/z-paging/js/modules/loading.js.map
|
||||
+25
@@ -0,0 +1,25 @@
|
||||
"use strict";
|
||||
const uni_modules_zPaging_components_zPaging_js_zPagingUtils = require("../z-paging-utils.js");
|
||||
const nvueModule = {
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
nRefresherLoading: false,
|
||||
nListIsDragging: false,
|
||||
nShowBottom: true,
|
||||
nFixFreezing: false,
|
||||
nShowRefresherReveal: false,
|
||||
nLoadingMoreFixedHeight: false,
|
||||
nShowRefresherRevealHeight: 0,
|
||||
nOldShowRefresherRevealHeight: -1,
|
||||
nRefresherWidth: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.rpx2px(750),
|
||||
nF2Opacity: 0
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
mounted() {
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
exports.nvueModule = nvueModule;
|
||||
//# sourceMappingURL=../../../../../../../.sourcemap/mp-weixin/uni_modules/z-paging/components/z-paging/js/modules/nvue.js.map
|
||||
Vendored
+624
@@ -0,0 +1,624 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../../../common/vendor.js");
|
||||
const uni_modules_zPaging_components_zPaging_js_zPagingUtils = require("../z-paging-utils.js");
|
||||
const uni_modules_zPaging_components_zPaging_js_zPagingEnum = require("../z-paging-enum.js");
|
||||
const refresherModule = {
|
||||
props: {
|
||||
// 下拉刷新的主题样式，支持black，white，默认black
|
||||
refresherThemeStyle: {
|
||||
type: String,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("refresherThemeStyle", "")
|
||||
},
|
||||
// 自定义下拉刷新中左侧图标的样式
|
||||
refresherImgStyle: {
|
||||
type: Object,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("refresherImgStyle", {})
|
||||
},
|
||||
// 自定义下拉刷新中右侧状态描述文字的样式
|
||||
refresherTitleStyle: {
|
||||
type: Object,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("refresherTitleStyle", {})
|
||||
},
|
||||
// 自定义下拉刷新中右侧最后更新时间文字的样式(show-refresher-update-time为true时有效)
|
||||
refresherUpdateTimeStyle: {
|
||||
type: Object,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("refresherUpdateTimeStyle", {})
|
||||
},
|
||||
// 在微信小程序和QQ小程序中，是否实时监听下拉刷新中进度，默认为否
|
||||
watchRefresherTouchmove: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("watchRefresherTouchmove", false)
|
||||
},
|
||||
// 底部加载更多的主题样式，支持black，white，默认black
|
||||
loadingMoreThemeStyle: {
|
||||
type: String,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("loadingMoreThemeStyle", "")
|
||||
},
|
||||
// 是否只使用下拉刷新，设置为true后将关闭mounted自动请求数据、关闭滚动到底部加载更多，强制隐藏空数据图。默认为否
|
||||
refresherOnly: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("refresherOnly", false)
|
||||
},
|
||||
// 自定义下拉刷新默认状态下回弹动画时间，单位为毫秒，默认为100毫秒，nvue无效
|
||||
refresherDefaultDuration: {
|
||||
type: [Number, String],
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("refresherDefaultDuration", 100)
|
||||
},
|
||||
// 自定义下拉刷新结束以后延迟回弹的时间，单位为毫秒，默认为0
|
||||
refresherCompleteDelay: {
|
||||
type: [Number, String],
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("refresherCompleteDelay", 0)
|
||||
},
|
||||
// 自定义下拉刷新结束回弹动画时间，单位为毫秒，默认为300毫秒(refresherEndBounceEnabled为false时，refresherCompleteDuration为设定值的1/3)，nvue无效
|
||||
refresherCompleteDuration: {
|
||||
type: [Number, String],
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("refresherCompleteDuration", 300)
|
||||
},
|
||||
// 自定义下拉刷新中是否允许列表滚动，默认为是
|
||||
refresherRefreshingScrollable: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("refresherRefreshingScrollable", true)
|
||||
},
|
||||
// 自定义下拉刷新结束状态下是否允许列表滚动，默认为否
|
||||
refresherCompleteScrollable: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("refresherCompleteScrollable", false)
|
||||
},
|
||||
// 是否使用自定义的下拉刷新，默认为是，即使用z-paging的下拉刷新。设置为false即代表使用uni scroll-view自带的下拉刷新，h5、App、微信小程序以外的平台不支持uni scroll-view自带的下拉刷新
|
||||
useCustomRefresher: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("useCustomRefresher", true)
|
||||
},
|
||||
// 自定义下拉刷新下拉帧率，默认为40，过高可能会出现抖动问题
|
||||
refresherFps: {
|
||||
type: [Number, String],
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("refresherFps", 40)
|
||||
},
|
||||
// 自定义下拉刷新允许触发的最大下拉角度，默认为40度，当下拉角度小于设定值时，自定义下拉刷新动画不会被触发
|
||||
refresherMaxAngle: {
|
||||
type: [Number, String],
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("refresherMaxAngle", 40)
|
||||
},
|
||||
// 自定义下拉刷新的角度由未达到最大角度变到达到最大角度时，是否继续下拉刷新手势，默认为否
|
||||
refresherAngleEnableChangeContinued: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("refresherAngleEnableChangeContinued", false)
|
||||
},
|
||||
// 自定义下拉刷新默认状态下的文字
|
||||
refresherDefaultText: {
|
||||
type: [String, Object],
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("refresherDefaultText", null)
|
||||
},
|
||||
// 自定义下拉刷新松手立即刷新状态下的文字
|
||||
refresherPullingText: {
|
||||
type: [String, Object],
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("refresherPullingText", null)
|
||||
},
|
||||
// 自定义下拉刷新刷新中状态下的文字
|
||||
refresherRefreshingText: {
|
||||
type: [String, Object],
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("refresherRefreshingText", null)
|
||||
},
|
||||
// 自定义下拉刷新刷新结束状态下的文字
|
||||
refresherCompleteText: {
|
||||
type: [String, Object],
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("refresherCompleteText", null)
|
||||
},
|
||||
// 自定义继续下拉进入二楼文字
|
||||
refresherGoF2Text: {
|
||||
type: [String, Object],
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("refresherGoF2Text", null)
|
||||
},
|
||||
// 自定义下拉刷新默认状态下的图片
|
||||
refresherDefaultImg: {
|
||||
type: String,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("refresherDefaultImg", null)
|
||||
},
|
||||
// 自定义下拉刷新松手立即刷新状态下的图片，默认与refresherDefaultImg一致
|
||||
refresherPullingImg: {
|
||||
type: String,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("refresherPullingImg", null)
|
||||
},
|
||||
// 自定义下拉刷新刷新中状态下的图片
|
||||
refresherRefreshingImg: {
|
||||
type: String,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("refresherRefreshingImg", null)
|
||||
},
|
||||
// 自定义下拉刷新刷新结束状态下的图片
|
||||
refresherCompleteImg: {
|
||||
type: String,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("refresherCompleteImg", null)
|
||||
},
|
||||
// 自定义下拉刷新刷新中状态下是否展示旋转动画
|
||||
refresherRefreshingAnimated: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("refresherRefreshingAnimated", true)
|
||||
},
|
||||
// 是否开启自定义下拉刷新刷新结束回弹效果，默认为是
|
||||
refresherEndBounceEnabled: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("refresherEndBounceEnabled", true)
|
||||
},
|
||||
// 是否开启自定义下拉刷新，默认为是
|
||||
refresherEnabled: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("refresherEnabled", true)
|
||||
},
|
||||
// 设置自定义下拉刷新阈值，默认为80rpx
|
||||
refresherThreshold: {
|
||||
type: [Number, String],
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("refresherThreshold", "80rpx")
|
||||
},
|
||||
// 设置系统下拉刷新默认样式，支持设置 black，white，none，none 表示不使用默认样式，默认为black
|
||||
refresherDefaultStyle: {
|
||||
type: String,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("refresherDefaultStyle", "black")
|
||||
},
|
||||
// 设置自定义下拉刷新区域背景
|
||||
refresherBackground: {
|
||||
type: String,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("refresherBackground", "transparent")
|
||||
},
|
||||
// 设置固定的自定义下拉刷新区域背景
|
||||
refresherFixedBackground: {
|
||||
type: String,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("refresherFixedBackground", "transparent")
|
||||
},
|
||||
// 设置固定的自定义下拉刷新区域高度，默认为0
|
||||
refresherFixedBacHeight: {
|
||||
type: [Number, String],
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("refresherFixedBacHeight", 0)
|
||||
},
|
||||
// 设置自定义下拉刷新下拉超出阈值后继续下拉位移衰减的比例，范围0-1，值越大代表衰减越多。默认为0.65(nvue无效)
|
||||
refresherOutRate: {
|
||||
type: Number,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("refresherOutRate", 0.65)
|
||||
},
|
||||
// 是否开启下拉进入二楼功能，默认为否
|
||||
refresherF2Enabled: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("refresherF2Enabled", false)
|
||||
},
|
||||
// 下拉进入二楼阈值，默认为200rpx
|
||||
refresherF2Threshold: {
|
||||
type: [Number, String],
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("refresherF2Threshold", "200rpx")
|
||||
},
|
||||
// 下拉进入二楼动画时间，单位为毫秒，默认为200毫秒
|
||||
refresherF2Duration: {
|
||||
type: [Number, String],
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("refresherF2Duration", 200)
|
||||
},
|
||||
// 下拉进入二楼状态松手后是否弹出二楼，默认为是
|
||||
showRefresherF2: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("showRefresherF2", true)
|
||||
},
|
||||
// 设置自定义下拉刷新下拉时实际下拉位移与用户下拉距离的比值，默认为0.75，即代表若用户下拉10px，则实际位移为7.5px(nvue无效)
|
||||
refresherPullRate: {
|
||||
type: Number,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("refresherPullRate", 0.75)
|
||||
},
|
||||
// 是否显示最后更新时间，默认为否
|
||||
showRefresherUpdateTime: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("showRefresherUpdateTime", false)
|
||||
},
|
||||
// 如果需要区别不同页面的最后更新时间，请为不同页面的z-paging的`refresher-update-time-key`设置不同的字符串
|
||||
refresherUpdateTimeKey: {
|
||||
type: String,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("refresherUpdateTimeKey", "default")
|
||||
},
|
||||
// 下拉刷新时下拉到“松手立即刷新”或“松手进入二楼”状态时是否使手机短振动，默认为否（h5无效）
|
||||
refresherVibrate: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("refresherVibrate", false)
|
||||
},
|
||||
// 下拉刷新时是否禁止下拉刷新view跟随用户触摸竖直移动，默认为否。注意此属性只是禁止下拉刷新view移动，其他下拉刷新逻辑依然会正常触发
|
||||
refresherNoTransform: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("refresherNoTransform", false)
|
||||
},
|
||||
// 是否开启下拉刷新状态栏占位，适用于隐藏导航栏时，下拉刷新需要避开状态栏高度的情况，默认为否
|
||||
useRefresherStatusBarPlaceholder: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("useRefresherStatusBarPlaceholder", false)
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
R: uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.Refresher,
|
||||
//下拉刷新状态
|
||||
refresherStatus: uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.Refresher.Default,
|
||||
refresherTouchstartY: 0,
|
||||
lastRefresherTouchmove: null,
|
||||
refresherReachMaxAngle: true,
|
||||
refresherTransform: "translateY(0px)",
|
||||
refresherTransition: "",
|
||||
finalRefresherDefaultStyle: "black",
|
||||
refresherRevealStackCount: 0,
|
||||
refresherCompleteTimeout: null,
|
||||
refresherCompleteSubTimeout: null,
|
||||
refresherEndTimeout: null,
|
||||
isTouchmovingTimeout: null,
|
||||
refresherTriggered: false,
|
||||
isTouchmoving: false,
|
||||
isTouchEnded: false,
|
||||
isUserPullDown: false,
|
||||
privateRefresherEnabled: -1,
|
||||
privateShowRefresherWhenReload: false,
|
||||
customRefresherHeight: -1,
|
||||
showCustomRefresher: false,
|
||||
doRefreshAnimateAfter: false,
|
||||
isRefresherInComplete: false,
|
||||
showF2: false,
|
||||
f2Transform: "",
|
||||
pullDownTimeStamp: 0,
|
||||
moveDis: 0,
|
||||
oldMoveDis: 0,
|
||||
currentDis: 0,
|
||||
oldCurrentMoveDis: 0,
|
||||
oldRefresherTouchmoveY: 0,
|
||||
oldTouchDirection: "",
|
||||
oldEmitedTouchDirection: "",
|
||||
oldPullingDistance: -1,
|
||||
refresherThresholdUpdateTag: 0
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
refresherDefaultStyle: {
|
||||
handler(newVal) {
|
||||
if (newVal.length) {
|
||||
this.finalRefresherDefaultStyle = newVal;
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
refresherStatus(newVal) {
|
||||
newVal === uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.Refresher.Loading && this._cleanRefresherEndTimeout();
|
||||
this.refresherVibrate && (newVal === uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.Refresher.ReleaseToRefresh || newVal === uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.Refresher.GoF2) && this._doVibrateShort();
|
||||
this.$emit("refresherStatusChange", newVal);
|
||||
this.$emit("update:refresherStatus", newVal);
|
||||
},
|
||||
// 监听当前下拉刷新启用/禁用状态
|
||||
refresherEnabled(newVal) {
|
||||
!newVal && this.endRefresh();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
pullDownDisTimeStamp() {
|
||||
return 1e3 / this.refresherFps;
|
||||
},
|
||||
refresherThresholdUnitConverted() {
|
||||
return uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.addUnit(this.refresherThreshold, this.unit);
|
||||
},
|
||||
finalRefresherEnabled() {
|
||||
if (this.useChatRecordMode)
|
||||
return false;
|
||||
if (this.privateRefresherEnabled === -1)
|
||||
return this.refresherEnabled;
|
||||
return this.privateRefresherEnabled === 1;
|
||||
},
|
||||
finalRefresherThreshold() {
|
||||
let refresherThreshold = this.refresherThresholdUnitConverted;
|
||||
let idDefault = false;
|
||||
if (refresherThreshold === uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.addUnit(80, this.unit)) {
|
||||
idDefault = true;
|
||||
if (this.showRefresherUpdateTime) {
|
||||
refresherThreshold = uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.addUnit(120, this.unit);
|
||||
}
|
||||
}
|
||||
if (idDefault && this.customRefresherHeight > 0)
|
||||
return this.customRefresherHeight + this.finalRefresherThresholdPlaceholder;
|
||||
return uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.convertToPx(refresherThreshold) + this.finalRefresherThresholdPlaceholder;
|
||||
},
|
||||
finalRefresherF2Threshold() {
|
||||
return uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.convertToPx(uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.addUnit(this.refresherF2Threshold, this.unit));
|
||||
},
|
||||
finalRefresherThresholdPlaceholder() {
|
||||
return this.useRefresherStatusBarPlaceholder ? this.statusBarHeight : 0;
|
||||
},
|
||||
finalRefresherFixedBacHeight() {
|
||||
return uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.convertToPx(this.refresherFixedBacHeight);
|
||||
},
|
||||
finalRefresherThemeStyle() {
|
||||
return this.refresherThemeStyle.length ? this.refresherThemeStyle : this.defaultThemeStyle;
|
||||
},
|
||||
finalRefresherOutRate() {
|
||||
let rate = this.refresherOutRate;
|
||||
rate = Math.max(0, rate);
|
||||
rate = Math.min(1, rate);
|
||||
return rate;
|
||||
},
|
||||
finalRefresherPullRate() {
|
||||
let rate = this.refresherPullRate;
|
||||
rate = Math.max(0, rate);
|
||||
return rate;
|
||||
},
|
||||
finalRefresherTransform() {
|
||||
if (this.refresherNoTransform || this.refresherTransform === "translateY(0px)")
|
||||
return "none";
|
||||
return this.refresherTransform;
|
||||
},
|
||||
finalShowRefresherWhenReload() {
|
||||
return this.showRefresherWhenReload || this.privateShowRefresherWhenReload;
|
||||
},
|
||||
finalRefresherTriggered() {
|
||||
if (!(this.finalRefresherEnabled && !this.useCustomRefresher))
|
||||
return false;
|
||||
return this.refresherTriggered;
|
||||
},
|
||||
showRefresher() {
|
||||
const showRefresher = this.finalRefresherEnabled || this.useCustomRefresher && !this.useChatRecordMode;
|
||||
this.active && this.customRefresherHeight === -1 && showRefresher && this.updateCustomRefresherHeight();
|
||||
return showRefresher;
|
||||
},
|
||||
hasTouchmove() {
|
||||
return this.watchRefresherTouchmove;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 终止下拉刷新状态
|
||||
endRefresh() {
|
||||
this.totalData = this.realTotalData;
|
||||
this._refresherEnd();
|
||||
this._endSystemLoadingAndRefresh();
|
||||
this._handleScrollViewBounce({ bounce: true });
|
||||
this.$nextTick(() => {
|
||||
this.refresherTriggered = false;
|
||||
});
|
||||
},
|
||||
// 手动更新自定义下拉刷新view高度
|
||||
updateCustomRefresherHeight() {
|
||||
uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.delay(() => this.$nextTick(this._updateCustomRefresherHeight));
|
||||
},
|
||||
// 关闭二楼
|
||||
closeF2() {
|
||||
this._handleCloseF2();
|
||||
},
|
||||
// 自定义下拉刷新被触发
|
||||
_onRefresh(fromScrollView = false, isUserPullDown = true) {
|
||||
if (fromScrollView && !(this.finalRefresherEnabled && !this.useCustomRefresher))
|
||||
return;
|
||||
this.$emit("onRefresh");
|
||||
this.$emit("Refresh");
|
||||
if (this.loading || this.isRefresherInComplete)
|
||||
return;
|
||||
this.loadingType = uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.LoadingType.Refresher;
|
||||
if (this.nShowRefresherReveal)
|
||||
return;
|
||||
this.isUserPullDown = isUserPullDown;
|
||||
this.isUserReload = !isUserPullDown;
|
||||
this._startLoading(true);
|
||||
this.refresherTriggered = true;
|
||||
if (this.reloadWhenRefresh && isUserPullDown) {
|
||||
this.useChatRecordMode ? this._onLoadingMore("click") : this._reload(false, false, isUserPullDown);
|
||||
}
|
||||
},
|
||||
// 自定义下拉刷新被复位
|
||||
_onRestore() {
|
||||
this.refresherTriggered = "restore";
|
||||
this.$emit("onRestore");
|
||||
this.$emit("Restore");
|
||||
},
|
||||
// 进一步处理touch开始结果
|
||||
_handleRefresherTouchstart(touch) {
|
||||
if (!this.loading && this.isTouchEnded) {
|
||||
this.isTouchmoving = false;
|
||||
}
|
||||
this.loadingType = uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.LoadingType.Refresher;
|
||||
this.isTouchmovingTimeout && clearTimeout(this.isTouchmovingTimeout);
|
||||
this.isTouchEnded = false;
|
||||
this.refresherTransition = "";
|
||||
this.refresherTouchstartY = touch.touchY;
|
||||
this.$emit("refresherTouchstart", this.refresherTouchstartY);
|
||||
this.lastRefresherTouchmove = touch;
|
||||
this._cleanRefresherCompleteTimeout();
|
||||
this._cleanRefresherEndTimeout();
|
||||
},
|
||||
// 非app-vue或微信小程序或QQ小程序或h5平台，使用js控制下拉刷新
|
||||
// 进一步处理touch中结果
|
||||
_handleRefresherTouchmove(moveDis, touch) {
|
||||
this.refresherReachMaxAngle = true;
|
||||
this.isTouchmovingTimeout && clearTimeout(this.isTouchmovingTimeout);
|
||||
this.isTouchmoving = true;
|
||||
this.isTouchEnded = false;
|
||||
if (moveDis >= this.finalRefresherThreshold) {
|
||||
this.refresherStatus = this.refresherF2Enabled && moveDis >= this.finalRefresherF2Threshold ? uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.Refresher.GoF2 : uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.Refresher.ReleaseToRefresh;
|
||||
} else {
|
||||
this.refresherStatus = uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.Refresher.Default;
|
||||
}
|
||||
this.moveDis = moveDis;
|
||||
},
|
||||
// 进一步处理touch结束结果
|
||||
_handleRefresherTouchend(moveDis) {
|
||||
this.isTouchmovingTimeout && clearTimeout(this.isTouchmovingTimeout);
|
||||
this.refresherReachMaxAngle = true;
|
||||
this.isTouchEnded = true;
|
||||
const refresherThreshold = this.finalRefresherThreshold;
|
||||
if (moveDis >= refresherThreshold && (this.refresherStatus === uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.Refresher.ReleaseToRefresh || this.refresherStatus === uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.Refresher.GoF2)) {
|
||||
if (this.refresherStatus === uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.Refresher.GoF2) {
|
||||
this._handleGoF2();
|
||||
this._refresherEnd();
|
||||
} else {
|
||||
uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.delay(() => {
|
||||
this._emitTouchmove({ pullingDistance: refresherThreshold, dy: this.moveDis - refresherThreshold });
|
||||
}, 0.1);
|
||||
this.moveDis = refresherThreshold;
|
||||
this.refresherStatus = uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.Refresher.Loading;
|
||||
this._doRefresherLoad();
|
||||
}
|
||||
} else {
|
||||
this._refresherEnd();
|
||||
this.isTouchmovingTimeout = uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.delay(() => {
|
||||
this.isTouchmoving = false;
|
||||
}, this.refresherDefaultDuration);
|
||||
}
|
||||
this.scrollEnable = true;
|
||||
this.$emit("refresherTouchend", moveDis);
|
||||
},
|
||||
// 处理列表触摸开始事件
|
||||
_handleListTouchstart() {
|
||||
if (this.useChatRecordMode && this.autoHideKeyboardWhenChat) {
|
||||
common_vendor.index.hideKeyboard();
|
||||
this.$emit("hidedKeyboard");
|
||||
}
|
||||
},
|
||||
// 处理scroll-view bounce是否生效
|
||||
_handleScrollViewBounce({ bounce }) {
|
||||
if (!this.usePageScroll && !this.scrollToTopBounceEnabled) {
|
||||
if (this.wxsScrollTop <= 5) {
|
||||
this.refresherTransition = "";
|
||||
this.scrollEnable = bounce;
|
||||
} else if (bounce) {
|
||||
this.scrollEnable = bounce;
|
||||
}
|
||||
}
|
||||
},
|
||||
// wxs正在下拉状态改变处理
|
||||
_handleWxsPullingDownStatusChange(onPullingDown) {
|
||||
this.wxsOnPullingDown = onPullingDown;
|
||||
if (onPullingDown && !this.useChatRecordMode) {
|
||||
this.renderPropScrollTop = 0;
|
||||
}
|
||||
},
|
||||
// wxs正在下拉处理
|
||||
_handleWxsPullingDown({ moveDis, diffDis }) {
|
||||
this._emitTouchmove({ pullingDistance: moveDis, dy: diffDis });
|
||||
},
|
||||
// wxs触摸方向改变
|
||||
_handleTouchDirectionChange({ direction }) {
|
||||
this.$emit("touchDirectionChange", direction);
|
||||
},
|
||||
// wxs通知更新其props
|
||||
_handlePropUpdate() {
|
||||
this.wxsPropType = uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.getTime().toString();
|
||||
},
|
||||
// 下拉刷新结束
|
||||
_refresherEnd(shouldEndLoadingDelay = true, fromAddData = false, isUserPullDown = false, setLoading = true) {
|
||||
if (this.loadingType === uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.LoadingType.Refresher) {
|
||||
const refresherCompleteDelay = fromAddData && (isUserPullDown || this.showRefresherWhenReload) ? this.refresherCompleteDelay : 0;
|
||||
const refresherStatus = refresherCompleteDelay > 0 ? uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.Refresher.Complete : uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.Refresher.Default;
|
||||
if (this.finalShowRefresherWhenReload) {
|
||||
const stackCount = this.refresherRevealStackCount;
|
||||
this.refresherRevealStackCount--;
|
||||
if (stackCount > 1)
|
||||
return;
|
||||
}
|
||||
this._cleanRefresherEndTimeout();
|
||||
this.refresherEndTimeout = uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.delay(() => {
|
||||
this.refresherStatus = refresherStatus;
|
||||
if (refresherStatus !== uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.Refresher.Complete) {
|
||||
this.isRefresherInComplete = false;
|
||||
}
|
||||
}, this.refresherStatus !== uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.Refresher.Default && refresherStatus === uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.Refresher.Default ? this.refresherCompleteDuration : 0);
|
||||
if (refresherCompleteDelay > 0) {
|
||||
this.isRefresherInComplete = true;
|
||||
}
|
||||
this._cleanRefresherCompleteTimeout();
|
||||
this.refresherCompleteTimeout = uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.delay(() => {
|
||||
let animateDuration = 1;
|
||||
const animateType = this.refresherEndBounceEnabled && fromAddData ? "cubic-bezier(0.19,1.64,0.42,0.72)" : "linear";
|
||||
if (fromAddData) {
|
||||
animateDuration = this.refresherEndBounceEnabled ? this.refresherCompleteDuration / 1e3 : this.refresherCompleteDuration / 3e3;
|
||||
}
|
||||
this.refresherTransition = `transform ${fromAddData ? animateDuration : this.refresherDefaultDuration / 1e3}s ${animateType}`;
|
||||
this.wxsPropType = this.refresherTransition + "end" + uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.getTime();
|
||||
this.moveDis = 0;
|
||||
if (refresherStatus === uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.Refresher.Complete) {
|
||||
if (this.refresherCompleteSubTimeout) {
|
||||
clearTimeout(this.refresherCompleteSubTimeout);
|
||||
this.refresherCompleteSubTimeout = null;
|
||||
}
|
||||
this.refresherCompleteSubTimeout = uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.delay(() => {
|
||||
this.$nextTick(() => {
|
||||
this.refresherStatus = uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.Refresher.Default;
|
||||
this.isRefresherInComplete = false;
|
||||
});
|
||||
}, animateDuration * 800);
|
||||
}
|
||||
this._emitTouchmove({ pullingDistance: 0, dy: this.moveDis });
|
||||
}, refresherCompleteDelay);
|
||||
}
|
||||
if (setLoading) {
|
||||
uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.delay(() => this.loading = false, shouldEndLoadingDelay ? 10 : 0);
|
||||
isUserPullDown && this._onRestore();
|
||||
}
|
||||
},
|
||||
// 处理进入二楼
|
||||
_handleGoF2() {
|
||||
if (this.showF2 || !this.refresherF2Enabled)
|
||||
return;
|
||||
this.$emit("refresherF2Change", "go");
|
||||
if (!this.showRefresherF2)
|
||||
return;
|
||||
this.f2Transform = `translateY(${-this.superContentHeight}px)`;
|
||||
this.showF2 = true;
|
||||
uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.delay(() => {
|
||||
this.f2Transform = "translateY(0px)";
|
||||
}, 100, "f2ShowDelay");
|
||||
},
|
||||
// 处理退出二楼
|
||||
_handleCloseF2() {
|
||||
if (!this.showF2 || !this.refresherF2Enabled)
|
||||
return;
|
||||
this.$emit("refresherF2Change", "close");
|
||||
if (!this.showRefresherF2)
|
||||
return;
|
||||
this.f2Transform = `translateY(${-this.superContentHeight}px)`;
|
||||
uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.delay(() => {
|
||||
this.showF2 = false;
|
||||
this.nF2Opacity = 0;
|
||||
}, this.refresherF2Duration, "f2CloseDelay");
|
||||
},
|
||||
// 模拟用户手动触发下拉刷新
|
||||
_doRefresherRefreshAnimate() {
|
||||
this._cleanRefresherCompleteTimeout();
|
||||
const doRefreshAnimateAfter = !this.doRefreshAnimateAfter && this.finalShowRefresherWhenReload && this.customRefresherHeight === -1 && this.refresherThreshold === uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.addUnit(80, this.unit);
|
||||
if (doRefreshAnimateAfter) {
|
||||
this.doRefreshAnimateAfter = true;
|
||||
return;
|
||||
}
|
||||
this.refresherRevealStackCount++;
|
||||
this.wxsPropType = "begin" + uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.getTime();
|
||||
this.moveDis = this.finalRefresherThreshold;
|
||||
this.refresherStatus = uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.Refresher.Loading;
|
||||
this.isTouchmoving = true;
|
||||
this.isTouchmovingTimeout && clearTimeout(this.isTouchmovingTimeout);
|
||||
this._doRefresherLoad(false);
|
||||
},
|
||||
// 触发下拉刷新
|
||||
_doRefresherLoad(isUserPullDown = true) {
|
||||
this._onRefresh(false, isUserPullDown);
|
||||
this.loading = true;
|
||||
},
|
||||
// 更新自定义下拉刷新view高度
|
||||
_updateCustomRefresherHeight() {
|
||||
this._getNodeClientRect(".zp-custom-refresher-slot-view").then((res) => {
|
||||
this.customRefresherHeight = res ? res[0].height : 0;
|
||||
this.showCustomRefresher = this.customRefresherHeight > 0;
|
||||
if (this.doRefreshAnimateAfter) {
|
||||
this.doRefreshAnimateAfter = false;
|
||||
this._doRefresherRefreshAnimate();
|
||||
}
|
||||
});
|
||||
},
|
||||
// emit pullingDown事件
|
||||
_emitTouchmove(e) {
|
||||
e.viewHeight = this.finalRefresherThreshold;
|
||||
e.rate = e.viewHeight > 0 ? e.pullingDistance / e.viewHeight : 0;
|
||||
this.hasTouchmove && this.oldPullingDistance !== e.pullingDistance && this.$emit("refresherTouchmove", e);
|
||||
this.oldPullingDistance = e.pullingDistance;
|
||||
},
|
||||
// 清除refresherCompleteTimeout
|
||||
_cleanRefresherCompleteTimeout() {
|
||||
this.refresherCompleteTimeout = this._cleanTimeout(this.refresherCompleteTimeout);
|
||||
},
|
||||
// 清除refresherEndTimeout
|
||||
_cleanRefresherEndTimeout() {
|
||||
this.refresherEndTimeout = this._cleanTimeout(this.refresherEndTimeout);
|
||||
}
|
||||
}
|
||||
};
|
||||
exports.refresherModule = refresherModule;
|
||||
//# sourceMappingURL=../../../../../../../.sourcemap/mp-weixin/uni_modules/z-paging/components/z-paging/js/modules/refresher.js.map
|
||||
Vendored
+428
@@ -0,0 +1,428 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../../../common/vendor.js");
|
||||
const uni_modules_zPaging_components_zPaging_js_zPagingUtils = require("../z-paging-utils.js");
|
||||
const uni_modules_zPaging_components_zPaging_js_zPagingEnum = require("../z-paging-enum.js");
|
||||
const scrollerModule = {
|
||||
props: {
|
||||
// 使用页面滚动，默认为否，当设置为是时则使用页面的滚动而非此组件内部的scroll-view的滚动，使用页面滚动时z-paging无需设置确定的高度且对于长列表展示性能更高，但配置会略微繁琐
|
||||
usePageScroll: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("usePageScroll", false)
|
||||
},
|
||||
// 是否可以滚动，使用内置scroll-view和nvue时有效，默认为是
|
||||
scrollable: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("scrollable", true)
|
||||
},
|
||||
// 控制是否出现滚动条，默认为是
|
||||
showScrollbar: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("showScrollbar", true)
|
||||
},
|
||||
// 是否允许横向滚动，默认为否
|
||||
scrollX: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("scrollX", false)
|
||||
},
|
||||
// iOS设备上滚动到顶部时是否允许回弹效果，默认为否。关闭回弹效果后可使滚动到顶部与下拉刷新更连贯，但是有吸顶view时滚动到顶部时可能出现抖动。
|
||||
scrollToTopBounceEnabled: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("scrollToTopBounceEnabled", false)
|
||||
},
|
||||
// iOS设备上滚动到底部时是否允许回弹效果，默认为是。
|
||||
scrollToBottomBounceEnabled: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("scrollToBottomBounceEnabled", true)
|
||||
},
|
||||
// 在设置滚动条位置时使用动画过渡，默认为否
|
||||
scrollWithAnimation: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("scrollWithAnimation", false)
|
||||
},
|
||||
// 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
|
||||
scrollIntoView: {
|
||||
type: String,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("scrollIntoView", "")
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
scrollTop: 0,
|
||||
oldScrollTop: 0,
|
||||
scrollLeft: 0,
|
||||
oldScrollLeft: 0,
|
||||
scrollViewStyle: {},
|
||||
scrollViewContainerStyle: {},
|
||||
scrollViewInStyle: {},
|
||||
pageScrollTop: -1,
|
||||
scrollEnable: true,
|
||||
privateScrollWithAnimation: -1,
|
||||
cacheScrollNodeHeight: -1,
|
||||
superContentHeight: 0
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
oldScrollTop(newVal) {
|
||||
!this.usePageScroll && this._scrollTopChange(newVal, false);
|
||||
},
|
||||
pageScrollTop(newVal) {
|
||||
this.usePageScroll && this._scrollTopChange(newVal, true);
|
||||
},
|
||||
usePageScroll: {
|
||||
handler(newVal) {
|
||||
this.loaded && this.autoHeight && this._setAutoHeight(!newVal);
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
finalScrollTop(newVal) {
|
||||
this.renderPropScrollTop = newVal < 6 ? 0 : 10;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
finalScrollWithAnimation() {
|
||||
if (this.privateScrollWithAnimation !== -1) {
|
||||
return this.privateScrollWithAnimation === 1;
|
||||
}
|
||||
return this.scrollWithAnimation;
|
||||
},
|
||||
finalScrollViewStyle() {
|
||||
if (this.superContentZIndex != 1) {
|
||||
this.scrollViewStyle["z-index"] = this.superContentZIndex;
|
||||
this.scrollViewStyle["position"] = "relative";
|
||||
}
|
||||
return this.scrollViewStyle;
|
||||
},
|
||||
finalScrollTop() {
|
||||
return this.usePageScroll ? this.pageScrollTop : this.oldScrollTop;
|
||||
},
|
||||
// 当前是否是旧版webview
|
||||
finalIsOldWebView() {
|
||||
return this.isOldWebView && !this.usePageScroll;
|
||||
},
|
||||
// 当前scroll-view/list-view是否允许滚动
|
||||
finalScrollable() {
|
||||
return this.scrollable && !this.usePageScroll && this.scrollEnable && (this.refresherCompleteScrollable ? true : this.refresherStatus !== uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.Refresher.Complete) && (this.refresherRefreshingScrollable ? true : this.refresherStatus !== uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.Refresher.Loading);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 滚动到顶部，animate为是否展示滚动动画，默认为是
|
||||
scrollToTop(animate, checkReverse = true) {
|
||||
if (this.useChatRecordMode && checkReverse && !this.isChatRecordModeAndNotInversion) {
|
||||
this.scrollToBottom(animate, false);
|
||||
return;
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this._scrollToTop(animate, false);
|
||||
});
|
||||
},
|
||||
// 滚动到底部，animate为是否展示滚动动画，默认为是
|
||||
scrollToBottom(animate, checkReverse = true) {
|
||||
if (this.useChatRecordMode && checkReverse && !this.isChatRecordModeAndNotInversion) {
|
||||
this.scrollToTop(animate, false);
|
||||
return;
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this._scrollToBottom(animate);
|
||||
});
|
||||
},
|
||||
// 滚动到指定view(vue中有效)。sel为需要滚动的view的id值，不包含"#"；offset为偏移量，单位为px；animate为是否展示滚动动画，默认为否
|
||||
scrollIntoViewById(sel, offset, animate) {
|
||||
this._scrollIntoView(sel, offset, animate);
|
||||
},
|
||||
// 滚动到指定view(vue中有效)。nodeTop为需要滚动的view的top值(通过uni.createSelectorQuery()获取)；offset为偏移量，单位为px；animate为是否展示滚动动画，默认为否
|
||||
scrollIntoViewByNodeTop(nodeTop, offset, animate) {
|
||||
this.scrollTop = this.oldScrollTop;
|
||||
this.$nextTick(() => {
|
||||
this._scrollIntoViewByNodeTop(nodeTop, offset, animate);
|
||||
});
|
||||
},
|
||||
// y轴滚动到指定位置(vue中有效)。y为与顶部的距离，单位为px；offset为偏移量，单位为px；animate为是否展示滚动动画，默认为否
|
||||
scrollToY(y, offset, animate) {
|
||||
this.scrollTop = this.oldScrollTop;
|
||||
this.$nextTick(() => {
|
||||
this._scrollToY(y, offset, animate);
|
||||
});
|
||||
},
|
||||
// x轴滚动到指定位置(非页面滚动且在vue中有效)。x为与左侧的距离，单位为px；offset为偏移量，单位为px；animate为是否展示滚动动画，默认为否
|
||||
scrollToX(x, offset, animate) {
|
||||
this.scrollLeft = this.oldScrollLeft;
|
||||
this.$nextTick(() => {
|
||||
this._scrollToX(x, offset, animate);
|
||||
});
|
||||
},
|
||||
// 滚动到指定view(nvue中和虚拟列表中有效)。index为需要滚动的view的index(第几个，从0开始)；offset为偏移量，单位为px；animate为是否展示滚动动画，默认为否
|
||||
scrollIntoViewByIndex(index, offset, animate) {
|
||||
if (index >= this.realTotalData.length) {
|
||||
uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.consoleErr("当前滚动的index超出已渲染列表长度，请先通过refreshToPage加载到对应index页并等待渲染成功后再调用此方法！");
|
||||
return;
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
if (this.finalUseVirtualList) {
|
||||
const isCellFixed = this.cellHeightMode === uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.CellHeightMode.Fixed;
|
||||
uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.delay(() => {
|
||||
if (this.finalUseVirtualList) {
|
||||
const scrollTop = isCellFixed ? this.virtualCellHeight * index : this.virtualHeightCacheList[index].lastTotalHeight;
|
||||
this.scrollToY(scrollTop, offset, animate);
|
||||
}
|
||||
}, isCellFixed ? 0 : 100);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 滚动到指定view(nvue中有效)。view为需要滚动的view(通过`this.$refs.xxx`获取)，不包含"#"；offset为偏移量，单位为px；animate为是否展示滚动动画，默认为否
|
||||
scrollIntoViewByView(view, offset, animate) {
|
||||
this._scrollIntoView(view, offset, animate);
|
||||
},
|
||||
// 当使用页面滚动并且自定义下拉刷新时，请在页面的onPageScroll中调用此方法，告知z-paging当前的pageScrollTop，否则会导致在任意位置都可以下拉刷新
|
||||
updatePageScrollTop(value) {
|
||||
this.pageScrollTop = value;
|
||||
},
|
||||
// 当使用页面滚动并且设置了slot="top"时，默认初次加载会自动获取其高度，并使内部容器下移，当slot="top"的view高度动态改变时，在其高度需要更新时调用此方法
|
||||
updatePageScrollTopHeight() {
|
||||
this._updatePageScrollTopOrBottomHeight("top");
|
||||
},
|
||||
// 当使用页面滚动并且设置了slot="bottom"时，默认初次加载会自动获取其高度，并使内部容器下移，当slot="bottom"的view高度动态改变时，在其高度需要更新时调用此方法
|
||||
updatePageScrollBottomHeight() {
|
||||
this._updatePageScrollTopOrBottomHeight("bottom");
|
||||
},
|
||||
// 更新slot="left"和slot="right"宽度，当slot="left"或slot="right"宽度动态改变时调用
|
||||
updateLeftAndRightWidth() {
|
||||
if (!this.finalIsOldWebView)
|
||||
return;
|
||||
this.$nextTick(() => this._updateLeftAndRightWidth(this.scrollViewContainerStyle, "zp-page"));
|
||||
},
|
||||
// 更新z-paging内置scroll-view的scrollTop
|
||||
updateScrollViewScrollTop(scrollTop, animate = true) {
|
||||
this._updatePrivateScrollWithAnimation(animate);
|
||||
this.scrollTop = this.oldScrollTop;
|
||||
this.$nextTick(() => {
|
||||
this.scrollTop = scrollTop;
|
||||
this.oldScrollTop = this.scrollTop;
|
||||
});
|
||||
},
|
||||
// 当滚动到顶部时
|
||||
_onScrollToUpper() {
|
||||
this._emitScrollEvent("scrolltoupper");
|
||||
this.$emit("scrollTopChange", 0);
|
||||
this.$nextTick(() => {
|
||||
this.oldScrollTop = 0;
|
||||
});
|
||||
},
|
||||
// 当滚动到底部时
|
||||
_onScrollToLower(e) {
|
||||
(!e.detail || !e.detail.direction || e.detail.direction === "bottom") && this.toBottomLoadingMoreEnabled && this._onLoadingMore(this.useChatRecordMode ? "click" : "toBottom");
|
||||
},
|
||||
// 滚动到顶部
|
||||
_scrollToTop(animate = true, isPrivate = true) {
|
||||
if (this.usePageScroll) {
|
||||
this.$nextTick(() => {
|
||||
common_vendor.index.pageScrollTo({
|
||||
scrollTop: 0,
|
||||
duration: animate ? 100 : 0
|
||||
});
|
||||
});
|
||||
return;
|
||||
}
|
||||
this._updatePrivateScrollWithAnimation(animate);
|
||||
this.scrollTop = this.oldScrollTop;
|
||||
this.$nextTick(() => {
|
||||
this.scrollTop = 0;
|
||||
this.oldScrollTop = this.scrollTop;
|
||||
});
|
||||
},
|
||||
// 滚动到底部
|
||||
async _scrollToBottom(animate = true) {
|
||||
if (this.usePageScroll) {
|
||||
this.$nextTick(() => {
|
||||
common_vendor.index.pageScrollTo({
|
||||
scrollTop: Number.MAX_VALUE,
|
||||
duration: animate ? 100 : 0
|
||||
});
|
||||
});
|
||||
return;
|
||||
}
|
||||
try {
|
||||
this._updatePrivateScrollWithAnimation(animate);
|
||||
const pagingContainerNode = await this._getNodeClientRect(".zp-paging-container");
|
||||
const scrollViewNode = await this._getNodeClientRect(".zp-scroll-view");
|
||||
const pagingContainerH = pagingContainerNode ? pagingContainerNode[0].height : 0;
|
||||
const scrollViewH = scrollViewNode ? scrollViewNode[0].height : 0;
|
||||
if (pagingContainerH > scrollViewH) {
|
||||
this.scrollTop = this.oldScrollTop;
|
||||
this.$nextTick(() => {
|
||||
this.scrollTop = pagingContainerH - scrollViewH + this.virtualPlaceholderTopHeight;
|
||||
this.oldScrollTop = this.scrollTop;
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
}
|
||||
},
|
||||
// 滚动到指定view
|
||||
_scrollIntoView(sel, offset = 0, animate = false, finishCallback) {
|
||||
try {
|
||||
this.scrollTop = this.oldScrollTop;
|
||||
this.$nextTick(() => {
|
||||
this._getNodeClientRect("#" + sel.replace("#", ""), this.$parent).then((node) => {
|
||||
if (node) {
|
||||
let nodeTop = node[0].top;
|
||||
this._scrollIntoViewByNodeTop(nodeTop, offset, animate);
|
||||
finishCallback && finishCallback();
|
||||
}
|
||||
});
|
||||
});
|
||||
} catch (e) {
|
||||
}
|
||||
},
|
||||
// 通过nodeTop滚动到指定view
|
||||
_scrollIntoViewByNodeTop(nodeTop, offset = 0, animate = false) {
|
||||
if (this.isChatRecordModeAndInversion) {
|
||||
this._getNodeClientRect(".zp-scroll-view").then((sNode) => {
|
||||
if (sNode) {
|
||||
this._scrollToY(sNode[0].height - nodeTop, offset, animate, true);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this._scrollToY(nodeTop, offset, animate, true);
|
||||
}
|
||||
},
|
||||
// y轴滚动到指定位置
|
||||
_scrollToY(y, offset = 0, animate = false, addScrollTop = false) {
|
||||
this._updatePrivateScrollWithAnimation(animate);
|
||||
uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.delay(() => {
|
||||
if (this.usePageScroll) {
|
||||
if (addScrollTop && this.pageScrollTop !== -1) {
|
||||
y += this.pageScrollTop;
|
||||
}
|
||||
const scrollTop = y - offset;
|
||||
common_vendor.index.pageScrollTo({
|
||||
scrollTop,
|
||||
duration: animate ? 100 : 0
|
||||
});
|
||||
} else {
|
||||
if (addScrollTop) {
|
||||
y += this.oldScrollTop;
|
||||
}
|
||||
this.scrollTop = y - offset;
|
||||
}
|
||||
}, 10);
|
||||
},
|
||||
// x轴滚动到指定位置
|
||||
_scrollToX(x, offset = 0, animate = false) {
|
||||
this._updatePrivateScrollWithAnimation(animate);
|
||||
uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.delay(() => {
|
||||
if (!this.usePageScroll) {
|
||||
this.scrollLeft = x - offset;
|
||||
} else {
|
||||
uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.consoleErr("使用页面滚动时不支持scrollToX");
|
||||
}
|
||||
}, 10);
|
||||
},
|
||||
// scroll-view滚动中
|
||||
_scroll(e) {
|
||||
this.$emit("scroll", e);
|
||||
const { scrollTop, scrollLeft } = e.detail;
|
||||
this.finalUseVirtualList && this._updateVirtualScroll(scrollTop, this.oldScrollTop - scrollTop);
|
||||
this.oldScrollTop = scrollTop;
|
||||
this.oldScrollLeft = scrollLeft;
|
||||
const scrollDiff = e.detail.scrollHeight - this.oldScrollTop;
|
||||
!this.isIos && this._checkScrolledToBottom(scrollDiff);
|
||||
},
|
||||
// emit scrolltolower/scrolltoupper事件
|
||||
_emitScrollEvent(type) {
|
||||
const reversedType = type === "scrolltolower" ? "scrolltoupper" : "scrolltolower";
|
||||
const eventType = this.useChatRecordMode && !this.isChatRecordModeAndNotInversion ? reversedType : type;
|
||||
this.$emit(eventType);
|
||||
},
|
||||
// 更新内置的scroll-view是否启用滚动动画
|
||||
_updatePrivateScrollWithAnimation(animate) {
|
||||
this.privateScrollWithAnimation = animate ? 1 : 0;
|
||||
uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.delay(() => this.$nextTick(() => {
|
||||
this.privateScrollWithAnimation = -1;
|
||||
}), 100, "updateScrollWithAnimationDelay");
|
||||
},
|
||||
// 检测scrollView是否要铺满屏幕
|
||||
_doCheckScrollViewShouldFullHeight(totalData) {
|
||||
if (this.autoFullHeight && this.usePageScroll && this.isTotalChangeFromAddData) {
|
||||
this.$nextTick(() => {
|
||||
this._checkScrollViewShouldFullHeight((scrollViewNode, pagingContainerNode) => {
|
||||
this._preCheckShowNoMoreInside(totalData, scrollViewNode, pagingContainerNode);
|
||||
});
|
||||
});
|
||||
} else {
|
||||
this._preCheckShowNoMoreInside(totalData);
|
||||
}
|
||||
},
|
||||
// 检测z-paging是否要全屏覆盖(当使用页面滚动并且不满全屏时，默认z-paging需要铺满全屏，避免数据过少时内部的empty-view无法正确展示)
|
||||
async _checkScrollViewShouldFullHeight(callback) {
|
||||
try {
|
||||
const scrollViewNode = await this._getNodeClientRect(".zp-scroll-view");
|
||||
const pagingContainerNode = await this._getNodeClientRect(".zp-paging-container-content");
|
||||
if (!scrollViewNode || !pagingContainerNode)
|
||||
return;
|
||||
const scrollViewHeight = pagingContainerNode[0].height;
|
||||
const scrollViewTop = scrollViewNode[0].top;
|
||||
if (this.isAddedData && scrollViewHeight + scrollViewTop <= this.windowHeight) {
|
||||
this._setAutoHeight(true, scrollViewNode);
|
||||
callback(scrollViewNode, pagingContainerNode);
|
||||
} else {
|
||||
this._setAutoHeight(false);
|
||||
callback(null, null);
|
||||
}
|
||||
} catch (e) {
|
||||
callback(null, null);
|
||||
}
|
||||
},
|
||||
// 更新缓存中z-paging整个内容容器高度
|
||||
async _updateCachedSuperContentHeight() {
|
||||
const superContentNode = await this._getNodeClientRect(".z-paging-content");
|
||||
if (superContentNode) {
|
||||
this.superContentHeight = superContentNode[0].height;
|
||||
}
|
||||
},
|
||||
// scrollTop改变时触发
|
||||
_scrollTopChange(newVal, isPageScrollTop) {
|
||||
this.$emit("scrollTopChange", newVal);
|
||||
this.$emit("update:scrollTop", newVal);
|
||||
this._checkShouldShowBackToTop(newVal);
|
||||
const scrollTop = newVal > 5 ? 6 : 0;
|
||||
if (isPageScrollTop && this.wxsPageScrollTop !== scrollTop) {
|
||||
this.wxsPageScrollTop = scrollTop;
|
||||
} else if (!isPageScrollTop && this.wxsScrollTop !== scrollTop) {
|
||||
this.wxsScrollTop = scrollTop;
|
||||
if (scrollTop > 6) {
|
||||
this.scrollEnable = true;
|
||||
}
|
||||
}
|
||||
},
|
||||
// 更新使用页面滚动时slot="top"或"bottom"插入view的高度
|
||||
_updatePageScrollTopOrBottomHeight(type) {
|
||||
if (!this.usePageScroll)
|
||||
return;
|
||||
this._doCheckScrollViewShouldFullHeight(this.realTotalData);
|
||||
const node = `.zp-page-${type}`;
|
||||
const marginText = `margin${type.slice(0, 1).toUpperCase() + type.slice(1)}`;
|
||||
let safeAreaInsetBottomAdd = this.safeAreaInsetBottom;
|
||||
this.$nextTick(() => {
|
||||
let delayTime = 0;
|
||||
uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.delay(() => {
|
||||
this._getNodeClientRect(node).then((res) => {
|
||||
if (res) {
|
||||
let pageScrollNodeHeight = res[0].height;
|
||||
if (type === "bottom") {
|
||||
if (safeAreaInsetBottomAdd) {
|
||||
pageScrollNodeHeight += this.safeAreaBottom;
|
||||
}
|
||||
} else {
|
||||
this.cacheTopHeight = pageScrollNodeHeight;
|
||||
}
|
||||
this.$set(this.scrollViewStyle, marginText, `${pageScrollNodeHeight}px`);
|
||||
} else if (safeAreaInsetBottomAdd) {
|
||||
this.$set(this.scrollViewStyle, marginText, `${this.safeAreaBottom}px`);
|
||||
}
|
||||
});
|
||||
}, delayTime);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
exports.scrollerModule = scrollerModule;
|
||||
//# sourceMappingURL=../../../../../../../.sourcemap/mp-weixin/uni_modules/z-paging/components/z-paging/js/modules/scroller.js.map
|
||||
Vendored
+499
@@ -0,0 +1,499 @@
|
||||
"use strict";
|
||||
const uni_modules_zPaging_components_zPaging_js_zPagingUtils = require("../z-paging-utils.js");
|
||||
const uni_modules_zPaging_components_zPaging_js_zPagingConstant = require("../z-paging-constant.js");
|
||||
const uni_modules_zPaging_components_zPaging_js_zPagingEnum = require("../z-paging-enum.js");
|
||||
const virtualListModule = {
|
||||
props: {
|
||||
// 是否使用虚拟列表，默认为否
|
||||
useVirtualList: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("useVirtualList", false)
|
||||
},
|
||||
// 在使用虚拟列表时，是否使用兼容模式，默认为否
|
||||
useCompatibilityMode: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("useCompatibilityMode", false)
|
||||
},
|
||||
// 使用兼容模式时传递的附加数据
|
||||
extraData: {
|
||||
type: Object,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("extraData", {})
|
||||
},
|
||||
// 是否在z-paging内部循环渲染列表(内置列表)，默认为否。若use-virtual-list为true，则此项恒为true
|
||||
useInnerList: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("useInnerList", false)
|
||||
},
|
||||
// 强制关闭inner-list，默认为false，如果为true将强制关闭innerList，适用于开启了虚拟列表后需要强制关闭inner-list的情况
|
||||
forceCloseInnerList: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("forceCloseInnerList", false)
|
||||
},
|
||||
// 内置列表cell的key名称，仅nvue有效，在nvue中开启use-inner-list时必须填此项
|
||||
cellKeyName: {
|
||||
type: String,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("cellKeyName", "")
|
||||
},
|
||||
// innerList样式
|
||||
innerListStyle: {
|
||||
type: Object,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("innerListStyle", {})
|
||||
},
|
||||
// innerCell样式
|
||||
innerCellStyle: {
|
||||
type: Object,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("innerCellStyle", {})
|
||||
},
|
||||
// 预加载的列表可视范围(列表高度)页数，默认为12，即预加载当前页及上下各12页的cell。此数值越大，则虚拟列表中加载的dom越多，内存消耗越大(会维持在一个稳定值)，但增加预加载页面数量可缓解快速滚动短暂白屏问题
|
||||
preloadPage: {
|
||||
type: [Number, String],
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("preloadPage", 12),
|
||||
validator: (value) => {
|
||||
if (value <= 0)
|
||||
uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.consoleErr("preload-page必须大于0！");
|
||||
return value > 0;
|
||||
}
|
||||
},
|
||||
// 虚拟列表cell高度模式，默认为fixed，也就是每个cell高度完全相同，将以第一个cell高度为准进行计算。可选值【dynamic】，即代表高度是动态非固定的，【dynamic】性能低于【fixed】。
|
||||
cellHeightMode: {
|
||||
type: String,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("cellHeightMode", uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.CellHeightMode.Fixed)
|
||||
},
|
||||
// 固定的cell高度，cellHeightMode=fixed才有效，若设置了值，则不计算第一个cell高度而使用设置的cell高度
|
||||
fixedCellHeight: {
|
||||
type: [Number, String],
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("fixedCellHeight", 0)
|
||||
},
|
||||
// 虚拟列表列数，默认为1。常用于每行有多列的情况，例如每行有2列数据，需要将此值设置为2
|
||||
virtualListCol: {
|
||||
type: [Number, String],
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("virtualListCol", 1)
|
||||
},
|
||||
// 虚拟列表scroll取样帧率，默认为80，过低容易出现白屏问题，过高容易出现卡顿问题
|
||||
virtualScrollFps: {
|
||||
type: [Number, String],
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("virtualScrollFps", 80)
|
||||
},
|
||||
// 虚拟列表cell id的前缀，适用于一个页面有多个虚拟列表的情况，用以区分不同虚拟列表cell的id，注意：请勿传数字或以数字开头的字符串。如设置为list1，则cell的id应为：list1-zp-id-${item.zp_index}
|
||||
virtualCellIdPrefix: {
|
||||
type: String,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("virtualCellIdPrefix", "")
|
||||
},
|
||||
// 虚拟列表是否使用swiper-item包裹，默认为否，此属性为了解决vue3+(微信小程序或QQ小程序)中，使用非内置列表写法时，若z-paging在swiper-item内存在无法获取slot插入的cell高度进而导致虚拟列表失败的问题
|
||||
// 仅vue3+(微信小程序或QQ小程序)+非内置列表写法虚拟列表有效，其他情况此属性设置任何值都无效，所以如果您在swiper-item内使用z-paging的非内置虚拟列表写法，将此属性设置为true即可
|
||||
virtualInSwiperSlot: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
virtualListKey: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.getInstanceId(),
|
||||
virtualPageHeight: 0,
|
||||
virtualCellHeight: 0,
|
||||
virtualScrollTimeStamp: 0,
|
||||
virtualList: [],
|
||||
virtualPlaceholderTopHeight: 0,
|
||||
virtualPlaceholderBottomHeight: 0,
|
||||
virtualTopRangeIndex: 0,
|
||||
virtualBottomRangeIndex: 0,
|
||||
lastVirtualTopRangeIndex: 0,
|
||||
lastVirtualBottomRangeIndex: 0,
|
||||
virtualItemInsertedCount: 0,
|
||||
virtualHeightCacheList: [],
|
||||
getCellHeightRetryCount: {
|
||||
fixed: 0,
|
||||
dynamic: 0
|
||||
},
|
||||
pagingOrgTop: -1,
|
||||
updateVirtualListFromDataChange: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// 监听总数据的改变，刷新虚拟列表布局
|
||||
realTotalData() {
|
||||
this.updateVirtualListRender();
|
||||
},
|
||||
// 监听虚拟列表渲染数组的改变并emit
|
||||
virtualList(newVal) {
|
||||
this.$emit("update:virtualList", newVal);
|
||||
this.$emit("virtualListChange", newVal);
|
||||
},
|
||||
// 监听虚拟列表顶部占位高度改变并emit
|
||||
virtualPlaceholderTopHeight(newVal) {
|
||||
this.$emit("virtualTopHeightChange", newVal);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
virtualCellIndexKey() {
|
||||
return uni_modules_zPaging_components_zPaging_js_zPagingConstant.c.listCellIndexKey;
|
||||
},
|
||||
finalUseVirtualList() {
|
||||
if (this.useVirtualList && this.usePageScroll) {
|
||||
uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.consoleErr("使用页面滚动时，开启虚拟列表无效！");
|
||||
}
|
||||
return this.useVirtualList && !this.usePageScroll;
|
||||
},
|
||||
finalUseInnerList() {
|
||||
return this.useInnerList || this.finalUseVirtualList && !this.forceCloseInnerList;
|
||||
},
|
||||
finalCellKeyName() {
|
||||
return this.cellKeyName;
|
||||
},
|
||||
finalVirtualPageHeight() {
|
||||
return this.virtualPageHeight > 0 ? this.virtualPageHeight : this.windowHeight;
|
||||
},
|
||||
finalFixedCellHeight() {
|
||||
return uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.convertToPx(this.fixedCellHeight);
|
||||
},
|
||||
fianlVirtualCellIdPrefix() {
|
||||
const prefix = this.virtualCellIdPrefix ? this.virtualCellIdPrefix + "-" : "";
|
||||
return prefix + "zp-id";
|
||||
},
|
||||
finalPlaceholderTopHeightStyle() {
|
||||
return {};
|
||||
},
|
||||
virtualRangePageHeight() {
|
||||
return this.finalVirtualPageHeight * this.preloadPage;
|
||||
},
|
||||
virtualScrollDisTimeStamp() {
|
||||
return 1e3 / this.virtualScrollFps;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 在使用动态高度虚拟列表时，若在列表数组中需要插入某个item，需要调用此方法；item:需要插入的item，index:插入的cell位置，若index为2，则插入的item在原list的index=1之后，index从0开始
|
||||
doInsertVirtualListItem(item, index) {
|
||||
if (this.cellHeightMode !== uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.CellHeightMode.Dynamic)
|
||||
return;
|
||||
this.realTotalData.splice(index, 0, item);
|
||||
this.realTotalData = [...this.realTotalData];
|
||||
this.virtualItemInsertedCount++;
|
||||
if (!item || Object.prototype.toString.call(item) !== "[object Object]") {
|
||||
item = { item };
|
||||
}
|
||||
const cellIndexKey = this.virtualCellIndexKey;
|
||||
item[cellIndexKey] = `custom-${this.virtualItemInsertedCount}`;
|
||||
item[uni_modules_zPaging_components_zPaging_js_zPagingConstant.c.listCellIndexUniqueKey] = `${this.virtualListKey}-${item[cellIndexKey]}`;
|
||||
this.$nextTick(async () => {
|
||||
let retryCount = 0;
|
||||
while (retryCount <= 10) {
|
||||
await uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.wait(uni_modules_zPaging_components_zPaging_js_zPagingConstant.c.delayTime);
|
||||
const cellNode = await this._getVirtualCellNodeByIndex(item[cellIndexKey]);
|
||||
if (!cellNode) {
|
||||
retryCount++;
|
||||
continue;
|
||||
}
|
||||
const currentHeight = cellNode ? cellNode[0].height : 0;
|
||||
const lastHeightCache = this.virtualHeightCacheList[index - 1];
|
||||
const lastTotalHeight = lastHeightCache ? lastHeightCache.totalHeight : 0;
|
||||
this.virtualHeightCacheList.splice(index, 0, {
|
||||
height: currentHeight,
|
||||
lastTotalHeight,
|
||||
totalHeight: lastTotalHeight + currentHeight
|
||||
});
|
||||
for (let i = index + 1; i < this.virtualHeightCacheList.length; i++) {
|
||||
const thisNode = this.virtualHeightCacheList[i];
|
||||
thisNode.lastTotalHeight += currentHeight;
|
||||
thisNode.totalHeight += currentHeight;
|
||||
}
|
||||
this._updateVirtualScroll(this.oldScrollTop);
|
||||
break;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 在使用动态高度虚拟列表时，手动更新指定cell的缓存高度(当cell高度在初始化之后再次改变后调用)；index:需要更新的cell在列表中的位置，从0开始
|
||||
didUpdateVirtualListCell(index) {
|
||||
if (this.cellHeightMode !== uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.CellHeightMode.Dynamic)
|
||||
return;
|
||||
const currentNode = this.virtualHeightCacheList[index];
|
||||
this.$nextTick(() => {
|
||||
this._getVirtualCellNodeByIndex(index).then((cellNode) => {
|
||||
const cellNodeHeight = cellNode ? cellNode[0].height : 0;
|
||||
const heightDis = cellNodeHeight - currentNode.height;
|
||||
currentNode.height = cellNodeHeight;
|
||||
currentNode.totalHeight = currentNode.lastTotalHeight + cellNodeHeight;
|
||||
for (let i = index + 1; i < this.virtualHeightCacheList.length; i++) {
|
||||
const thisNode = this.virtualHeightCacheList[i];
|
||||
thisNode.totalHeight += heightDis;
|
||||
thisNode.lastTotalHeight += heightDis;
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
// 在使用动态高度虚拟列表时，若删除了列表数组中的某个item，需要调用此方法以更新高度缓存数组；index:删除的cell在列表中的位置，从0开始
|
||||
didDeleteVirtualListCell(index) {
|
||||
if (this.cellHeightMode !== uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.CellHeightMode.Dynamic)
|
||||
return;
|
||||
const currentNode = this.virtualHeightCacheList[index];
|
||||
for (let i = index + 1; i < this.virtualHeightCacheList.length; i++) {
|
||||
const thisNode = this.virtualHeightCacheList[i];
|
||||
thisNode.totalHeight -= currentNode.height;
|
||||
thisNode.lastTotalHeight -= currentNode.height;
|
||||
}
|
||||
this.virtualHeightCacheList.splice(index, 1);
|
||||
},
|
||||
// 手动触发虚拟列表渲染更新，可用于解决例如修改了虚拟列表数组中元素，但展示未更新的情况
|
||||
updateVirtualListRender() {
|
||||
if (this.finalUseVirtualList) {
|
||||
this.updateVirtualListFromDataChange = true;
|
||||
this.$nextTick(() => {
|
||||
this.getCellHeightRetryCount.fixed = 0;
|
||||
if (this.realTotalData.length) {
|
||||
this.cellHeightMode === uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.CellHeightMode.Fixed && this.isFirstPage && this._updateFixedCellHeight();
|
||||
} else {
|
||||
this._resetDynamicListState(!this.isUserPullDown);
|
||||
}
|
||||
this._updateVirtualScroll(this.oldScrollTop);
|
||||
});
|
||||
}
|
||||
},
|
||||
// 初始化虚拟列表
|
||||
_virtualListInit() {
|
||||
this.$nextTick(() => {
|
||||
uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.delay(() => {
|
||||
this._getNodeClientRect(".zp-scroll-view").then((node) => {
|
||||
if (node) {
|
||||
this.pagingOrgTop = node[0].top;
|
||||
this.virtualPageHeight = node[0].height;
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
},
|
||||
// cellHeightMode为fixed时获取第一个cell高度
|
||||
_updateFixedCellHeight() {
|
||||
if (!this.finalFixedCellHeight) {
|
||||
this.$nextTick(() => {
|
||||
uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.delay(() => {
|
||||
this._getVirtualCellNodeByIndex(0).then((cellNode) => {
|
||||
if (!cellNode) {
|
||||
if (this.getCellHeightRetryCount.fixed > 10)
|
||||
return;
|
||||
this.getCellHeightRetryCount.fixed++;
|
||||
this._updateFixedCellHeight();
|
||||
} else {
|
||||
this.virtualCellHeight = cellNode[0].height;
|
||||
this._updateVirtualScroll(this.oldScrollTop);
|
||||
}
|
||||
});
|
||||
}, uni_modules_zPaging_components_zPaging_js_zPagingConstant.c.delayTime, "updateFixedCellHeightDelay");
|
||||
});
|
||||
} else {
|
||||
this.virtualCellHeight = this.finalFixedCellHeight;
|
||||
}
|
||||
},
|
||||
// cellHeightMode为dynamic时获取每个cell高度
|
||||
_updateDynamicCellHeight(list, dataFrom = "bottom") {
|
||||
const dataFromTop = dataFrom === "top";
|
||||
const heightCacheList = this.virtualHeightCacheList;
|
||||
const currentCacheList = dataFromTop ? [] : heightCacheList;
|
||||
let listTotalHeight = 0;
|
||||
this.$nextTick(() => {
|
||||
uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.delay(async () => {
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
const cellNode = await this._getVirtualCellNodeByIndex(list[i][this.virtualCellIndexKey]);
|
||||
const currentHeight = cellNode ? cellNode[0].height : 0;
|
||||
if (!cellNode) {
|
||||
if (this.getCellHeightRetryCount.dynamic <= 10) {
|
||||
heightCacheList.splice(heightCacheList.length - i, i);
|
||||
this.getCellHeightRetryCount.dynamic++;
|
||||
this._updateDynamicCellHeight(list, dataFrom);
|
||||
}
|
||||
return;
|
||||
}
|
||||
const lastHeightCache = currentCacheList.length ? currentCacheList.slice(-1)[0] : null;
|
||||
const lastTotalHeight = lastHeightCache ? lastHeightCache.totalHeight : 0;
|
||||
currentCacheList.push({
|
||||
height: currentHeight,
|
||||
lastTotalHeight,
|
||||
totalHeight: lastTotalHeight + currentHeight
|
||||
});
|
||||
if (dataFromTop) {
|
||||
listTotalHeight += currentHeight;
|
||||
}
|
||||
}
|
||||
if (dataFromTop && list.length) {
|
||||
for (let i = 0; i < heightCacheList.length; i++) {
|
||||
const heightCacheItem = heightCacheList[i];
|
||||
heightCacheItem.lastTotalHeight += listTotalHeight;
|
||||
heightCacheItem.totalHeight += listTotalHeight;
|
||||
}
|
||||
this.virtualHeightCacheList = currentCacheList.concat(heightCacheList);
|
||||
}
|
||||
this._updateVirtualScroll(this.oldScrollTop);
|
||||
}, uni_modules_zPaging_components_zPaging_js_zPagingConstant.c.delayTime, "updateDynamicCellHeightDelay");
|
||||
});
|
||||
},
|
||||
// 设置cellItem的index
|
||||
_setCellIndex(list, dataFrom = "bottom") {
|
||||
let currentItemIndex = 0;
|
||||
const cellIndexKey = this.virtualCellIndexKey;
|
||||
dataFrom === "bottom" && [uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.QueryFrom.Refresh, uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.QueryFrom.Reload].indexOf(this.queryFrom) >= 0 && this._resetDynamicListState();
|
||||
if (this.totalData.length && this.queryFrom !== uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.QueryFrom.Refresh) {
|
||||
if (dataFrom === "bottom") {
|
||||
currentItemIndex = this.realTotalData.length;
|
||||
const lastItem = this.realTotalData.length ? this.realTotalData.slice(-1)[0] : null;
|
||||
if (lastItem && lastItem[cellIndexKey] !== void 0) {
|
||||
currentItemIndex = lastItem[cellIndexKey] + 1;
|
||||
}
|
||||
} else if (dataFrom === "top") {
|
||||
const firstItem = this.realTotalData.length ? this.realTotalData[0] : null;
|
||||
if (firstItem && firstItem[cellIndexKey] !== void 0) {
|
||||
currentItemIndex = firstItem[cellIndexKey] - list.length;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this._resetDynamicListState();
|
||||
}
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
let item = list[i];
|
||||
if (!item || Object.prototype.toString.call(item) !== "[object Object]") {
|
||||
item = { item };
|
||||
}
|
||||
if (item[uni_modules_zPaging_components_zPaging_js_zPagingConstant.c.listCellIndexUniqueKey]) {
|
||||
item = uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.deepCopy(item);
|
||||
}
|
||||
item[cellIndexKey] = currentItemIndex + i;
|
||||
item[uni_modules_zPaging_components_zPaging_js_zPagingConstant.c.listCellIndexUniqueKey] = `${this.virtualListKey}-${item[cellIndexKey]}`;
|
||||
list[i] = item;
|
||||
}
|
||||
this.getCellHeightRetryCount.dynamic = 0;
|
||||
this.cellHeightMode === uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.CellHeightMode.Dynamic && this._updateDynamicCellHeight(list, dataFrom);
|
||||
},
|
||||
// 更新scroll滚动（虚拟列表滚动时触发）
|
||||
_updateVirtualScroll(scrollTop, scrollDiff = 0) {
|
||||
const currentTimeStamp = uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.getTime();
|
||||
scrollTop === 0 && this._resetTopRange();
|
||||
if (scrollTop !== 0 && this.virtualScrollTimeStamp && currentTimeStamp - this.virtualScrollTimeStamp <= this.virtualScrollDisTimeStamp) {
|
||||
return;
|
||||
}
|
||||
this.virtualScrollTimeStamp = currentTimeStamp;
|
||||
let scrollIndex = 0;
|
||||
const cellHeightMode = this.cellHeightMode;
|
||||
if (cellHeightMode === uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.CellHeightMode.Fixed) {
|
||||
scrollIndex = parseInt(scrollTop / this.virtualCellHeight) || 0;
|
||||
this._updateFixedTopRangeIndex(scrollIndex);
|
||||
this._updateFixedBottomRangeIndex(scrollIndex);
|
||||
} else if (cellHeightMode === uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.CellHeightMode.Dynamic) {
|
||||
const scrollDirection = scrollDiff > 0 ? "top" : "bottom";
|
||||
const rangePageHeight = this.virtualRangePageHeight;
|
||||
const topRangePageOffset = scrollTop - rangePageHeight;
|
||||
const bottomRangePageOffset = scrollTop + this.finalVirtualPageHeight + rangePageHeight;
|
||||
let virtualBottomRangeIndex = 0;
|
||||
let virtualPlaceholderBottomHeight = 0;
|
||||
let reachedLimitBottom = false;
|
||||
const heightCacheList = this.virtualHeightCacheList;
|
||||
const lastHeightCache = !!heightCacheList ? heightCacheList.slice(-1)[0] : null;
|
||||
let startTopRangeIndex = this.virtualTopRangeIndex;
|
||||
if (scrollDirection === "bottom") {
|
||||
for (let i = startTopRangeIndex; i < heightCacheList.length; i++) {
|
||||
const heightCacheItem = heightCacheList[i];
|
||||
if (heightCacheItem && heightCacheItem.totalHeight > topRangePageOffset) {
|
||||
this.virtualTopRangeIndex = i;
|
||||
this.virtualPlaceholderTopHeight = heightCacheItem.lastTotalHeight;
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
let topRangeMatched = false;
|
||||
for (let i = startTopRangeIndex; i >= 0; i--) {
|
||||
const heightCacheItem = heightCacheList[i];
|
||||
if (heightCacheItem && heightCacheItem.totalHeight < topRangePageOffset) {
|
||||
this.virtualTopRangeIndex = i;
|
||||
this.virtualPlaceholderTopHeight = heightCacheItem.lastTotalHeight;
|
||||
topRangeMatched = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
!topRangeMatched && this._resetTopRange();
|
||||
}
|
||||
for (let i = this.virtualTopRangeIndex; i < heightCacheList.length; i++) {
|
||||
const heightCacheItem = heightCacheList[i];
|
||||
if (heightCacheItem && heightCacheItem.totalHeight > bottomRangePageOffset) {
|
||||
virtualBottomRangeIndex = i;
|
||||
virtualPlaceholderBottomHeight = lastHeightCache.totalHeight - heightCacheItem.totalHeight;
|
||||
reachedLimitBottom = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!reachedLimitBottom || this.virtualBottomRangeIndex === 0) {
|
||||
this.virtualBottomRangeIndex = this.realTotalData.length ? this.realTotalData.length - 1 : this.pageSize;
|
||||
this.virtualPlaceholderBottomHeight = 0;
|
||||
} else {
|
||||
this.virtualBottomRangeIndex = virtualBottomRangeIndex;
|
||||
this.virtualPlaceholderBottomHeight = virtualPlaceholderBottomHeight;
|
||||
}
|
||||
this._updateVirtualList();
|
||||
}
|
||||
},
|
||||
// 更新fixedCell模式下topRangeIndex&placeholderTopHeight
|
||||
_updateFixedTopRangeIndex(scrollIndex) {
|
||||
let virtualTopRangeIndex = this.virtualCellHeight === 0 ? 0 : scrollIndex - (parseInt(this.finalVirtualPageHeight / this.virtualCellHeight) || 1) * this.preloadPage;
|
||||
virtualTopRangeIndex *= this.virtualListCol;
|
||||
virtualTopRangeIndex = Math.max(0, virtualTopRangeIndex);
|
||||
this.virtualTopRangeIndex = virtualTopRangeIndex;
|
||||
this.virtualPlaceholderTopHeight = virtualTopRangeIndex / this.virtualListCol * this.virtualCellHeight;
|
||||
},
|
||||
// 更新fixedCell模式下bottomRangeIndex&placeholderBottomHeight
|
||||
_updateFixedBottomRangeIndex(scrollIndex) {
|
||||
let virtualBottomRangeIndex = this.virtualCellHeight === 0 ? this.pageSize : scrollIndex + (parseInt(this.finalVirtualPageHeight / this.virtualCellHeight) || 1) * (this.preloadPage + 1);
|
||||
virtualBottomRangeIndex *= this.virtualListCol;
|
||||
virtualBottomRangeIndex = Math.min(this.realTotalData.length, virtualBottomRangeIndex);
|
||||
this.virtualBottomRangeIndex = virtualBottomRangeIndex;
|
||||
this.virtualPlaceholderBottomHeight = (this.realTotalData.length - virtualBottomRangeIndex) * this.virtualCellHeight / this.virtualListCol;
|
||||
this._updateVirtualList();
|
||||
},
|
||||
// 更新virtualList
|
||||
_updateVirtualList() {
|
||||
const shouldUpdateList = this.updateVirtualListFromDataChange || (this.lastVirtualTopRangeIndex !== this.virtualTopRangeIndex || this.lastVirtualBottomRangeIndex !== this.virtualBottomRangeIndex);
|
||||
if (shouldUpdateList) {
|
||||
this.updateVirtualListFromDataChange = false;
|
||||
this.lastVirtualTopRangeIndex = this.virtualTopRangeIndex;
|
||||
this.lastVirtualBottomRangeIndex = this.virtualBottomRangeIndex;
|
||||
this.virtualList = this.realTotalData.slice(this.virtualTopRangeIndex, this.virtualBottomRangeIndex + 1);
|
||||
}
|
||||
},
|
||||
// 重置动态cell模式下的高度缓存数据、虚拟列表和滚动状态
|
||||
_resetDynamicListState(resetVirtualList = false) {
|
||||
this.virtualHeightCacheList = [];
|
||||
if (resetVirtualList) {
|
||||
this.virtualList = [];
|
||||
}
|
||||
this.virtualTopRangeIndex = 0;
|
||||
this.virtualPlaceholderTopHeight = 0;
|
||||
},
|
||||
// 重置topRangeIndex和placeholderTopHeight
|
||||
_resetTopRange() {
|
||||
this.virtualTopRangeIndex = 0;
|
||||
this.virtualPlaceholderTopHeight = 0;
|
||||
this._updateVirtualList();
|
||||
},
|
||||
// 检测虚拟列表当前滚动位置，如发现滚动位置不正确则重新计算虚拟列表相关参数(为解决在App中可能出现的长时间进入后台后打开App白屏的问题)
|
||||
_checkVirtualListScroll() {
|
||||
if (this.finalUseVirtualList) {
|
||||
this.$nextTick(() => {
|
||||
this._getNodeClientRect(".zp-paging-touch-view").then((node) => {
|
||||
const currentTop = node ? node[0].top : 0;
|
||||
if (!node || currentTop === this.pagingOrgTop && this.virtualPlaceholderTopHeight !== 0) {
|
||||
this._updateVirtualScroll(0);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
// 获取对应index的虚拟列表cell节点信息
|
||||
_getVirtualCellNodeByIndex(index) {
|
||||
let inDom = this.finalUseInnerList;
|
||||
if (this.forceCloseInnerList && this.virtualInSwiperSlot) {
|
||||
inDom = this.$parent;
|
||||
}
|
||||
return this._getNodeClientRect(`#${this.fianlVirtualCellIdPrefix}-${index}`, inDom);
|
||||
},
|
||||
// 处理使用内置列表时点击了cell事件
|
||||
_innerCellClick(item, index) {
|
||||
this.$emit("innerCellClick", item, index);
|
||||
}
|
||||
}
|
||||
};
|
||||
exports.virtualListModule = virtualListModule;
|
||||
//# sourceMappingURL=../../../../../../../.sourcemap/mp-weixin/uni_modules/z-paging/components/z-paging/js/modules/virtual-list.js.map
|
||||
Vendored
+19
@@ -0,0 +1,19 @@
|
||||
"use strict";
|
||||
const c = {
|
||||
// 当前版本号
|
||||
version: "2.8.6",
|
||||
// 延迟操作的通用时间
|
||||
delayTime: 100,
|
||||
// 请求失败时候全局emit使用的key
|
||||
errorUpdateKey: "z-paging-error-emit",
|
||||
// 全局emit complete的key
|
||||
completeUpdateKey: "z-paging-complete-emit",
|
||||
// z-paging缓存的前缀key
|
||||
cachePrefixKey: "z-paging-cache",
|
||||
// 虚拟列表中列表index的key
|
||||
listCellIndexKey: "zp_index",
|
||||
// 虚拟列表中列表的唯一key
|
||||
listCellIndexUniqueKey: "zp_unique_index"
|
||||
};
|
||||
exports.c = c;
|
||||
//# sourceMappingURL=../../../../../../.sourcemap/mp-weixin/uni_modules/z-paging/components/z-paging/js/z-paging-constant.js.map
|
||||
+46
@@ -0,0 +1,46 @@
|
||||
"use strict";
|
||||
const Enum = {
|
||||
// 当前加载类型 refresher:下拉刷新 load-more:上拉加载更多
|
||||
LoadingType: {
|
||||
Refresher: "refresher",
|
||||
LoadMore: "load-more"
|
||||
},
|
||||
// 下拉刷新状态 default:默认状态 release-to-refresh:松手立即刷新 loading:刷新中 complete:刷新结束 go-f2:松手进入二楼
|
||||
Refresher: {
|
||||
Default: "default",
|
||||
ReleaseToRefresh: "release-to-refresh",
|
||||
Loading: "loading",
|
||||
Complete: "complete",
|
||||
GoF2: "go-f2"
|
||||
},
|
||||
// 底部加载更多状态 default:默认状态 loading:加载中 no-more:没有更多数据 fail:加载失败
|
||||
More: {
|
||||
Default: "default",
|
||||
Loading: "loading",
|
||||
NoMore: "no-more",
|
||||
Fail: "fail"
|
||||
},
|
||||
// @query触发来源 user-pull-down:用户主动下拉刷新 reload:通过reload触发 refresh:通过refresh触发 load-more:通过滚动到底部加载更多或点击底部加载更多触发
|
||||
QueryFrom: {
|
||||
UserPullDown: "user-pull-down",
|
||||
Reload: "reload",
|
||||
Refresh: "refresh",
|
||||
LoadMore: "load-more"
|
||||
},
|
||||
// 虚拟列表cell高度模式
|
||||
CellHeightMode: {
|
||||
// 固定高度
|
||||
Fixed: "fixed",
|
||||
// 动态高度
|
||||
Dynamic: "dynamic"
|
||||
},
|
||||
// 列表缓存模式
|
||||
CacheMode: {
|
||||
// 默认模式，只会缓存一次
|
||||
Default: "default",
|
||||
// 总是缓存，每次列表刷新(下拉刷新、调用reload等)都会更新缓存
|
||||
Always: "always"
|
||||
}
|
||||
};
|
||||
exports.Enum = Enum;
|
||||
//# sourceMappingURL=../../../../../../.sourcemap/mp-weixin/uni_modules/z-paging/components/z-paging/js/z-paging-enum.js.map
|
||||
Vendored
+69
@@ -0,0 +1,69 @@
|
||||
"use strict";
|
||||
const queryKey = "Query";
|
||||
const fetchParamsKey = "FetchParams";
|
||||
const fetchResultKey = "FetchResult";
|
||||
const language2LocalKey = "Language2Local";
|
||||
function handleQuery(callback) {
|
||||
_addHandleByKey(queryKey, callback);
|
||||
return this;
|
||||
}
|
||||
function _handleQuery(pageNo, pageSize, from, lastItem) {
|
||||
const callback = _getHandleByKey(queryKey);
|
||||
return callback ? callback(pageNo, pageSize, from, lastItem) : [pageNo, pageSize, from];
|
||||
}
|
||||
function handleFetchParams(callback) {
|
||||
_addHandleByKey(fetchParamsKey, callback);
|
||||
return this;
|
||||
}
|
||||
function _handleFetchParams(parmas, extraParams) {
|
||||
const callback = _getHandleByKey(fetchParamsKey);
|
||||
return callback ? callback(parmas, extraParams || {}) : { pageNo: parmas.pageNo, pageSize: parmas.pageSize, ...extraParams || {} };
|
||||
}
|
||||
function handleFetchResult(callback) {
|
||||
_addHandleByKey(fetchResultKey, callback);
|
||||
return this;
|
||||
}
|
||||
function _handleFetchResult(result, paging, params) {
|
||||
const callback = _getHandleByKey(fetchResultKey);
|
||||
callback && callback(result, paging, params);
|
||||
return callback ? true : false;
|
||||
}
|
||||
function handleLanguage2Local(callback) {
|
||||
_addHandleByKey(language2LocalKey, callback);
|
||||
return this;
|
||||
}
|
||||
function _handleLanguage2Local(language, local) {
|
||||
const callback = _getHandleByKey(language2LocalKey);
|
||||
return callback ? callback(language, local) : local;
|
||||
}
|
||||
function _getApp() {
|
||||
return getApp();
|
||||
}
|
||||
function _hasGlobalData() {
|
||||
return _getApp() && _getApp().globalData;
|
||||
}
|
||||
function _addHandleByKey(key, callback) {
|
||||
try {
|
||||
setTimeout(function() {
|
||||
if (_hasGlobalData()) {
|
||||
_getApp().globalData[`zp_handle${key}Callback`] = callback;
|
||||
}
|
||||
}, 1);
|
||||
} catch (_) {
|
||||
}
|
||||
}
|
||||
function _getHandleByKey(key) {
|
||||
return _hasGlobalData() ? _getApp().globalData[`zp_handle${key}Callback`] : null;
|
||||
}
|
||||
const interceptor = {
|
||||
handleQuery,
|
||||
_handleQuery,
|
||||
handleFetchParams,
|
||||
_handleFetchParams,
|
||||
handleFetchResult,
|
||||
_handleFetchResult,
|
||||
handleLanguage2Local,
|
||||
_handleLanguage2Local
|
||||
};
|
||||
exports.interceptor = interceptor;
|
||||
//# sourceMappingURL=../../../../../../.sourcemap/mp-weixin/uni_modules/z-paging/components/z-paging/js/z-paging-interceptor.js.map
|
||||
+423
@@ -0,0 +1,423 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../../common/vendor.js");
|
||||
const uni_modules_zPaging_components_zPaging_js_zPagingStatic = require("./z-paging-static.js");
|
||||
const uni_modules_zPaging_components_zPaging_js_zPagingConstant = require("./z-paging-constant.js");
|
||||
const uni_modules_zPaging_components_zPaging_js_zPagingUtils = require("./z-paging-utils.js");
|
||||
const uni_modules_zPaging_components_zPaging_js_modules_commonLayout = require("./modules/common-layout.js");
|
||||
const uni_modules_zPaging_components_zPaging_js_modules_dataHandle = require("./modules/data-handle.js");
|
||||
const uni_modules_zPaging_components_zPaging_js_modules_i18n = require("./modules/i18n.js");
|
||||
const uni_modules_zPaging_components_zPaging_js_modules_nvue = require("./modules/nvue.js");
|
||||
const uni_modules_zPaging_components_zPaging_js_modules_empty = require("./modules/empty.js");
|
||||
const uni_modules_zPaging_components_zPaging_js_modules_refresher = require("./modules/refresher.js");
|
||||
const uni_modules_zPaging_components_zPaging_js_modules_loadMore = require("./modules/load-more.js");
|
||||
const uni_modules_zPaging_components_zPaging_js_modules_loading = require("./modules/loading.js");
|
||||
const uni_modules_zPaging_components_zPaging_js_modules_chatRecordMode = require("./modules/chat-record-mode.js");
|
||||
const uni_modules_zPaging_components_zPaging_js_modules_scroller = require("./modules/scroller.js");
|
||||
const uni_modules_zPaging_components_zPaging_js_modules_backToTop = require("./modules/back-to-top.js");
|
||||
const uni_modules_zPaging_components_zPaging_js_modules_virtualList = require("./modules/virtual-list.js");
|
||||
const uni_modules_zPaging_components_zPaging_js_zPagingEnum = require("./z-paging-enum.js");
|
||||
const zPagingRefresh = () => "../components/z-paging-refresh.js";
|
||||
const zPagingLoadMore = () => "../components/z-paging-load-more.js";
|
||||
const zPagingEmptyView = () => "../../z-paging-empty-view/z-paging-empty-view.js";
|
||||
const systemInfo = uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.getSystemInfoSync();
|
||||
const _sfc_main = {
|
||||
name: "z-paging",
|
||||
components: {
|
||||
zPagingRefresh,
|
||||
zPagingLoadMore,
|
||||
zPagingEmptyView
|
||||
},
|
||||
mixins: [
|
||||
uni_modules_zPaging_components_zPaging_js_modules_commonLayout.commonLayoutModule,
|
||||
uni_modules_zPaging_components_zPaging_js_modules_dataHandle.dataHandleModule,
|
||||
uni_modules_zPaging_components_zPaging_js_modules_i18n.i18nModule,
|
||||
uni_modules_zPaging_components_zPaging_js_modules_nvue.nvueModule,
|
||||
uni_modules_zPaging_components_zPaging_js_modules_empty.emptyModule,
|
||||
uni_modules_zPaging_components_zPaging_js_modules_refresher.refresherModule,
|
||||
uni_modules_zPaging_components_zPaging_js_modules_loadMore.loadMoreModule,
|
||||
uni_modules_zPaging_components_zPaging_js_modules_loading.loadingModule,
|
||||
uni_modules_zPaging_components_zPaging_js_modules_chatRecordMode.chatRecordModerModule,
|
||||
uni_modules_zPaging_components_zPaging_js_modules_scroller.scrollerModule,
|
||||
uni_modules_zPaging_components_zPaging_js_modules_backToTop.backToTopModule,
|
||||
uni_modules_zPaging_components_zPaging_js_modules_virtualList.virtualListModule
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
// --------------静态资源---------------
|
||||
base64BackToTop: uni_modules_zPaging_components_zPaging_js_zPagingStatic.zStatic.base64BackToTop,
|
||||
// -------------全局数据相关--------------
|
||||
// 当前加载类型
|
||||
loadingType: uni_modules_zPaging_components_zPaging_js_zPagingEnum.Enum.LoadingType.Refresher,
|
||||
requestTimeStamp: 0,
|
||||
wxsPropType: "",
|
||||
renderPropScrollTop: -1,
|
||||
checkScrolledToBottomTimeOut: null,
|
||||
cacheTopHeight: -1,
|
||||
statusBarHeight: systemInfo.statusBarHeight,
|
||||
// --------------状态&判断---------------
|
||||
insideOfPaging: -1,
|
||||
isLoadFailed: false,
|
||||
isIos: systemInfo.platform === "ios",
|
||||
disabledBounce: false,
|
||||
fromCompleteEmit: false,
|
||||
disabledCompleteEmit: false,
|
||||
pageLaunched: false,
|
||||
active: false,
|
||||
// ---------------wxs相关---------------
|
||||
wxsIsScrollTopInTopRange: true,
|
||||
wxsScrollTop: 0,
|
||||
wxsPageScrollTop: 0,
|
||||
wxsOnPullingDown: false
|
||||
};
|
||||
},
|
||||
props: {
|
||||
// 调用complete后延迟处理的时间，单位为毫秒，默认0毫秒，优先级高于minDelay
|
||||
delay: {
|
||||
type: [Number, String],
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("delay", 0)
|
||||
},
|
||||
// 触发@query后最小延迟处理的时间，单位为毫秒，默认0毫秒，优先级低于delay（假设设置为300毫秒，若分页请求时间小于300毫秒，则在调用complete后延迟[300毫秒-请求时长]；若请求时长大于300毫秒，则不延迟），当show-refresher-when-reload为true或reload(true)时，其最小值为400
|
||||
minDelay: {
|
||||
type: [Number, String],
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("minDelay", 0)
|
||||
},
|
||||
// 设置z-paging的style，部分平台(如微信小程序)无法直接修改组件的style，可使用此属性代替
|
||||
pagingStyle: {
|
||||
type: Object,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("pagingStyle", {})
|
||||
},
|
||||
// z-paging的高度，优先级低于pagingStyle中设置的height；传字符串，如100px、100rpx、100%
|
||||
height: {
|
||||
type: String,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("height", "")
|
||||
},
|
||||
// z-paging的宽度，优先级低于pagingStyle中设置的width；传字符串，如100px、100rpx、100%
|
||||
width: {
|
||||
type: String,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("width", "")
|
||||
},
|
||||
// z-paging的最大宽度，优先级低于pagingStyle中设置的max-width；传字符串，如100px、100rpx、100%。默认为空，也就是铺满窗口宽度，若设置了特定值则会自动添加margin: 0 auto
|
||||
maxWidth: {
|
||||
type: String,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("maxWidth", "")
|
||||
},
|
||||
// z-paging的背景色，优先级低于pagingStyle中设置的background。传字符串，如"#ffffff"
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("bgColor", "")
|
||||
},
|
||||
// 设置z-paging的容器(插槽的父view)的style
|
||||
pagingContentStyle: {
|
||||
type: Object,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("pagingContentStyle", {})
|
||||
},
|
||||
// z-paging是否自动高度，若自动高度则会自动铺满屏幕
|
||||
autoHeight: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("autoHeight", false)
|
||||
},
|
||||
// z-paging是否自动高度时，附加的高度，注意添加单位px或rpx，若需要减少高度，则传负数
|
||||
autoHeightAddition: {
|
||||
type: [Number, String],
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("autoHeightAddition", "0px")
|
||||
},
|
||||
// loading(下拉刷新、上拉加载更多)的主题样式，支持black，white，默认black
|
||||
defaultThemeStyle: {
|
||||
type: String,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("defaultThemeStyle", "black")
|
||||
},
|
||||
// z-paging是否使用fixed布局，若使用fixed布局，则z-paging的父view无需固定高度，z-paging高度默认为100%，默认为是(当使用内置scroll-view滚动时有效)
|
||||
fixed: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("fixed", true)
|
||||
},
|
||||
// 是否开启底部安全区域适配
|
||||
safeAreaInsetBottom: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("safeAreaInsetBottom", false)
|
||||
},
|
||||
// 开启底部安全区域适配后，是否使用placeholder形式实现，默认为否。为否时滚动区域会自动避开底部安全区域，也就是所有滚动内容都不会挡住底部安全区域，若设置为是，则滚动时滚动内容会挡住底部安全区域，但是当滚动到底部时才会避开底部安全区域
|
||||
useSafeAreaPlaceholder: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("useSafeAreaPlaceholder", false)
|
||||
},
|
||||
// z-paging bottom的背景色，默认透明，传字符串，如"#ffffff"
|
||||
bottomBgColor: {
|
||||
type: String,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("bottomBgColor", "")
|
||||
},
|
||||
// slot="top"的view的z-index，默认为99，仅使用页面滚动时有效
|
||||
topZIndex: {
|
||||
type: Number,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("topZIndex", 99)
|
||||
},
|
||||
// z-paging内容容器父view的z-index，默认为1
|
||||
superContentZIndex: {
|
||||
type: Number,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("superContentZIndex", 1)
|
||||
},
|
||||
// z-paging内容容器部分的z-index，默认为1
|
||||
contentZIndex: {
|
||||
type: Number,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("contentZIndex", 1)
|
||||
},
|
||||
// z-paging二楼的z-index，默认为100
|
||||
f2ZIndex: {
|
||||
type: Number,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("f2ZIndex", 100)
|
||||
},
|
||||
// 使用页面滚动时，是否在不满屏时自动填充满屏幕，默认为是
|
||||
autoFullHeight: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("autoFullHeight", true)
|
||||
},
|
||||
// 是否监听列表触摸方向改变，默认为否
|
||||
watchTouchDirectionChange: {
|
||||
type: Boolean,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("watchTouchDirectionChange", false)
|
||||
},
|
||||
// z-paging中布局的单位，默认为rpx
|
||||
unit: {
|
||||
type: String,
|
||||
default: uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.gc("unit", "rpx")
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.createdReload && !this.refresherOnly && this.auto) {
|
||||
this._startLoading();
|
||||
this.$nextTick(this._preReload);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.active = true;
|
||||
this.wxsPropType = uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.getTime().toString();
|
||||
this.renderJsIgnore;
|
||||
if (!this.createdReload && !this.refresherOnly && this.auto) {
|
||||
uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.delay(() => this.$nextTick(this._preReload), 0);
|
||||
}
|
||||
this.finalUseCache && this._setListByLocalCache();
|
||||
let delay = 0;
|
||||
delay = uni_modules_zPaging_components_zPaging_js_zPagingConstant.c.delayTime;
|
||||
this.$nextTick(() => {
|
||||
this.systemInfo = uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.getSystemInfoSync();
|
||||
!this.usePageScroll && this.autoHeight && this._setAutoHeight();
|
||||
this.loaded = true;
|
||||
uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.delay(() => {
|
||||
this.updateFixedLayout();
|
||||
this._updateCachedSuperContentHeight();
|
||||
});
|
||||
});
|
||||
this.updatePageScrollTopHeight();
|
||||
this.updatePageScrollBottomHeight();
|
||||
this.updateLeftAndRightWidth();
|
||||
if (this.finalRefresherEnabled && this.useCustomRefresher) {
|
||||
this.$nextTick(() => {
|
||||
this.isTouchmoving = true;
|
||||
});
|
||||
}
|
||||
this._onEmit();
|
||||
this.finalUseVirtualList && this._virtualListInit();
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this._getCssSafeAreaInsetBottom(() => this.safeAreaInsetBottom && this.updatePageScrollBottomHeight());
|
||||
}, delay);
|
||||
});
|
||||
},
|
||||
destroyed() {
|
||||
this._handleUnmounted();
|
||||
},
|
||||
unmounted() {
|
||||
this._handleUnmounted();
|
||||
},
|
||||
watch: {
|
||||
defaultThemeStyle: {
|
||||
handler(newVal) {
|
||||
if (newVal.length) {
|
||||
this.finalRefresherDefaultStyle = newVal;
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
autoHeight(newVal) {
|
||||
this.loaded && !this.usePageScroll && this._setAutoHeight(newVal);
|
||||
},
|
||||
autoHeightAddition(newVal) {
|
||||
this.loaded && !this.usePageScroll && this.autoHeight && this._setAutoHeight(newVal);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 当前z-paging的内置样式
|
||||
finalPagingStyle() {
|
||||
const pagingStyle = { ...this.pagingStyle };
|
||||
if (!this.systemInfo)
|
||||
return pagingStyle;
|
||||
const { windowTop, windowBottom } = this;
|
||||
if (!this.usePageScroll && this.fixed) {
|
||||
if (windowTop && !pagingStyle.top) {
|
||||
pagingStyle.top = windowTop + "px";
|
||||
}
|
||||
if (windowBottom && !pagingStyle.bottom) {
|
||||
pagingStyle.bottom = windowBottom + "px";
|
||||
}
|
||||
}
|
||||
if (this.bgColor.length && !pagingStyle["background"]) {
|
||||
pagingStyle["background"] = this.bgColor;
|
||||
}
|
||||
if (this.height.length && !pagingStyle["height"]) {
|
||||
pagingStyle["height"] = this.height;
|
||||
}
|
||||
if (this.width.length && !pagingStyle["width"]) {
|
||||
pagingStyle["width"] = this.width;
|
||||
}
|
||||
if (this.maxWidth.length && !pagingStyle["max-width"]) {
|
||||
pagingStyle["max-width"] = this.maxWidth;
|
||||
pagingStyle["margin"] = "0 auto";
|
||||
}
|
||||
return pagingStyle;
|
||||
},
|
||||
// 当前z-paging内容的样式
|
||||
finalPagingContentStyle() {
|
||||
if (this.contentZIndex != 1) {
|
||||
this.pagingContentStyle["z-index"] = this.contentZIndex;
|
||||
this.pagingContentStyle["position"] = "relative";
|
||||
}
|
||||
return this.pagingContentStyle;
|
||||
},
|
||||
renderJsIgnore() {
|
||||
if (this.usePageScroll && this.useChatRecordMode || !this.refresherEnabled && this.scrollable || !this.useCustomRefresher) {
|
||||
this.$nextTick(() => {
|
||||
this.renderPropScrollTop = 10;
|
||||
});
|
||||
}
|
||||
return 0;
|
||||
},
|
||||
windowHeight() {
|
||||
if (!this.systemInfo)
|
||||
return 0;
|
||||
return this.systemInfo.windowHeight || 0;
|
||||
},
|
||||
windowBottom() {
|
||||
if (!this.systemInfo)
|
||||
return 0;
|
||||
let windowBottom = this.systemInfo.windowBottom || 0;
|
||||
if (this.safeAreaInsetBottom && !this.useSafeAreaPlaceholder && !this.useChatRecordMode) {
|
||||
windowBottom += this.safeAreaBottom;
|
||||
}
|
||||
return windowBottom;
|
||||
},
|
||||
isIosAndH5() {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 当前版本号
|
||||
getVersion() {
|
||||
return `z-paging v${uni_modules_zPaging_components_zPaging_js_zPagingConstant.c.version}`;
|
||||
},
|
||||
// 设置nvue List的specialEffects
|
||||
setSpecialEffects(args) {
|
||||
this.setListSpecialEffects(args);
|
||||
},
|
||||
// 与setSpecialEffects等效，兼容旧版本
|
||||
setListSpecialEffects(args) {
|
||||
this.nFixFreezing = args && Object.keys(args).length;
|
||||
if (this.isIos) {
|
||||
this.privateRefresherEnabled = 0;
|
||||
}
|
||||
!this.usePageScroll && this.$refs["zp-n-list"].setSpecialEffects(args);
|
||||
},
|
||||
// 使手机发生较短时间的振动（15ms）
|
||||
_doVibrateShort() {
|
||||
common_vendor.index.vibrateShort();
|
||||
},
|
||||
// 设置z-paging高度
|
||||
async _setAutoHeight(shouldFullHeight = true, scrollViewNode = null) {
|
||||
const heightKey = "min-height";
|
||||
try {
|
||||
if (shouldFullHeight) {
|
||||
let finalScrollViewNode = scrollViewNode || await this._getNodeClientRect(".zp-scroll-view");
|
||||
let finalScrollBottomNode = await this._getNodeClientRect(".zp-page-bottom");
|
||||
if (finalScrollViewNode) {
|
||||
const scrollViewTop = finalScrollViewNode[0].top;
|
||||
let scrollViewHeight = this.windowHeight - scrollViewTop;
|
||||
scrollViewHeight -= finalScrollBottomNode ? finalScrollBottomNode[0].height : 0;
|
||||
const additionHeight = uni_modules_zPaging_components_zPaging_js_zPagingUtils.u.convertToPx(this.autoHeightAddition);
|
||||
let importantSuffix = " !important";
|
||||
const finalHeight = scrollViewHeight + additionHeight - (this.insideMore ? 1 : 0) + "px" + importantSuffix;
|
||||
this.$set(this.scrollViewStyle, heightKey, finalHeight);
|
||||
this.$set(this.scrollViewInStyle, heightKey, finalHeight);
|
||||
}
|
||||
} else {
|
||||
this.$delete(this.scrollViewStyle, heightKey);
|
||||
this.$delete(this.scrollViewInStyle, heightKey);
|
||||
}
|
||||
} catch (e) {
|
||||
}
|
||||
},
|
||||
// 组件销毁后续处理
|
||||
_handleUnmounted() {
|
||||
this.active = false;
|
||||
this._offEmit();
|
||||
this.useChatRecordMode && common_vendor.index.offKeyboardHeightChange(this._handleKeyboardHeightChange);
|
||||
},
|
||||
// 触发更新是否超出页面状态
|
||||
_updateInsideOfPaging() {
|
||||
this.insideMore && this.insideOfPaging === true && setTimeout(this.doLoadMore, 200);
|
||||
},
|
||||
// 清除timeout
|
||||
_cleanTimeout(timeout) {
|
||||
if (timeout) {
|
||||
clearTimeout(timeout);
|
||||
timeout = null;
|
||||
}
|
||||
return timeout;
|
||||
},
|
||||
// 添加全局emit监听
|
||||
_onEmit() {
|
||||
common_vendor.index.$on(uni_modules_zPaging_components_zPaging_js_zPagingConstant.c.errorUpdateKey, (errorMsg) => {
|
||||
if (this.loading) {
|
||||
if (!!errorMsg) {
|
||||
this.customerEmptyViewErrorText = errorMsg;
|
||||
}
|
||||
this.complete(false).catch(() => {
|
||||
});
|
||||
}
|
||||
});
|
||||
common_vendor.index.$on(uni_modules_zPaging_components_zPaging_js_zPagingConstant.c.completeUpdateKey, (data) => {
|
||||
setTimeout(() => {
|
||||
if (this.loading) {
|
||||
if (!this.disabledCompleteEmit) {
|
||||
const type = data.type || "normal";
|
||||
const list = data.list || data;
|
||||
const rule = data.rule;
|
||||
this.fromCompleteEmit = true;
|
||||
switch (type) {
|
||||
case "normal":
|
||||
this.complete(list);
|
||||
break;
|
||||
case "total":
|
||||
this.completeByTotal(list, rule);
|
||||
break;
|
||||
case "nomore":
|
||||
this.completeByNoMore(list, rule);
|
||||
break;
|
||||
case "key":
|
||||
this.completeByKey(list, rule);
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
this.disabledCompleteEmit = false;
|
||||
}
|
||||
}
|
||||
}, 1);
|
||||
});
|
||||
},
|
||||
// 销毁全局emit和listener监听
|
||||
_offEmit() {
|
||||
common_vendor.index.$off(uni_modules_zPaging_components_zPaging_js_zPagingConstant.c.errorUpdateKey);
|
||||
common_vendor.index.$off(uni_modules_zPaging_components_zPaging_js_zPagingConstant.c.completeUpdateKey);
|
||||
}
|
||||
}
|
||||
};
|
||||
exports._sfc_main = _sfc_main;
|
||||
//# sourceMappingURL=../../../../../../.sourcemap/mp-weixin/uni_modules/z-paging/components/z-paging/js/z-paging-main.js.map
|
||||
Vendored
+14
File diff suppressed because one or more lines are too long
+238
@@ -0,0 +1,238 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../../common/vendor.js");
|
||||
const uni_modules_zPaging_components_zPaging_config_index = require("../config/index.js");
|
||||
const uni_modules_zPaging_components_zPaging_js_zPagingConstant = require("./z-paging-constant.js");
|
||||
const storageKey = "Z-PAGING-REFRESHER-TIME-STORAGE-KEY";
|
||||
let config = null;
|
||||
let configLoaded = false;
|
||||
let cachedSystemInfo = null;
|
||||
const timeoutMap = {};
|
||||
function gc(key, defaultValue) {
|
||||
return () => {
|
||||
_handleDefaultConfig();
|
||||
if (!config)
|
||||
return defaultValue;
|
||||
const value = config[key];
|
||||
return value === void 0 ? defaultValue : value;
|
||||
};
|
||||
}
|
||||
function getTouch(e) {
|
||||
let touch = null;
|
||||
if (e.touches && e.touches.length) {
|
||||
touch = e.touches[0];
|
||||
} else if (e.changedTouches && e.changedTouches.length) {
|
||||
touch = e.changedTouches[0];
|
||||
} else if (e.datail && e.datail != {}) {
|
||||
touch = e.datail;
|
||||
} else {
|
||||
return { touchX: 0, touchY: 0 };
|
||||
}
|
||||
return {
|
||||
touchX: touch.clientX,
|
||||
touchY: touch.clientY
|
||||
};
|
||||
}
|
||||
function getTouchFromZPaging(target) {
|
||||
if (target && target.tagName && target.tagName !== "BODY" && target.tagName !== "UNI-PAGE-BODY") {
|
||||
const classList = target.classList;
|
||||
if (classList && classList.contains("z-paging-content")) {
|
||||
return {
|
||||
isFromZp: true,
|
||||
isPageScroll: classList.contains("z-paging-content-page"),
|
||||
isReachedTop: classList.contains("z-paging-reached-top"),
|
||||
isUseChatRecordMode: classList.contains("z-paging-use-chat-record-mode")
|
||||
};
|
||||
} else {
|
||||
return getTouchFromZPaging(target.parentNode);
|
||||
}
|
||||
} else {
|
||||
return { isFromZp: false };
|
||||
}
|
||||
}
|
||||
function getParent(parent) {
|
||||
if (!parent)
|
||||
return null;
|
||||
if (parent.$refs.paging)
|
||||
return parent;
|
||||
return getParent(parent.$parent);
|
||||
}
|
||||
function consoleErr(err) {
|
||||
common_vendor.index.__f__("error", "at uni_modules/z-paging/components/z-paging/js/z-paging-utils.js:73", `[z-paging]${err}`);
|
||||
}
|
||||
function delay(callback, ms = uni_modules_zPaging_components_zPaging_js_zPagingConstant.c.delayTime, key) {
|
||||
const timeout = setTimeout(callback, ms);
|
||||
if (!!key) {
|
||||
timeoutMap[key] && clearTimeout(timeoutMap[key]);
|
||||
timeoutMap[key] = timeout;
|
||||
}
|
||||
return timeout;
|
||||
}
|
||||
function setRefesrherTime(time, key) {
|
||||
const datas = getRefesrherTime() || {};
|
||||
datas[key] = time;
|
||||
common_vendor.index.setStorageSync(storageKey, datas);
|
||||
}
|
||||
function getRefesrherTime() {
|
||||
return common_vendor.index.getStorageSync(storageKey);
|
||||
}
|
||||
function getRefesrherTimeByKey(key) {
|
||||
const datas = getRefesrherTime();
|
||||
return datas && datas[key] ? datas[key] : null;
|
||||
}
|
||||
function getRefesrherFormatTimeByKey(key, textMap) {
|
||||
const time = getRefesrherTimeByKey(key);
|
||||
const timeText = time ? _timeFormat(time, textMap) : textMap.none;
|
||||
return `${textMap.title}${timeText}`;
|
||||
}
|
||||
function convertToPx(text) {
|
||||
const dataType = Object.prototype.toString.call(text);
|
||||
if (dataType === "[object Number]")
|
||||
return text;
|
||||
let isRpx = false;
|
||||
if (text.indexOf("rpx") !== -1 || text.indexOf("upx") !== -1) {
|
||||
text = text.replace("rpx", "").replace("upx", "");
|
||||
isRpx = true;
|
||||
} else if (text.indexOf("px") !== -1) {
|
||||
text = text.replace("px", "");
|
||||
}
|
||||
if (!isNaN(text)) {
|
||||
if (isRpx)
|
||||
return Number(rpx2px(text));
|
||||
return Number(text);
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
function rpx2px(rpx) {
|
||||
return common_vendor.index.upx2px(rpx);
|
||||
}
|
||||
function getSystemInfoSync(useCache = false) {
|
||||
if (useCache && cachedSystemInfo) {
|
||||
return cachedSystemInfo;
|
||||
}
|
||||
const infoTypes = ["DeviceInfo", "AppBaseInfo", "WindowInfo"];
|
||||
const { deviceInfo, appBaseInfo, windowInfo } = infoTypes.reduce((acc, key) => {
|
||||
const method = `get${key}`;
|
||||
if (common_vendor.index[method] && common_vendor.index.canIUse(method)) {
|
||||
acc[key.charAt(0).toLowerCase() + key.slice(1)] = common_vendor.index[method]();
|
||||
}
|
||||
return acc;
|
||||
}, {});
|
||||
if (deviceInfo && appBaseInfo && windowInfo) {
|
||||
cachedSystemInfo = { ...deviceInfo, ...appBaseInfo, ...windowInfo };
|
||||
} else {
|
||||
cachedSystemInfo = common_vendor.index.getSystemInfoSync();
|
||||
}
|
||||
return cachedSystemInfo;
|
||||
}
|
||||
function getTime() {
|
||||
return (/* @__PURE__ */ new Date()).getTime();
|
||||
}
|
||||
function getInstanceId() {
|
||||
const s = [];
|
||||
const hexDigits = "0123456789abcdef";
|
||||
for (let i = 0; i < 10; i++) {
|
||||
s[i] = hexDigits.substr(Math.floor(Math.random() * 16), 1);
|
||||
}
|
||||
return s.join("") + getTime();
|
||||
}
|
||||
function wait(ms) {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(resolve, ms);
|
||||
});
|
||||
}
|
||||
function isPromise(func) {
|
||||
return Object.prototype.toString.call(func) === "[object Promise]";
|
||||
}
|
||||
function addUnit(value, unit) {
|
||||
if (Object.prototype.toString.call(value) === "[object String]") {
|
||||
let tempValue = value;
|
||||
tempValue = tempValue.replace("rpx", "").replace("upx", "").replace("px", "");
|
||||
if (value.indexOf("rpx") === -1 && value.indexOf("upx") === -1 && value.indexOf("px") !== -1) {
|
||||
tempValue = parseFloat(tempValue) * 2;
|
||||
}
|
||||
value = tempValue;
|
||||
}
|
||||
return unit === "rpx" ? value + "rpx" : value / 2 + "px";
|
||||
}
|
||||
function deepCopy(obj) {
|
||||
if (typeof obj !== "object" || obj === null)
|
||||
return obj;
|
||||
let newObj = Array.isArray(obj) ? [] : {};
|
||||
for (let key in obj) {
|
||||
if (obj.hasOwnProperty(key)) {
|
||||
newObj[key] = deepCopy(obj[key]);
|
||||
}
|
||||
}
|
||||
return newObj;
|
||||
}
|
||||
function _handleDefaultConfig() {
|
||||
if (configLoaded)
|
||||
return;
|
||||
if (uni_modules_zPaging_components_zPaging_config_index.zLocalConfig && Object.keys(uni_modules_zPaging_components_zPaging_config_index.zLocalConfig).length) {
|
||||
config = uni_modules_zPaging_components_zPaging_config_index.zLocalConfig;
|
||||
}
|
||||
if (!config && common_vendor.index.$zp) {
|
||||
config = common_vendor.index.$zp.config;
|
||||
}
|
||||
config = config ? Object.keys(config).reduce((result, key) => {
|
||||
result[_toCamelCase(key)] = config[key];
|
||||
return result;
|
||||
}, {}) : null;
|
||||
configLoaded = true;
|
||||
}
|
||||
function _timeFormat(time, textMap) {
|
||||
const date = new Date(time);
|
||||
const currentDate = /* @__PURE__ */ new Date();
|
||||
const dateDay = new Date(time).setHours(0, 0, 0, 0);
|
||||
const currentDateDay = (/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0);
|
||||
const disTime = dateDay - currentDateDay;
|
||||
let dayStr = "";
|
||||
const timeStr = _dateTimeFormat(date);
|
||||
if (disTime === 0) {
|
||||
dayStr = textMap.today;
|
||||
} else if (disTime === -864e5) {
|
||||
dayStr = textMap.yesterday;
|
||||
} else {
|
||||
dayStr = _dateDayFormat(date, date.getFullYear() !== currentDate.getFullYear());
|
||||
}
|
||||
return `${dayStr} ${timeStr}`;
|
||||
}
|
||||
function _dateDayFormat(date, showYear = true) {
|
||||
const year = date.getFullYear();
|
||||
const month = date.getMonth() + 1;
|
||||
const day = date.getDate();
|
||||
return showYear ? `${year}-${_fullZeroToTwo(month)}-${_fullZeroToTwo(day)}` : `${_fullZeroToTwo(month)}-${_fullZeroToTwo(day)}`;
|
||||
}
|
||||
function _dateTimeFormat(date) {
|
||||
const hour = date.getHours();
|
||||
const minute = date.getMinutes();
|
||||
return `${_fullZeroToTwo(hour)}:${_fullZeroToTwo(minute)}`;
|
||||
}
|
||||
function _fullZeroToTwo(str) {
|
||||
str = str.toString();
|
||||
return str.length === 1 ? "0" + str : str;
|
||||
}
|
||||
function _toCamelCase(value) {
|
||||
return value.replace(/-([a-z])/g, (_, group1) => group1.toUpperCase());
|
||||
}
|
||||
const u = {
|
||||
gc,
|
||||
setRefesrherTime,
|
||||
getRefesrherFormatTimeByKey,
|
||||
getTouch,
|
||||
getTouchFromZPaging,
|
||||
getParent,
|
||||
convertToPx,
|
||||
getTime,
|
||||
getInstanceId,
|
||||
consoleErr,
|
||||
delay,
|
||||
wait,
|
||||
isPromise,
|
||||
addUnit,
|
||||
deepCopy,
|
||||
rpx2px,
|
||||
getSystemInfoSync
|
||||
};
|
||||
exports.u = u;
|
||||
//# sourceMappingURL=../../../../../../.sourcemap/mp-weixin/uni_modules/z-paging/components/z-paging/js/z-paging-utils.js.map
|
||||
+382
@@ -0,0 +1,382 @@
|
||||
// [z-paging]微信小程序、QQ小程序、app-vue、h5上使用wxs实现自定义下拉刷新，降低逻辑层与视图层的通信折损，提升性能
|
||||
|
||||
var currentDis = 0;
|
||||
var isPCFlag = -1;
|
||||
var startY = -1;
|
||||
|
||||
// 监听js层传过来的数据
|
||||
function propObserver(newVal, oldVal, ownerIns, ins) {
|
||||
var state = ownerIns.getState() || {};
|
||||
state.currentIns = ins;
|
||||
var dataset = ins.getDataset();
|
||||
var loading = dataset.loading == true;
|
||||
// 如果是下拉刷新结束，更新transform
|
||||
if (newVal && newVal.indexOf('end') != -1) {
|
||||
var transition = newVal.split('end')[0];
|
||||
_setTransform('translateY(0px)', ins, false, transition);
|
||||
state.moveDis = 0;
|
||||
state.oldMoveDis = 0;
|
||||
currentDis = 0;
|
||||
} else if (newVal && newVal.indexOf('begin') != -1) {
|
||||
// 如果是下拉刷新开始，更新transform
|
||||
var refresherThreshold = ins.getDataset().refresherthreshold;
|
||||
_setTransformValue(refresherThreshold, ins, state, false);
|
||||
}
|
||||
}
|
||||
|
||||
// touch开始
|
||||
function touchstart(e, ownerIns) {
|
||||
var ins = _getIns(ownerIns);
|
||||
var state = {};
|
||||
var dataset = {};
|
||||
ownerIns.callMethod('_handleListTouchstart');
|
||||
if (ins) {
|
||||
state = ins.getState();
|
||||
dataset = ins.getDataset();
|
||||
if (_touchDisabled(e, ins, 0)) return;
|
||||
}
|
||||
var isTouchEnded = state.isTouchEnded;
|
||||
state.oldMoveDis = 0;
|
||||
var touch = _getTouch(e);
|
||||
var loading = _isTrue(dataset.loading);
|
||||
state.startY = touch.touchY;
|
||||
startY = state.startY;
|
||||
state.lastTouch = touch;
|
||||
if (!loading && isTouchEnded) {
|
||||
state.isTouchmoving = false;
|
||||
}
|
||||
state.isTouchEnded = false;
|
||||
// 通知js层touch开始
|
||||
ownerIns.callMethod('_handleRefresherTouchstart', touch);
|
||||
}
|
||||
|
||||
// touch中
|
||||
function touchmove(e, ownerIns) {
|
||||
var touch = _getTouch(e);
|
||||
var ins = _getIns(ownerIns);
|
||||
var dataset = ins.getDataset();
|
||||
var refresherThreshold = dataset.refresherthreshold;
|
||||
var refresherF2Threshold = dataset.refresherf2threshold;
|
||||
var refresherF2Enabled = _isTrue(dataset.refresherf2enabled);
|
||||
var isIos = _isTrue(dataset.isios);
|
||||
var state = ins.getState();
|
||||
var watchTouchDirectionChange = _isTrue(dataset.watchtouchdirectionchange);
|
||||
var moveDisObj = {};
|
||||
var moveDis = 0;
|
||||
var prevent = false;
|
||||
// 如果需要监听touch方向的改变
|
||||
if (watchTouchDirectionChange) {
|
||||
moveDisObj = _getMoveDis(e, ins);
|
||||
moveDis = moveDisObj.currentDis;
|
||||
prevent = moveDisObj.isDown;
|
||||
var direction = prevent ? 'top' : 'bottom';
|
||||
// 确保只在touch方向改变时通知一次js层，而不是touchmove中持续通知
|
||||
if (prevent == state.oldTouchDirection && prevent != state.oldEmitedTouchDirection) {
|
||||
ownerIns.callMethod('_handleTouchDirectionChange', { direction: direction });
|
||||
state.oldEmitedTouchDirection = prevent;
|
||||
}
|
||||
state.oldTouchDirection = prevent;
|
||||
}
|
||||
// 判断是否允许下拉刷新
|
||||
if (_touchDisabled(e, ins, 1)) {
|
||||
_handlePullingDown(state, ownerIns, false);
|
||||
return true;
|
||||
}
|
||||
// 判断下拉刷新的角度是否在要求范围内
|
||||
if (!_getAngleIsInRange(e, touch, state, dataset)) {
|
||||
_handlePullingDown(state, ownerIns, false);
|
||||
return true;
|
||||
}
|
||||
moveDisObj = _getMoveDis(e, ins);
|
||||
moveDis = moveDisObj.currentDis;
|
||||
prevent = moveDisObj.isDown;
|
||||
if (moveDis < 0) {
|
||||
// moveDis小于0，将transform重置为0
|
||||
_setTransformValue(0, ins, state, false);
|
||||
_handlePullingDown(state, ownerIns, false);
|
||||
return true;
|
||||
}
|
||||
if (prevent && !state.disabledBounce) {
|
||||
// 如果是用户下拉并且需要触发下拉刷新，需要通知js层将列表禁止滚动，防止在下拉刷新过程中列表也可以滚动导致的下拉刷新偏移过大的问题（在下拉刷新过程中仅通知一次）
|
||||
ownerIns.callMethod('_handleScrollViewBounce', { bounce: false });
|
||||
state.disabledBounce = true;
|
||||
_handlePullingDown(state, ownerIns, prevent);
|
||||
return !prevent;
|
||||
}
|
||||
// 更新transform
|
||||
_setTransformValue(moveDis, ins, state, false);
|
||||
var oldRefresherStatus = state.refresherStatus;
|
||||
var oldIsTouchmoving = _isTrue(dataset.oldistouchmoving);
|
||||
var hasTouchmove = _isTrue(dataset.hastouchmove);
|
||||
var isTouchmoving = state.isTouchmoving;
|
||||
state.refresherStatus = moveDis >= refresherThreshold ? (refresherF2Enabled && moveDis > refresherF2Threshold ? 'goF2' : 'releaseToRefresh') : 'default';
|
||||
if (!isTouchmoving) {
|
||||
state.isTouchmoving = true;
|
||||
isTouchmoving = true;
|
||||
}
|
||||
if (state.isTouchEnded) {
|
||||
state.isTouchEnded = false;
|
||||
}
|
||||
// 如果需要实时监听下拉位置偏移，则需要实时通知js层，此操作会使wxs层与js层频繁通信从而导致在一些性能较差设备中下拉刷新卡顿
|
||||
if (hasTouchmove) {
|
||||
ownerIns.callMethod('_handleWxsPullingDown', { moveDis: moveDis, diffDis: moveDisObj.diffDis });
|
||||
}
|
||||
// 在下拉刷新状态改变时通知js层
|
||||
if (oldRefresherStatus == undefined || oldRefresherStatus != state.refresherStatus || oldIsTouchmoving != isTouchmoving) {
|
||||
ownerIns.callMethod('_handleRefresherTouchmove', moveDis, touch);
|
||||
}
|
||||
_handlePullingDown(state, ownerIns, prevent);
|
||||
return !prevent;
|
||||
}
|
||||
|
||||
// touch结束
|
||||
function touchend(e, ownerIns) {
|
||||
var touch = _getTouch(e);
|
||||
var ins = _getIns(ownerIns);
|
||||
var dataset = ins.getDataset();
|
||||
var state = ins.getState();
|
||||
if (state.disabledBounce) {
|
||||
// 通知js允许列表滚动
|
||||
ownerIns.callMethod('_handleScrollViewBounce', { bounce: true });
|
||||
state.disabledBounce = false;
|
||||
}
|
||||
if (_touchDisabled(e, ins, 2)) return;
|
||||
state.reachMaxAngle = true;
|
||||
state.hitReachMaxAngleCount = 0;
|
||||
state.fixedIsTopHitCount = 0;
|
||||
if (!state.isTouchmoving) return;
|
||||
var oldRefresherStatus = state.refresherStatus;
|
||||
var oldMoveDis = state.moveDis;
|
||||
var refresherThreshold = ins.getDataset().refresherthreshold;
|
||||
var moveDis = _getMoveDis(e, ins).currentDis;
|
||||
if (!(moveDis >= refresherThreshold && oldRefresherStatus === 'releaseToRefresh')) {
|
||||
state.isTouchmoving = false;
|
||||
}
|
||||
// 通知js层touch结束
|
||||
ownerIns.callMethod('_handleRefresherTouchend', moveDis);
|
||||
state.isTouchEnded = true;
|
||||
if (oldMoveDis < refresherThreshold) return;
|
||||
var animate = false;
|
||||
if (moveDis >= refresherThreshold) {
|
||||
moveDis = refresherThreshold;
|
||||
animate = true;
|
||||
}
|
||||
_setTransformValue(moveDis, ins, state, animate);
|
||||
}
|
||||
|
||||
// #ifdef H5
|
||||
// 判断是否是pc平台
|
||||
function isPC() {
|
||||
if (!navigator) return false;
|
||||
if (isPCFlag != -1) return isPCFlag;
|
||||
var agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
|
||||
isPCFlag = agents.every(function(item) { return navigator.userAgent.indexOf(item) < 0 });
|
||||
return isPCFlag;
|
||||
}
|
||||
|
||||
var movable = false;
|
||||
|
||||
// 在pc平台监听mousedown、mousemove、mouseup等相关事件并转为对应touch事件处理，使得在pc平台也支持通过鼠标进行下拉刷新
|
||||
|
||||
function mousedown(e, ins) {
|
||||
if (!isPC()) return;
|
||||
touchstart(e, ins);
|
||||
movable = true;
|
||||
}
|
||||
|
||||
function mousemove(e, ins) {
|
||||
if (!isPC() || !movable) return;
|
||||
touchmove(e, ins);
|
||||
}
|
||||
|
||||
function mouseup(e, ins) {
|
||||
if (!isPC()) return;
|
||||
touchend(e, ins);
|
||||
movable = false;
|
||||
}
|
||||
|
||||
function mouseleave(e, ins) {
|
||||
if (!isPC()) return;
|
||||
movable = false;
|
||||
}
|
||||
// #endif
|
||||
|
||||
|
||||
// 修改视图层transform
|
||||
function _setTransformValue(value, ins, state, animate) {
|
||||
value = value || 0;
|
||||
if (state.moveDis == value) return;
|
||||
state.moveDis = value;
|
||||
_setTransform('translateY(' + value + 'px)', ins, animate, '');
|
||||
}
|
||||
|
||||
// 设置视图层transform，直接在视图层操作下拉刷新，使得js层不需要频繁和视图层通信，从而大大提升下拉刷新性能
|
||||
function _setTransform(transform, ins, animate, transition) {
|
||||
var dataset = ins.getDataset();
|
||||
if (_isTrue(dataset.refreshernotransform)) return;
|
||||
transform = transform == 'translateY(0px)' ? 'none' : transform;
|
||||
ins.requestAnimationFrame(function() {
|
||||
var stl = { 'transform': transform };
|
||||
if (animate) {
|
||||
stl['transition'] = 'transform .1s linear';
|
||||
}
|
||||
if (transition.length) {
|
||||
stl['transition'] = transition;
|
||||
}
|
||||
ins.setStyle(stl);
|
||||
})
|
||||
}
|
||||
|
||||
// 进一步处理下拉刷新的偏移数据
|
||||
function _getMoveDis(e, ins) {
|
||||
var state = ins.getState();
|
||||
var refresherThreshold = parseFloat(ins.getDataset().refresherthreshold);
|
||||
var refresherOutRate = parseFloat(ins.getDataset().refresheroutrate);
|
||||
var refresherPullRate = parseFloat(ins.getDataset().refresherpullrate);
|
||||
var touch = _getTouch(e);
|
||||
var currentStartY = !state.startY || state.startY == 'NaN' ? startY : state.startY;
|
||||
var moveDis = touch.touchY - currentStartY;
|
||||
var oldMoveDis = state.oldMoveDis || 0;
|
||||
state.oldMoveDis = moveDis;
|
||||
// 获取当前下拉刷新位置与上次的偏移量
|
||||
var diffDis = moveDis - oldMoveDis;
|
||||
if (diffDis > 0) {
|
||||
// 对偏移量进行进一步处理，通过refresherPullRate等配置进行约束
|
||||
diffDis = diffDis * refresherPullRate;
|
||||
if (currentDis > refresherThreshold) {
|
||||
diffDis = diffDis * (1 - refresherOutRate);
|
||||
}
|
||||
}
|
||||
// 控制diffDis过大的情况，比如进入页面突然猛然下拉，此时diffDis不应进行太大的偏移
|
||||
diffDis = diffDis > 100 ? diffDis / 100 : (diffDis > 20 ? diffDis / 2.2 : diffDis);
|
||||
currentDis += diffDis;
|
||||
currentDis = Math.max(0, currentDis);
|
||||
return {
|
||||
currentDis: currentDis,
|
||||
diffDis: diffDis,
|
||||
isDown: diffDis > 0
|
||||
};
|
||||
}
|
||||
|
||||
// 获取经过统一格式包装的当前touch对象
|
||||
function _getTouch(e) {
|
||||
var touch = e;
|
||||
if (e.touches && e.touches.length) {
|
||||
touch = e.touches[0];
|
||||
} else if (e.changedTouches && e.changedTouches.length) {
|
||||
touch = e.changedTouches[0];
|
||||
} else if (e.datail && e.datail != {}) {
|
||||
touch = e.datail;
|
||||
}
|
||||
return {
|
||||
touchX: touch.clientX,
|
||||
touchY: touch.clientY
|
||||
};
|
||||
}
|
||||
|
||||
// 获取当前currentIns
|
||||
function _getIns(ownerIns) {
|
||||
var ins = ownerIns.getState().currentIns;
|
||||
if (!ins) {
|
||||
ownerIns.callMethod('_handlePropUpdate');
|
||||
}
|
||||
return ins;
|
||||
}
|
||||
|
||||
// 判断当前状态是否允许下拉刷新
|
||||
function _touchDisabled(e, ins, processTag) {
|
||||
var dataset = ins.getDataset();
|
||||
var state = ins.getState();
|
||||
var loading = _isTrue(dataset.loading);
|
||||
var useChatRecordMode = _isTrue(dataset.usechatrecordmode);
|
||||
var refresherEnabled = _isTrue(dataset.refresherenabled);
|
||||
var useCustomRefresher = _isTrue(dataset.usecustomrefresher);
|
||||
var usePageScroll = _isTrue(dataset.usepagescroll);
|
||||
var pageScrollTop = parseFloat(dataset.pagescrolltop);
|
||||
var scrollTop = parseFloat(dataset.scrolltop);
|
||||
var finalScrollTop = usePageScroll ? pageScrollTop : scrollTop;
|
||||
var fixedIsTop = false;
|
||||
// 是否要处理滚动到顶部scrollTop不为0时候的容错，为解决在安卓中scroll-view有概率滚动到顶部时scrollTop不为0导致下拉刷新判断异常，但此方案会导致某些情况（例如滚动到距离顶部10px处）下拉抖动，因此改为通过获取zp-scroll-view的节点信息中的scrollTop进行验证的方案
|
||||
var handleFaultTolerantMove = false;
|
||||
if (handleFaultTolerantMove && finalScrollTop == (state.startScrollTop || 0) && finalScrollTop <= 105) {
|
||||
fixedIsTop = true;
|
||||
}
|
||||
var fixedIsTopHitCount = state.fixedIsTopHitCount || 0;
|
||||
if (fixedIsTop) {
|
||||
fixedIsTopHitCount ++;
|
||||
if (fixedIsTopHitCount <= 2) {
|
||||
fixedIsTop = false;
|
||||
}
|
||||
state.fixedIsTopHitCount = fixedIsTopHitCount;
|
||||
} else {
|
||||
state.fixedIsTopHitCount = 0;
|
||||
}
|
||||
if (handleFaultTolerantMove && processTag === 0) {
|
||||
state.startScrollTop = finalScrollTop || 0;
|
||||
}
|
||||
if (handleFaultTolerantMove && processTag === 2) {
|
||||
fixedIsTop = true;
|
||||
}
|
||||
return loading || useChatRecordMode || !refresherEnabled || !useCustomRefresher ||
|
||||
((usePageScroll && useCustomRefresher && pageScrollTop > 5) && !fixedIsTop) ||
|
||||
((!usePageScroll && useCustomRefresher && scrollTop > 5) && !fixedIsTop);
|
||||
}
|
||||
|
||||
// 判断下拉刷新的角度是否在要求范围内
|
||||
function _getAngleIsInRange(e, touch, state, dataset) {
|
||||
var maxAngle = dataset.refreshermaxangle;
|
||||
var refresherAecc = _isTrue(dataset.refresheraecc);
|
||||
var lastTouch = state.lastTouch;
|
||||
var reachMaxAngle = state.reachMaxAngle;
|
||||
var moveDis = state.oldMoveDis;
|
||||
if (!lastTouch) return true;
|
||||
if (maxAngle >= 0 && maxAngle <= 90 && lastTouch) {
|
||||
// 考虑下拉刷新手势由水平移动转为垂直方向移动的情况，此时不应当只判断垂直方向角度是否符合要求，应当直接禁止以避免在swiper中使用下拉刷新时，横向切换swiper途中手未离开屏幕还可以下拉刷新的问题
|
||||
if ((!moveDis || moveDis < 1) && !refresherAecc && reachMaxAngle != null && !reachMaxAngle) return false;
|
||||
var x = Math.abs(touch.touchX - lastTouch.touchX);
|
||||
var y = Math.abs(touch.touchY - lastTouch.touchY);
|
||||
var z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
|
||||
if ((x || y) && x > 1) {
|
||||
// 获取下拉刷新前后两次位移的角度
|
||||
var angle = Math.asin(y / z) / Math.PI * 180;
|
||||
if (angle < maxAngle) {
|
||||
// 如果角度小于配置要求，则return，同时通过hitReachMaxAngleCount控制角度判断的灵敏程度以最大程度兼容各种使用场景
|
||||
var hitReachMaxAngleCount = state.hitReachMaxAngleCount || 0;
|
||||
state.hitReachMaxAngleCount = ++hitReachMaxAngleCount;
|
||||
if (state.hitReachMaxAngleCount > 2) {
|
||||
state.lastTouch = touch;
|
||||
state.reachMaxAngle = false;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
state.lastTouch = touch;
|
||||
return true;
|
||||
}
|
||||
|
||||
// 进一步处理是否在下拉刷新并通知js层
|
||||
function _handlePullingDown(state, ins, onPullingDown) {
|
||||
var oldOnPullingDown = state.onPullingDown || false;
|
||||
if (oldOnPullingDown != onPullingDown) {
|
||||
ins.callMethod('_handleWxsPullingDownStatusChange', onPullingDown);
|
||||
}
|
||||
state.onPullingDown = onPullingDown;
|
||||
}
|
||||
|
||||
// 判断js层传过来的值是否为true
|
||||
function _isTrue(value) {
|
||||
value = (typeof(value) === 'string' ? JSON.parse(value) : value) || false;
|
||||
return value == true || value == 'true';
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
touchstart: touchstart,
|
||||
touchmove: touchmove,
|
||||
touchend: touchend,
|
||||
mousedown: mousedown,
|
||||
mousemove: mousemove,
|
||||
mouseup: mouseup,
|
||||
mouseleave: mouseleave,
|
||||
propObserver: propObserver
|
||||
}
|
||||
+329
@@ -0,0 +1,329 @@
|
||||
"use strict";
|
||||
const uni_modules_zPaging_components_zPaging_js_zPagingMain = require("./js/z-paging-main.js");
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const block0 = {};
|
||||
const block1 = (Component2) => {
|
||||
if (!Component2.wxsCallMethods) {
|
||||
Component2.wxsCallMethods = [];
|
||||
}
|
||||
Component2.wxsCallMethods.push("_handleListTouchstart", "_handleRefresherTouchstart", "_handleTouchDirectionChange", "_handleScrollViewBounce", "_handleWxsPullingDown", "_handleRefresherTouchmove", "_handleRefresherTouchend", "_handlePropUpdate", "_handleWxsPullingDownStatusChange");
|
||||
};
|
||||
if (!Array) {
|
||||
const _component_z_paging_refresh = common_vendor.resolveComponent("z-paging-refresh");
|
||||
const _component_z_paging_load_more = common_vendor.resolveComponent("z-paging-load-more");
|
||||
const _easycom_z_paging_empty_view2 = common_vendor.resolveComponent("z-paging-empty-view");
|
||||
(_component_z_paging_refresh + _component_z_paging_load_more + _easycom_z_paging_empty_view2)();
|
||||
}
|
||||
const _easycom_z_paging_empty_view = () => "../z-paging-empty-view/z-paging-empty-view.js";
|
||||
if (!Math) {
|
||||
_easycom_z_paging_empty_view();
|
||||
}
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return common_vendor.e({
|
||||
a: _ctx.cssSafeAreaInsetBottom === -1
|
||||
}, _ctx.cssSafeAreaInsetBottom === -1 ? {} : {}, {
|
||||
b: _ctx.showF2 && _ctx.showRefresherF2
|
||||
}, _ctx.showF2 && _ctx.showRefresherF2 ? {
|
||||
c: common_vendor.o(() => {
|
||||
}),
|
||||
d: common_vendor.s({
|
||||
"transform": _ctx.f2Transform,
|
||||
"transition": `transform .2s linear`,
|
||||
"height": _ctx.superContentHeight + "px",
|
||||
"z-index": _ctx.f2ZIndex
|
||||
})
|
||||
} : {}, {
|
||||
e: !_ctx.usePageScroll && _ctx.zSlots.top
|
||||
}, !_ctx.usePageScroll && _ctx.zSlots.top ? {} : _ctx.usePageScroll && _ctx.zSlots.top ? {
|
||||
g: common_vendor.o(() => {
|
||||
}),
|
||||
h: common_vendor.s({
|
||||
"top": `${_ctx.windowTop}px`,
|
||||
"z-index": _ctx.topZIndex
|
||||
})
|
||||
} : {}, {
|
||||
f: _ctx.usePageScroll && _ctx.zSlots.top,
|
||||
i: _ctx.zSlots.left
|
||||
}, _ctx.zSlots.left ? {
|
||||
j: _ctx.finalIsOldWebView ? 1 : ""
|
||||
} : {}, {
|
||||
k: _ctx.finalRefresherFixedBacHeight > 0
|
||||
}, _ctx.finalRefresherFixedBacHeight > 0 ? {
|
||||
l: common_vendor.s({
|
||||
"background": _ctx.refresherFixedBackground,
|
||||
"height": `${_ctx.finalRefresherFixedBacHeight}px`
|
||||
})
|
||||
} : {}, {
|
||||
m: _ctx.showRefresher
|
||||
}, _ctx.showRefresher ? common_vendor.e({
|
||||
n: _ctx.useRefresherStatusBarPlaceholder
|
||||
}, _ctx.useRefresherStatusBarPlaceholder ? {
|
||||
o: common_vendor.s({
|
||||
"height": `${_ctx.statusBarHeight}px`
|
||||
})
|
||||
} : {}, {
|
||||
p: !(_ctx.zSlots.refresherComplete && _ctx.refresherStatus === _ctx.R.Complete) && !(_ctx.zSlots.refresherF2 && _ctx.refresherStatus === _ctx.R.GoF2)
|
||||
}, !(_ctx.zSlots.refresherComplete && _ctx.refresherStatus === _ctx.R.Complete) && !(_ctx.zSlots.refresherF2 && _ctx.refresherStatus === _ctx.R.GoF2) ? {
|
||||
q: common_vendor.r("refresher", {
|
||||
refresherStatus: _ctx.refresherStatus
|
||||
})
|
||||
} : {}, {
|
||||
r: _ctx.zSlots.refresherComplete && _ctx.refresherStatus === _ctx.R.Complete
|
||||
}, _ctx.zSlots.refresherComplete && _ctx.refresherStatus === _ctx.R.Complete ? {} : _ctx.zSlots.refresherF2 && _ctx.refresherStatus === _ctx.R.GoF2 ? {} : !_ctx.showCustomRefresher ? {
|
||||
v: common_vendor.sr("refresh", "1aa372d7-0"),
|
||||
w: common_vendor.s({
|
||||
"height": `${_ctx.finalRefresherThreshold - _ctx.finalRefresherThresholdPlaceholder}px`
|
||||
}),
|
||||
x: common_vendor.p({
|
||||
status: _ctx.refresherStatus,
|
||||
defaultThemeStyle: _ctx.finalRefresherThemeStyle,
|
||||
defaultText: _ctx.finalRefresherDefaultText,
|
||||
isIos: _ctx.isIos,
|
||||
pullingText: _ctx.finalRefresherPullingText,
|
||||
refreshingText: _ctx.finalRefresherRefreshingText,
|
||||
completeText: _ctx.finalRefresherCompleteText,
|
||||
goF2Text: _ctx.finalRefresherGoF2Text,
|
||||
defaultImg: _ctx.refresherDefaultImg,
|
||||
pullingImg: _ctx.refresherPullingImg,
|
||||
refreshingImg: _ctx.refresherRefreshingImg,
|
||||
completeImg: _ctx.refresherCompleteImg,
|
||||
refreshingAnimated: _ctx.refresherRefreshingAnimated,
|
||||
showUpdateTime: _ctx.showRefresherUpdateTime,
|
||||
updateTimeKey: _ctx.refresherUpdateTimeKey,
|
||||
updateTimeTextMap: _ctx.finalRefresherUpdateTimeTextMap,
|
||||
imgStyle: _ctx.refresherImgStyle,
|
||||
titleStyle: _ctx.refresherTitleStyle,
|
||||
updateTimeStyle: _ctx.refresherUpdateTimeStyle,
|
||||
unit: _ctx.unit
|
||||
})
|
||||
} : {}, {
|
||||
s: _ctx.zSlots.refresherF2 && _ctx.refresherStatus === _ctx.R.GoF2,
|
||||
t: !_ctx.showCustomRefresher,
|
||||
y: common_vendor.s({
|
||||
"height": `${_ctx.finalRefresherThreshold}px`,
|
||||
"background": _ctx.refresherBackground
|
||||
}),
|
||||
z: common_vendor.s({
|
||||
"margin-top": `-${_ctx.finalRefresherThreshold + _ctx.refresherThresholdUpdateTag}px`,
|
||||
"background": _ctx.refresherBackground,
|
||||
"opacity": _ctx.isTouchmoving ? 1 : 0
|
||||
})
|
||||
}) : {}, {
|
||||
A: _ctx.showLoading && _ctx.zSlots.loading && !_ctx.loadingFullFixed
|
||||
}, _ctx.showLoading && _ctx.zSlots.loading && !_ctx.loadingFullFixed ? {} : {}, {
|
||||
B: _ctx.useVirtualList
|
||||
}, _ctx.useVirtualList ? {
|
||||
C: common_vendor.s({
|
||||
height: _ctx.virtualPlaceholderTopHeight + "px"
|
||||
})
|
||||
} : {}, {
|
||||
D: _ctx.finalUseInnerList
|
||||
}, _ctx.finalUseInnerList ? common_vendor.e({
|
||||
E: _ctx.finalUseVirtualList
|
||||
}, _ctx.finalUseVirtualList ? {
|
||||
F: common_vendor.f(_ctx.virtualList, (item, index, i0) => {
|
||||
return common_vendor.e(_ctx.useCompatibilityMode ? {} : {
|
||||
a: "cell-" + i0,
|
||||
b: common_vendor.r("cell", {
|
||||
item,
|
||||
index: _ctx.virtualTopRangeIndex + index
|
||||
}, i0)
|
||||
}, {
|
||||
c: `${_ctx.fianlVirtualCellIdPrefix}-${item[_ctx.virtualCellIndexKey]}`,
|
||||
d: item["zp_unique_index"],
|
||||
e: common_vendor.o(($event) => _ctx._innerCellClick(item, _ctx.virtualTopRangeIndex + index), item["zp_unique_index"])
|
||||
});
|
||||
}),
|
||||
G: _ctx.useCompatibilityMode,
|
||||
H: common_vendor.s(_ctx.innerCellStyle)
|
||||
} : {
|
||||
I: common_vendor.f(_ctx.realTotalData, (item, index, i0) => {
|
||||
return {
|
||||
a: "cell-" + i0,
|
||||
b: common_vendor.r("cell", {
|
||||
item,
|
||||
index
|
||||
}, i0),
|
||||
c: index,
|
||||
d: common_vendor.o(($event) => _ctx._innerCellClick(item, index), index)
|
||||
};
|
||||
})
|
||||
}, {
|
||||
J: common_vendor.s(_ctx.innerListStyle)
|
||||
}) : {}, {
|
||||
K: _ctx.useChatRecordMode && _ctx.realTotalData.length >= _ctx.defaultPageSize && (_ctx.loadingStatus !== _ctx.M.NoMore || _ctx.zSlots.chatNoMore) && (_ctx.realTotalData.length || _ctx.showChatLoadingWhenReload && _ctx.showLoading) && !_ctx.isFirstPageAndNoMore
|
||||
}, _ctx.useChatRecordMode && _ctx.realTotalData.length >= _ctx.defaultPageSize && (_ctx.loadingStatus !== _ctx.M.NoMore || _ctx.zSlots.chatNoMore) && (_ctx.realTotalData.length || _ctx.showChatLoadingWhenReload && _ctx.showLoading) && !_ctx.isFirstPageAndNoMore ? common_vendor.e({
|
||||
L: _ctx.loadingStatus === _ctx.M.NoMore && _ctx.zSlots.chatNoMore
|
||||
}, _ctx.loadingStatus === _ctx.M.NoMore && _ctx.zSlots.chatNoMore ? {} : common_vendor.e({
|
||||
M: _ctx.zSlots.chatLoading
|
||||
}, _ctx.zSlots.chatLoading ? {
|
||||
N: common_vendor.r("chatLoading", {
|
||||
loadingMoreStatus: _ctx.loadingStatus
|
||||
})
|
||||
} : {
|
||||
O: common_vendor.o(($event) => _ctx._onLoadingMore("click")),
|
||||
P: common_vendor.p({
|
||||
zConfig: _ctx.zLoadMoreConfig
|
||||
})
|
||||
}), {
|
||||
Q: common_vendor.s(_ctx.chatRecordRotateStyle)
|
||||
}) : {}, {
|
||||
R: _ctx.useVirtualList
|
||||
}, _ctx.useVirtualList ? {
|
||||
S: common_vendor.s({
|
||||
height: _ctx.virtualPlaceholderBottomHeight + "px"
|
||||
})
|
||||
} : {}, {
|
||||
T: _ctx.showLoadingMoreDefault
|
||||
}, _ctx.showLoadingMoreDefault ? {} : _ctx.showLoadingMoreLoading ? {} : _ctx.showLoadingMoreNoMore ? {} : _ctx.showLoadingMoreFail ? {} : _ctx.showLoadingMoreCustom ? {
|
||||
Y: common_vendor.o(($event) => _ctx._onLoadingMore("click")),
|
||||
Z: common_vendor.p({
|
||||
zConfig: _ctx.zLoadMoreConfig
|
||||
})
|
||||
} : {}, {
|
||||
U: _ctx.showLoadingMoreLoading,
|
||||
V: _ctx.showLoadingMoreNoMore,
|
||||
W: _ctx.showLoadingMoreFail,
|
||||
X: _ctx.showLoadingMoreCustom,
|
||||
aa: _ctx.safeAreaInsetBottom && _ctx.useSafeAreaPlaceholder && !_ctx.useChatRecordMode
|
||||
}, _ctx.safeAreaInsetBottom && _ctx.useSafeAreaPlaceholder && !_ctx.useChatRecordMode ? {
|
||||
ab: common_vendor.s({
|
||||
height: _ctx.safeAreaBottom + "px"
|
||||
})
|
||||
} : {}, {
|
||||
ac: common_vendor.s(_ctx.finalPlaceholderTopHeightStyle),
|
||||
ad: common_vendor.s(_ctx.finalPagingContentStyle),
|
||||
ae: _ctx.showEmpty
|
||||
}, _ctx.showEmpty ? common_vendor.e({
|
||||
af: _ctx.zSlots.empty
|
||||
}, _ctx.zSlots.empty ? {
|
||||
ag: common_vendor.r("empty", {
|
||||
isLoadFailed: _ctx.isLoadFailed
|
||||
})
|
||||
} : {
|
||||
ah: common_vendor.o(_ctx._emptyViewReload),
|
||||
ai: common_vendor.o(_ctx._emptyViewClick),
|
||||
aj: common_vendor.p({
|
||||
emptyViewImg: _ctx.finalEmptyViewImg,
|
||||
emptyViewText: _ctx.finalEmptyViewText,
|
||||
showEmptyViewReload: _ctx.finalShowEmptyViewReload,
|
||||
emptyViewReloadText: _ctx.finalEmptyViewReloadText,
|
||||
isLoadFailed: _ctx.isLoadFailed,
|
||||
emptyViewStyle: _ctx.emptyViewStyle,
|
||||
emptyViewTitleStyle: _ctx.emptyViewTitleStyle,
|
||||
emptyViewImgStyle: _ctx.emptyViewImgStyle,
|
||||
emptyViewReloadStyle: _ctx.emptyViewReloadStyle,
|
||||
emptyViewZIndex: _ctx.emptyViewZIndex,
|
||||
emptyViewFixed: _ctx.emptyViewFixed,
|
||||
unit: _ctx.unit
|
||||
})
|
||||
}, {
|
||||
ak: _ctx.emptyViewCenter ? 1 : "",
|
||||
al: common_vendor.s(_ctx.emptyViewSuperStyle),
|
||||
am: common_vendor.s(_ctx.chatRecordRotateStyle)
|
||||
}) : {}, {
|
||||
an: common_vendor.s({
|
||||
justifyContent: _ctx.useChatRecordMode ? "flex-end" : "flex-start"
|
||||
}),
|
||||
ao: common_vendor.s(_ctx.scrollViewInStyle),
|
||||
ap: common_vendor.s({
|
||||
"transform": _ctx.finalRefresherTransform,
|
||||
"transition": _ctx.refresherTransition
|
||||
}),
|
||||
aq: _ctx.wxsPropType,
|
||||
ar: _ctx.finalRefresherThreshold,
|
||||
as: _ctx.refresherF2Enabled,
|
||||
at: _ctx.finalRefresherF2Threshold,
|
||||
av: _ctx.isIos,
|
||||
aw: _ctx.loading || _ctx.isRefresherInComplete,
|
||||
ax: _ctx.useChatRecordMode,
|
||||
ay: _ctx.refresherEnabled,
|
||||
az: _ctx.useCustomRefresher,
|
||||
aA: _ctx.wxsPageScrollTop,
|
||||
aB: _ctx.wxsScrollTop,
|
||||
aC: _ctx.refresherMaxAngle,
|
||||
aD: _ctx.refresherNoTransform,
|
||||
aE: _ctx.refresherAngleEnableChangeContinued,
|
||||
aF: _ctx.usePageScroll,
|
||||
aG: _ctx.watchTouchDirectionChange,
|
||||
aH: _ctx.isTouchmoving,
|
||||
aI: _ctx.finalRefresherOutRate,
|
||||
aJ: _ctx.finalRefresherPullRate,
|
||||
aK: _ctx.hasTouchmove,
|
||||
aL: !_ctx.usePageScroll ? 1 : "",
|
||||
aM: !_ctx.showScrollbar ? 1 : "",
|
||||
aN: common_vendor.s(_ctx.chatRecordRotateStyle),
|
||||
aO: _ctx.scrollTop,
|
||||
aP: _ctx.scrollLeft,
|
||||
aQ: _ctx.scrollX,
|
||||
aR: _ctx.finalScrollable,
|
||||
aS: _ctx.finalEnableBackToTop,
|
||||
aT: _ctx.showScrollbar,
|
||||
aU: _ctx.finalScrollWithAnimation,
|
||||
aV: _ctx.scrollIntoView,
|
||||
aW: _ctx.finalLowerThreshold,
|
||||
aX: _ctx.finalRefresherEnabled && !_ctx.useCustomRefresher,
|
||||
aY: _ctx.finalRefresherThreshold,
|
||||
aZ: _ctx.finalRefresherDefaultStyle,
|
||||
ba: _ctx.refresherBackground,
|
||||
bb: _ctx.finalRefresherTriggered,
|
||||
bc: common_vendor.o((...args) => _ctx._scroll && _ctx._scroll(...args)),
|
||||
bd: common_vendor.o((...args) => _ctx._onScrollToLower && _ctx._onScrollToLower(...args)),
|
||||
be: common_vendor.o((...args) => _ctx._onScrollToUpper && _ctx._onScrollToUpper(...args)),
|
||||
bf: common_vendor.o((...args) => _ctx._onRestore && _ctx._onRestore(...args)),
|
||||
bg: common_vendor.o(($event) => _ctx._onRefresh(true)),
|
||||
bh: _ctx.finalIsOldWebView ? 1 : "",
|
||||
bi: common_vendor.s(_ctx.scrollViewContainerStyle),
|
||||
bj: _ctx.zSlots.right
|
||||
}, _ctx.zSlots.right ? {
|
||||
bk: _ctx.finalIsOldWebView ? 1 : ""
|
||||
} : {}, {
|
||||
bl: !_ctx.usePageScroll ? 1 : "",
|
||||
bm: common_vendor.s(_ctx.finalScrollViewStyle),
|
||||
bn: !_ctx.usePageScroll && _ctx.zSlots.bottom
|
||||
}, !_ctx.usePageScroll && _ctx.zSlots.bottom ? {} : _ctx.usePageScroll && _ctx.zSlots.bottom ? {
|
||||
bp: common_vendor.o(() => {
|
||||
}),
|
||||
bq: common_vendor.s({
|
||||
"bottom": `${_ctx.windowBottom}px`
|
||||
})
|
||||
} : {}, {
|
||||
bo: _ctx.usePageScroll && _ctx.zSlots.bottom,
|
||||
br: _ctx.useChatRecordMode && _ctx.autoAdjustPositionWhenChat
|
||||
}, _ctx.useChatRecordMode && _ctx.autoAdjustPositionWhenChat ? {
|
||||
bs: common_vendor.s({
|
||||
height: _ctx.chatRecordModeSafeAreaBottom + "px"
|
||||
}),
|
||||
bt: common_vendor.s({
|
||||
height: _ctx.keyboardHeight + "px"
|
||||
})
|
||||
} : {}, {
|
||||
bv: _ctx.bottomBgColor,
|
||||
bw: _ctx.showBackToTopClass
|
||||
}, _ctx.showBackToTopClass ? common_vendor.e({
|
||||
bx: _ctx.zSlots.backToTop
|
||||
}, _ctx.zSlots.backToTop ? {} : {
|
||||
by: _ctx.useChatRecordMode && !_ctx.backToTopImg.length ? 1 : "",
|
||||
bz: _ctx.backToTopImg.length ? _ctx.backToTopImg : _ctx.base64BackToTop
|
||||
}, {
|
||||
bA: common_vendor.n(_ctx.finalBackToTopClass),
|
||||
bB: common_vendor.s(_ctx.finalBackToTopStyle),
|
||||
bC: common_vendor.o((...args) => _ctx._backToTopClick && _ctx._backToTopClick(...args))
|
||||
}) : {}, {
|
||||
bD: _ctx.showLoading && _ctx.zSlots.loading && _ctx.loadingFullFixed
|
||||
}, _ctx.showLoading && _ctx.zSlots.loading && _ctx.loadingFullFixed ? {} : {}, {
|
||||
bE: !_ctx.usePageScroll ? 1 : "",
|
||||
bF: !_ctx.usePageScroll && _ctx.fixed ? 1 : "",
|
||||
bG: _ctx.usePageScroll ? 1 : "",
|
||||
bH: _ctx.renderPropScrollTop < 1 ? 1 : "",
|
||||
bI: _ctx.useChatRecordMode ? 1 : "",
|
||||
bJ: common_vendor.s(_ctx.finalPagingStyle)
|
||||
});
|
||||
}
|
||||
if (typeof block0 === "function")
|
||||
block0(uni_modules_zPaging_components_zPaging_js_zPagingMain._sfc_main);
|
||||
if (typeof block1 === "function")
|
||||
block1(uni_modules_zPaging_components_zPaging_js_zPagingMain._sfc_main);
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(uni_modules_zPaging_components_zPaging_js_zPagingMain._sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-1aa372d7"]]);
|
||||
wx.createComponent(Component);
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/z-paging/components/z-paging/z-paging.js.map
|
||||
+8
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"z-paging-empty-view": "../z-paging-empty-view/z-paging-empty-view",
|
||||
"z-paging-refresh": "./components/z-paging-refresh",
|
||||
"z-paging-load-more": "./components/z-paging-load-more"
|
||||
}
|
||||
}
|
||||
+2
File diff suppressed because one or more lines are too long
+243
@@ -0,0 +1,243 @@
|
||||
/* [z-paging]公共css*/
|
||||
.z-paging-content.data-v-1aa372d7 {
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
.z-paging-content-full.data-v-1aa372d7 {
|
||||
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.z-paging-content-fixed.data-v-1aa372d7, .zp-loading-fixed.data-v-1aa372d7 {
|
||||
position: fixed;
|
||||
|
||||
height: auto;
|
||||
width: auto;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
.zp-f2-content.data-v-1aa372d7 {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: white;
|
||||
}
|
||||
.zp-page-top.data-v-1aa372d7, .zp-page-bottom.data-v-1aa372d7 {
|
||||
|
||||
width: auto;
|
||||
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
.zp-page-left.data-v-1aa372d7, .zp-page-right.data-v-1aa372d7 {
|
||||
|
||||
height: 100%;
|
||||
}
|
||||
.zp-scroll-view-super.data-v-1aa372d7 {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.zp-view-super.data-v-1aa372d7 {
|
||||
|
||||
display: flex;
|
||||
|
||||
flex-direction: row;
|
||||
}
|
||||
.zp-scroll-view-container.data-v-1aa372d7, .zp-scroll-view.data-v-1aa372d7 {
|
||||
position: relative;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.zp-absoulte.data-v-1aa372d7 {
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: auto;
|
||||
}
|
||||
.zp-scroll-view-absolute.data-v-1aa372d7 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.zp-scroll-view-hide-scrollbar.data-v-1aa372d7 ::-webkit-scrollbar {
|
||||
display: none;
|
||||
-webkit-appearance: none;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
background: transparent;
|
||||
}
|
||||
.zp-paging-touch-view.data-v-1aa372d7 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.zp-fixed-bac-view.data-v-1aa372d7 {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 200px;
|
||||
}
|
||||
.zp-paging-main.data-v-1aa372d7 {
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
}
|
||||
.zp-paging-container.data-v-1aa372d7 {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
}
|
||||
.zp-chat-record-loading-custom-image.data-v-1aa372d7 {
|
||||
width: 35rpx;
|
||||
height: 35rpx;
|
||||
|
||||
animation: loading-flower-1aa372d7 1s linear infinite;
|
||||
}
|
||||
.zp-page-bottom-keyboard-placeholder-animate.data-v-1aa372d7 {
|
||||
transition-property: height;
|
||||
transition-duration: 0.15s;
|
||||
|
||||
will-change: height;
|
||||
}
|
||||
.zp-custom-refresher-container.data-v-1aa372d7 {
|
||||
overflow: hidden;
|
||||
}
|
||||
.zp-custom-refresher-refresh.data-v-1aa372d7 {
|
||||
|
||||
display: block;
|
||||
}
|
||||
.zp-back-to-top.data-v-1aa372d7 {
|
||||
z-index: 999;
|
||||
position: absolute;
|
||||
bottom: 0rpx;
|
||||
transition-duration: .3s;
|
||||
transition-property: opacity;
|
||||
}
|
||||
.zp-back-to-top-rpx.data-v-1aa372d7 {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
bottom: 0rpx;
|
||||
right: 25rpx;
|
||||
}
|
||||
.zp-back-to-top-px.data-v-1aa372d7 {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
bottom: 0px;
|
||||
right: 13px;
|
||||
}
|
||||
.zp-back-to-top-show.data-v-1aa372d7 {
|
||||
opacity: 1;
|
||||
}
|
||||
.zp-back-to-top-hide.data-v-1aa372d7 {
|
||||
opacity: 0;
|
||||
}
|
||||
.zp-back-to-top-img.data-v-1aa372d7 {
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
|
||||
|
||||
|
||||
z-index: 999;
|
||||
}
|
||||
.zp-back-to-top-img-inversion.data-v-1aa372d7 {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.zp-empty-view.data-v-1aa372d7 {
|
||||
|
||||
|
||||
|
||||
flex: 1;
|
||||
}
|
||||
.zp-empty-view-center.data-v-1aa372d7 {
|
||||
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.zp-loading-fixed.data-v-1aa372d7 {
|
||||
z-index: 9999;
|
||||
}
|
||||
.zp-safe-area-inset-bottom.data-v-1aa372d7 {
|
||||
position: absolute;
|
||||
|
||||
height: env(safe-area-inset-bottom);
|
||||
}
|
||||
.zp-n-refresh-container.data-v-1aa372d7 {
|
||||
|
||||
display: flex;
|
||||
|
||||
justify-content: center;
|
||||
width: 750rpx;
|
||||
}
|
||||
.zp-n-list-container.data-v-1aa372d7{
|
||||
|
||||
display: flex;
|
||||
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* [z-paging]公用的静态css资源 */
|
||||
.zp-line-loading-image.data-v-1aa372d7 {
|
||||
|
||||
animation: loading-flower-1aa372d7 1s steps(12) infinite;
|
||||
|
||||
color: #666666;
|
||||
}
|
||||
.zp-line-loading-image-rpx.data-v-1aa372d7 {
|
||||
margin-right: 8rpx;
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
}
|
||||
.zp-line-loading-image-px.data-v-1aa372d7 {
|
||||
margin-right: 4px;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
}
|
||||
.zp-loading-image-ios-rpx.data-v-1aa372d7 {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
.zp-loading-image-ios-px.data-v-1aa372d7 {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.zp-loading-image-android-rpx.data-v-1aa372d7 {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
}
|
||||
.zp-loading-image-android-px.data-v-1aa372d7 {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
}
|
||||
@keyframes loading-flower-1aa372d7 {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user