npm
/
vue-flip-page
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

some bug

This commit is contained in:
harriet 2020-02-05 11:05:03 +08:00
parent 27e393106c
commit 34755ab398
6 changed files with 1416 additions and 1367 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

133
dist/flip.min.js vendored
View File

@ -679,15 +679,6 @@ module.exports = function (it) {
// //
// //
// //
//
//
//
//
//
//
//
//
//
@ -866,6 +857,21 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
var PI = Math.PI; var PI = Math.PI;
var A90 = PI / 2; var A90 = PI / 2;
//判断微信下ios和安卓 ios为1 安卓为2 其他3
function getPhoneEnv() {
var u = navigator.userAgent,
app = navigator.appVersion;
var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //g
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isAndroid) {
return "2";
} else if (isIOS) {
return "1";
} else {
return "3";
}
}
function bezier(p1, p2, p3, p4, t) { function bezier(p1, p2, p3, p4, t) {
var a = 1 - t; var a = 1 - t;
var b = a * a * a; var b = a * a * a;
@ -1302,25 +1308,38 @@ exports.default = {
isStart: false isStart: false
}; };
}, },
mounted: function mounted() {}, mounted: function mounted() {
activated: function activated() {
var _this = this; var _this = this;
this.$nextTick(function () { this.$nextTick(function () {
_this.TouchMove(); _this.TouchMove();
}); });
}, },
deactivated: function deactivated() { destroyed: function destroyed() {
var _this2 = this; var _this2 = this;
this.$nextTick(function () { this.$nextTick(function () {
_this2.TouchMoveOut(); _this2.TouchMoveOut();
}); });
}, },
activated: function activated() {
var _this3 = this;
this.$nextTick(function () {
_this3.TouchMove();
});
},
deactivated: function deactivated() {
var _this4 = this;
this.$nextTick(function () {
_this4.TouchMoveOut();
});
},
methods: { methods: {
TouchMove: function TouchMove() { TouchMove: function TouchMove() {
if (this.fun.getPhoneEnv() == 3) { if (getPhoneEnv() == 3) {
this.$refs.turn.addEventListener("mousemove", this.handleManualTouchMove, false); this.$refs.turn.addEventListener("mousemove", this.handleManualTouchMove, false);
this.$refs.turn.addEventListener("mousedown", this.handleManualTouchStart, false); this.$refs.turn.addEventListener("mousedown", this.handleManualTouchStart, false);
this.$refs.turn.addEventListener("mouseup", this.handleManualTouchEnd, false); this.$refs.turn.addEventListener("mouseup", this.handleManualTouchEnd, false);
@ -1331,7 +1350,7 @@ exports.default = {
} }
}, },
TouchMoveOut: function TouchMoveOut() { TouchMoveOut: function TouchMoveOut() {
if (this.fun.getPhoneEnv() == 3) { if (getPhoneEnv() == 3) {
this.$refs.turn.removeEventListener("mousemove", this.handleManualTouchMove, false); this.$refs.turn.removeEventListener("mousemove", this.handleManualTouchMove, false);
this.$refs.turn.removeEventListener("mousedown", this.handleManualTouchStart, false); this.$refs.turn.removeEventListener("mousedown", this.handleManualTouchStart, false);
this.$refs.turn.removeEventListener("mouseup", this.handleManualTouchEnd, false); this.$refs.turn.removeEventListener("mouseup", this.handleManualTouchEnd, false);
@ -1498,7 +1517,7 @@ exports.default = {
return false; return false;
}, },
toPage: function toPage(_toPage, startPoint) { toPage: function toPage(_toPage, startPoint) {
var _this3 = this; var _this5 = this;
var fromPage = this.viewIndex; var fromPage = this.viewIndex;
@ -1526,13 +1545,13 @@ exports.default = {
} }
this.turn(startPoint || fromPoint, function () { this.turn(startPoint || fromPoint, function () {
_this3.viewIndex = _toPage; _this5.viewIndex = _toPage;
_this3.turnPage = null; _this5.turnPage = null;
_this3.backPage = _toPage; _this5.backPage = _toPage;
// console.log('完成翻页，当前页', this.backPage) // console.log('完成翻页，当前页', this.backPage)
_this3.updateTurn(); _this5.updateTurn();
_this3.turnActive = false; _this5.turnActive = false;
_this3.$emit("change", _this3.backPage); _this5.$emit("change", _this5.backPage);
}); });
} else { } else {
if (!this.action) { if (!this.action) {
@ -1542,51 +1561,51 @@ exports.default = {
} }
this.hideFolded(startPoint || fromPoint, function () { this.hideFolded(startPoint || fromPoint, function () {
_this3.viewIndex = _toPage; _this5.viewIndex = _toPage;
_this3.turnPage = null; _this5.turnPage = null;
_this3.backPage = _toPage; _this5.backPage = _toPage;
// console.log('完成翻页，当前页', this.backPage) // console.log('完成翻页，当前页', this.backPage)
_this3.updateTurn(); _this5.updateTurn();
_this3.turnActive = false; _this5.turnActive = false;
_this3.$emit("change", _this3.backPage); _this5.$emit("change", _this5.backPage);
}); });
} }
// console.log('this.turnActive', this.turnPage, this.turnActive) // console.log('this.turnActive', this.turnPage, this.turnActive)
this.$emit("turning", this.backPage); this.$emit("turning", this.backPage);
}, },
turn: function turn(fromPoint, complete) { turn: function turn(fromPoint, complete) {
var _this4 = this; var _this6 = this;
var width = this.width, var width = this.width,
height = this.height; height = this.height;
this.runAnimation = turnPage(fromPoint, 600, width, height, function (point) { this.runAnimation = turnPage(fromPoint, 600, width, height, function (point) {
_this4.updateTurn(fold(point, width, height)); _this6.updateTurn(fold(point, width, height));
}, function () { }, function () {
complete(); complete();
_this4.action = null; _this6.action = null;
_this4.turnPage = null; _this6.turnPage = null;
_this4.backPage = _this4.viewIndex; _this6.backPage = _this6.viewIndex;
_this4.updateTurn(); _this6.updateTurn();
_this4.runAnimation = null; _this6.runAnimation = null;
}); });
}, },
hideFolded: function hideFolded(fromPoint, complete) { hideFolded: function hideFolded(fromPoint, complete) {
var _this5 = this; var _this7 = this;
var width = this.width, var width = this.width,
height = this.height; height = this.height;
this.runAnimation = hideFoldedPage(fromPoint, width, height, function (point) { this.runAnimation = hideFoldedPage(fromPoint, width, height, function (point) {
_this5.updateTurn(fold(point, width, height)); _this7.updateTurn(fold(point, width, height));
}, function () { }, function () {
complete(); complete();
_this5.action = null; _this7.action = null;
_this5.turnPage = null; _this7.turnPage = null;
_this5.backPage = _this5.viewIndex; _this7.backPage = _this7.viewIndex;
_this5.updateTurn(); _this7.updateTurn();
_this5.turnActive = false; _this7.turnActive = false;
_this5.runAnimation = null; _this7.runAnimation = null;
}); });
}, },
handleCoverTouchStart: function handleCoverTouchStart(e) { handleCoverTouchStart: function handleCoverTouchStart(e) {
@ -2297,11 +2316,20 @@ var render = function() {
) )
]), ]),
_vm._v(" "), _vm._v(" "),
_c("div", { staticClass: "manual-page" }, [ _c(
"div",
{ staticClass: "manual-page" },
[
_c("div", { staticClass: "page-photo" }, [ _c("div", { staticClass: "page-photo" }, [
_c("img", { attrs: { src: _vm.item.picture_image } }) _c("img", {
]) attrs: { src: _vm.item.picture_image }
]) })
]),
_vm._v(" "),
_vm._t("default")
],
2
)
]) ])
]), ]),
_vm._v(" "), _vm._v(" "),
@ -2369,11 +2397,18 @@ var render = function() {
_vm._v(_vm._s(_vm.index + 1) + " / " + _vm._s(_vm.length)) _vm._v(_vm._s(_vm.index + 1) + " / " + _vm._s(_vm.length))
]), ]),
_vm._v(" "), _vm._v(" "),
_c("div", { staticClass: "manual-page" }, [ _c(
"div",
{ staticClass: "manual-page" },
[
_c("div", { staticClass: "page-photo" }, [ _c("div", { staticClass: "page-photo" }, [
_c("img", { attrs: { src: _vm.item.picture_image } }) _c("img", { attrs: { src: _vm.item.picture_image } })
]) ]),
]) _vm._v(" "),
_vm._t("default")
],
2
)
]) ])
] ]
) )

2
dist/flip.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "vue-flip-page", "name": "vue-flip-page",
"version": "1.0.3", "version": "1.0.5",
"description": "vue翻页效果插件", "description": "vue翻页效果插件",
"main": "dist/flip.min.js", "main": "dist/flip.min.js",
"scripts": { "scripts": {

99
src/turn_controller.js
View File

@ -3,6 +3,21 @@ import TurnPage from "./turn_page.vue";
const PI = Math.PI; const PI = Math.PI;
const A90 = PI / 2; const A90 = PI / 2;
//判断微信下ios和安卓 ios为1 安卓为2 其他3
function getPhoneEnv() {
var u = navigator.userAgent,
app = navigator.appVersion;
var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //g
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isAndroid) {
return "2";
} else if (isIOS) {
return "1";
} else {
return "3";
}
}
function bezier(p1, p2, p3, p4, t) { function bezier(p1, p2, p3, p4, t) {
const a = 1 - t; const a = 1 - t;
const b = a * a * a; const b = a * a * a;
@ -11,7 +26,7 @@ function bezier(p1, p2, p3, p4, t) {
} }
function point2D(x, y) { function point2D(x, y) {
return { x, y }; return {x, y};
} }
function peelingPoint(a, b, c) { function peelingPoint(a, b, c) {
@ -91,7 +106,7 @@ function fold(point, width, height, startPoint) {
let df = point2D(0, 0); let df = point2D(0, 0);
let tr = point2D(0, 0); let tr = point2D(0, 0);
const B = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2), 2); const B = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2), 2);
const compute = function() { const compute = function () {
c = _startPoint(point.corner, width, height); c = _startPoint(point.corner, width, height);
const k = width - c.x - point.x; const k = width - c.x - point.x;
const l = c.y - point.y; const l = c.y - point.y;
@ -148,7 +163,7 @@ function fold(point, width, height, startPoint) {
tr.y = Math.round(tr.y); tr.y = Math.round(tr.y);
return true; return true;
}; };
const transform = function(tr, c, x, a) { const transform = function (tr, c, x, a) {
const l = ["0", "auto"]; const l = ["0", "auto"];
const mvW = (width - B) * x[0] / 100; const mvW = (width - B) * x[0] / 100;
const mvH = (height - B) * x[1] / 100; const mvH = (height - B) * x[1] / 100;
@ -162,8 +177,8 @@ function fold(point, width, height, startPoint) {
const origin = x[0] + "% " + x[1] + "%"; const origin = x[0] + "% " + x[1] + "%";
const styles = []; const styles = [];
styles.push({ ...cssA, ..._transform(_rotate(a) + _translate(tr.x + aliasingFk, tr.y), origin) }); styles.push({...cssA, ..._transform(_rotate(a) + _translate(tr.x + aliasingFk, tr.y), origin)});
styles.push({ ...cssA, ..._transform(_rotate(a) + _translate(tr.x + df.x - mv.x - width * x[0] / 100, tr.y + df.y - mv.y - height * x[1] / 100) + _rotate(Math.round(100 * (180 / a - 2) * a) / 100), origin) }); styles.push({...cssA, ..._transform(_rotate(a) + _translate(tr.x + df.x - mv.x - width * x[0] / 100, tr.y + df.y - mv.y - height * x[1] / 100) + _rotate(Math.round(100 * (180 / a - 2) * a) / 100), origin)});
styles.push(_transform(_translate(-tr.x + mvW - aliasingFk, -tr.y + mvH) + _rotate(-a), origin)); styles.push(_transform(_translate(-tr.x + mvW - aliasingFk, -tr.y + mvH) + _rotate(-a), origin));
styles.push(_transform(_translate(width - tr.x + mv.x + mvW, -tr.y + mv.y + mvH) + _rotate(-a), origin)); styles.push(_transform(_translate(width - tr.x + mv.x + mvW, -tr.y + mv.y + mvH) + _rotate(-a), origin));
@ -193,7 +208,7 @@ function fold(point, width, height, startPoint) {
} }
let E = Math.max(0.5, 2 - far); let E = Math.max(0.5, 2 - far);
if (E > 1) E = E >= 1.7 ? (2 - E) / 0.3 : 1; if (E > 1) E = E >= 1.7 ? (2 - E) / 0.3 : 1;
styles.push({ opacity: Math.round(100 * E) / 100, ..._transform(_translate(D, 0) + _rotate(C) + _scale(gradientSize / 100, 1), z) }); styles.push({opacity: Math.round(100 * E) / 100, ..._transform(_translate(D, 0) + _rotate(C) + _scale(gradientSize / 100, 1), z)});
if (d) { if (d) {
if (e) { if (e) {
C = -270 - a; C = -270 - a;
@ -218,7 +233,7 @@ function fold(point, width, height, startPoint) {
} }
} }
E = far < 0.3 ? far / 0.3 : 1; E = far < 0.3 ? far / 0.3 : 1;
styles.push({ opacity: Math.round(100 * E) / 100, ..._transform(_translate(D, 0) + _rotate(C) + _scale(-h / 100, 1), z) }); styles.push({opacity: Math.round(100 * E) / 100, ..._transform(_translate(D, 0) + _rotate(C) + _scale(-h / 100, 1), z)});
return styles; return styles;
}; };
@ -307,7 +322,7 @@ function animatef(point) {
const len = point.to.length; const len = point.to.length;
const time = Date.now(); const time = Date.now();
const frame = function() { const frame = function () {
const v = []; const v = [];
const timeDiff = Math.min(point.duration, Date.now() - time); const timeDiff = Math.min(point.duration, Date.now() - time);
@ -324,7 +339,7 @@ function animatef(point) {
for (let i = 0; i < len; i++) diff.push(point.to[i] - point.from[i]); for (let i = 0; i < len; i++) diff.push(point.to[i] - point.from[i]);
const easing = function(x, t, b, c, data) { const easing = function (x, t, b, c, data) {
return c * Math.sqrt(1 - (t = t / data - 1) * t) + b; return c * Math.sqrt(1 - (t = t / data - 1) * t) + b;
}; };
@ -345,11 +360,11 @@ function turnPage(p1, duration, width, height, frame, complete) {
return animatef({ return animatef({
from: 0, from: 0,
to: 1, to: 1,
frame: function(v) { frame: function (v) {
const np = bezier(p1, p1, p4, p4, v); const np = bezier(p1, p1, p4, p4, v);
frame({ x: np.x, y: np.y, corner: p1.corner }); frame({x: np.x, y: np.y, corner: p1.corner});
}, },
complete: function() { complete: function () {
complete(); complete();
}, },
duration: duration duration: duration
@ -365,11 +380,11 @@ function hideFoldedPage(p1, width, height, frame, complete) {
return animatef({ return animatef({
from: 0, from: 0,
to: 1, to: 1,
frame: function(v) { frame: function (v) {
const np = bezier(p1, p2, p3, p4, v); const np = bezier(p1, p2, p3, p4, v);
frame({ x: np.x, y: np.y, corner: p1.corner }); frame({x: np.x, y: np.y, corner: p1.corner});
}, },
complete: function() { complete: function () {
complete(); complete();
}, },
duration: 600 duration: 600
@ -383,19 +398,19 @@ function showFoldedPage(to, width, height, frame, complete) {
from: [point.x, point.y], from: [point.x, point.y],
to: [to.x, to.y], to: [to.x, to.y],
duration: 300, duration: 300,
frame: function(v) { frame: function (v) {
const x = Math.round(v[0]); const x = Math.round(v[0]);
const y = Math.round(v[1]); const y = Math.round(v[1]);
frame({ x, y, corner: to.corner }); frame({x, y, corner: to.corner});
}, },
complete: function() { complete: function () {
complete(); complete();
} }
}); });
} }
export default { export default {
components: { TurnPage }, components: {TurnPage},
props: { props: {
data: Array, data: Array,
width: { width: {
@ -426,6 +441,14 @@ export default {
}; };
}, },
mounted() { mounted() {
this.$nextTick(() => {
this.TouchMove();
});
},
destroyed() {
this.$nextTick(() => {
this.TouchMoveOut();
});
}, },
activated() { activated() {
this.$nextTick(() => { this.$nextTick(() => {
@ -439,7 +462,7 @@ export default {
}, },
methods: { methods: {
TouchMove() { TouchMove() {
if (this.fun.getPhoneEnv() == 3) { if (getPhoneEnv() == 3) {
this.$refs.turn.addEventListener("mousemove", this.handleManualTouchMove, false); this.$refs.turn.addEventListener("mousemove", this.handleManualTouchMove, false);
this.$refs.turn.addEventListener("mousedown", this.handleManualTouchStart, false); this.$refs.turn.addEventListener("mousedown", this.handleManualTouchStart, false);
this.$refs.turn.addEventListener("mouseup", this.handleManualTouchEnd, false); this.$refs.turn.addEventListener("mouseup", this.handleManualTouchEnd, false);
@ -450,7 +473,7 @@ export default {
} }
}, },
TouchMoveOut() { TouchMoveOut() {
if (this.fun.getPhoneEnv() == 3) { if (getPhoneEnv() == 3) {
this.$refs.turn.removeEventListener("mousemove", this.handleManualTouchMove, false); this.$refs.turn.removeEventListener("mousemove", this.handleManualTouchMove, false);
this.$refs.turn.removeEventListener("mousedown", this.handleManualTouchStart, false); this.$refs.turn.removeEventListener("mousedown", this.handleManualTouchStart, false);
this.$refs.turn.removeEventListener("mouseup", this.handleManualTouchEnd, false); this.$refs.turn.removeEventListener("mouseup", this.handleManualTouchEnd, false);
@ -469,7 +492,7 @@ export default {
this.updateTurn(); this.updateTurn();
} }
const { width, height, viewIndex } = this; const {width, height, viewIndex} = this;
if (this.fun.getPhoneEnv() == 3) { if (this.fun.getPhoneEnv() == 3) {
x = e.clientX - (window.innerWidth - width) / 2; x = e.clientX - (window.innerWidth - width) / 2;
y = e.clientY - (window.innerHeight - height) / 2; y = e.clientY - (window.innerHeight - height) / 2;
@ -479,7 +502,7 @@ export default {
} }
this.startPoint = peelingPoint("r", x, y); this.startPoint = peelingPoint("r", x, y);
this.touchTimeline = [{ t: Date.now(), x }]; this.touchTimeline = [{t: Date.now(), x}];
if (x < width / 2) { if (x < width / 2) {
this.action = "backward"; this.action = "backward";
@ -505,7 +528,7 @@ export default {
let x = ""; let x = "";
let y = ""; let y = "";
if (this.isStart) { if (this.isStart) {
const { width, height } = this; const {width, height} = this;
if (this.fun.getPhoneEnv() == 3) { if (this.fun.getPhoneEnv() == 3) {
x = e.clientX - (window.innerWidth - width) / 2; x = e.clientX - (window.innerWidth - width) / 2;
y = e.clientY - (window.innerHeight - height) / 2; y = e.clientY - (window.innerHeight - height) / 2;
@ -518,7 +541,7 @@ export default {
if (this.action === "forward" && this.startPoint.x < x) return; if (this.action === "forward" && this.startPoint.x < x) return;
if (this.action === "backward" && this.startPoint.x > x) return; if (this.action === "backward" && this.startPoint.x > x) return;
this.touchTimeline.push({ t: Date.now(), x }); this.touchTimeline.push({t: Date.now(), x});
const point = peelingPoint(corner, x, y); const point = peelingPoint(corner, x, y);
if (this.invalidTouch) return; if (this.invalidTouch) return;
@ -549,11 +572,11 @@ export default {
if (this.invalidTouch) { if (this.invalidTouch) {
if (action === "forward" && this.isSwipe(action)) { if (action === "forward" && this.isSwipe(action)) {
// this.showLastCoverPage = true // this.showLastCoverPage = true
this.$emit("next", { to: this.viewIndex + 1, from: this.viewIndex }); this.$emit("next", {to: this.viewIndex + 1, from: this.viewIndex});
} }
if (action === "backward" && this.isSwipe(action)) { if (action === "backward" && this.isSwipe(action)) {
this.$emit("prev", { to: this.viewIndex - 1, from: this.viewIndex }); this.$emit("prev", {to: this.viewIndex - 1, from: this.viewIndex});
} }
} else { } else {
if (action === "forward") { if (action === "forward") {
@ -579,7 +602,7 @@ export default {
this.touchTimeline = []; this.touchTimeline = [];
}, },
handleManualTaped() { handleManualTaped() {
const { width } = this; const {width} = this;
const x = this.touchTimeline[0].x; const x = this.touchTimeline[0].x;
this.action = null; this.action = null;
@ -589,8 +612,8 @@ export default {
this.$emit("tap"); this.$emit("tap");
}, },
readyTurn() { readyTurn() {
const { width, height } = this; const {width, height} = this;
const point = this.action === "forward" ? { x: width, y: 0 } : { x: -width, y: 0 }; const point = this.action === "forward" ? {x: width, y: 0} : {x: -width, y: 0};
const fromPoint = peelingPoint("tr", point.x, point.y); const fromPoint = peelingPoint("tr", point.x, point.y);
// console.log(fromPoint,"fromPoint"); // console.log(fromPoint,"fromPoint");
this.updateTurn(fold(fromPoint, width, height)); this.updateTurn(fold(fromPoint, width, height));
@ -612,8 +635,8 @@ export default {
toPage(toPage, startPoint) { toPage(toPage, startPoint) {
const fromPage = this.viewIndex; const fromPage = this.viewIndex;
if (toPage > fromPage) this.$emit("next", { to: toPage, from: fromPage }); if (toPage > fromPage) this.$emit("next", {to: toPage, from: fromPage});
if (toPage < fromPage) this.$emit("prev", { to: toPage, from: fromPage }); if (toPage < fromPage) this.$emit("prev", {to: toPage, from: fromPage});
if (toPage === fromPage || toPage < 0 || toPage > this.data.length - 1) return; if (toPage === fromPage || toPage < 0 || toPage > this.data.length - 1) return;
@ -621,8 +644,8 @@ export default {
this.runAnimation.stop(); this.runAnimation.stop();
} }
const { width, height } = this; const {width, height} = this;
const point = toPage > fromPage ? { x: width, y: height - 45 } : { x: -width, y: 45 }; const point = toPage > fromPage ? {x: width, y: height - 45} : {x: -width, y: 45};
const fromPoint = peelingPoint("br", point.x, point.y); const fromPoint = peelingPoint("br", point.x, point.y);
if (toPage > fromPage) { if (toPage > fromPage) {
@ -663,7 +686,7 @@ export default {
this.$emit("turning", this.backPage); this.$emit("turning", this.backPage);
}, },
turn(fromPoint, complete) { turn(fromPoint, complete) {
const { width, height } = this; const {width, height} = this;
this.runAnimation = turnPage(fromPoint, 600, width, height, point => { this.runAnimation = turnPage(fromPoint, 600, width, height, point => {
this.updateTurn(fold(point, width, height)); this.updateTurn(fold(point, width, height));
}, () => { }, () => {
@ -676,7 +699,7 @@ export default {
}); });
}, },
hideFolded(fromPoint, complete) { hideFolded(fromPoint, complete) {
const { width, height } = this; const {width, height} = this;
this.runAnimation = hideFoldedPage(fromPoint, width, height, point => { this.runAnimation = hideFoldedPage(fromPoint, width, height, point => {
this.updateTurn(fold(point, width, height)); this.updateTurn(fold(point, width, height));
}, () => { }, () => {
@ -691,11 +714,11 @@ export default {
}, },
handleCoverTouchStart(e) { handleCoverTouchStart(e) {
const x = e.touches[0].clientX; const x = e.touches[0].clientX;
this.touchTimeline = [{ t: Date.now(), x }]; this.touchTimeline = [{t: Date.now(), x}];
}, },
handleCoverTouchMove(e) { handleCoverTouchMove(e) {
const x = e.touches[0].clientX; const x = e.touches[0].clientX;
this.touchTimeline.push({ t: Date.now(), x }); this.touchTimeline.push({t: Date.now(), x});
}, },
handleCoverTouchEnd(e) { handleCoverTouchEnd(e) {
const first = this.touchTimeline[0]; const first = this.touchTimeline[0];

33
src/turn_page.vue
View File

@ -2,7 +2,8 @@
<div class="turn-wraper" <div class="turn-wraper"
:style="{width: width+'px', height: height+'px', overflow: active ? 'visible' : 'hidden', zIndex: length - index}"> :style="{width: width+'px', height: height+'px', overflow: active ? 'visible' : 'hidden', zIndex: length - index}">
<div class="turn-page-left" :style="{left: '-'+width+'px'}"> <div class="turn-page-left" :style="{left: '-'+width+'px'}">
<div class="turn-page-left-clip" :style="(Object.assign({}, {width: clipSize+'px', height: clipSize+'px'}, styles[3]))"> <div class="turn-page-left-clip"
:style="(Object.assign({}, {width: clipSize+'px', height: clipSize+'px'}, styles[3]))">
<div class="turn-page-left-content" <div class="turn-page-left-content"
:style="(Object.assign({}, {width: width+'px', height: height+'px'}, styles[1]))"> :style="(Object.assign({}, {width: width+'px', height: height+'px'}, styles[1]))">
<div class="turn-page-left-inner"> <div class="turn-page-left-inner">
@ -12,40 +13,30 @@
<div class="page-photo"> <div class="page-photo">
<img :src="item.picture_image"> <img :src="item.picture_image">
</div> </div>
<!--<div class="page-content page-content-type-1">--> <slot></slot>
<!--<div class="desc"><h4 class="name">-->
<!--小程序组件小程序组件小程序组件小程序组件小程序组件小程序组件</h4>-->
<!--<div class="price">¥19800</div> &lt;!&ndash;&ndash;&gt; &lt;!&ndash;&ndash;&gt;</div>-->
<!--<div class="buy-button">-->
<!--<button type="button">查看详情</button>-->
<!--</div>-->
<!--</div>-->
</div> </div>
</div> </div>
</div> </div>
<div class="turn-page-left-gradient" :style="(Object.assign({}, {top: ('-' + (height / 2)+'px'), height: (height* 2)+'px'}, styles[4]))"></div> <div class="turn-page-left-gradient"
:style="(Object.assign({}, {top: ('-' + (height / 2)+'px'), height: (height* 2)+'px'}, styles[4]))"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="turn-page-right" :style="{width: width+'px', height: height+'px'}"> <div class="turn-page-right" :style="{width: width+'px', height: height+'px'}">
<div class="turn-page-right-gradient" :style="(Object.assign({}, {top: ('-' + (height / 2)+'px'), height: (height* 2)+'px'}, styles[5]))"></div> <div class="turn-page-right-gradient"
:style="(Object.assign({}, {top: ('-' + (height / 2)+'px'), height: (height* 2)+'px'}, styles[5]))"></div>
<div class="turn-page-right-clip" :style="(Object.assign({}, {width: clipSize+'px', height: clipSize+'px'}, styles[2]))"> <div class="turn-page-right-clip"
<div class="turn-page-right-content" :style="(Object.assign({}, {width: width+'px', height: height+'px'}, styles[0]))"> :style="(Object.assign({}, {width: clipSize+'px', height: clipSize+'px'}, styles[2]))">
<div class="turn-page-right-content"
:style="(Object.assign({}, {width: width+'px', height: height+'px'}, styles[0]))">
<div class="manual-item"> <div class="manual-item">
<div class="page-count">{{index + 1}} / {{length}}</div> <div class="page-count">{{index + 1}} / {{length}}</div>
<div class="manual-page"> <div class="manual-page">
<div class="page-photo"> <div class="page-photo">
<img :src="item.picture_image"> <img :src="item.picture_image">
</div> </div>
<!--<div class="page-content page-content-type-1">--> <slot></slot>
<!--<div class="desc"><h4 class="name">-->
<!--小程序组件小程序组件小程序组件小程序组件小程序组件小程序组件</h4>-->
<!--<div class="price">¥19800</div> &lt;!&ndash;&ndash;&gt; &lt;!&ndash;&ndash;&gt;</div>-->
<!--<div class="buy-button">-->
<!--<button type="button">查看详情</button>-->
<!--</div>-->
<!--</div>-->
</div> </div>
</div> </div>
</div> </div>