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 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) {
var a = 1 - t;
var b = a * a * a;
@ -1302,25 +1308,38 @@ exports.default = {
isStart: false
};
},
mounted: function mounted() {},
activated: function activated() {
mounted: function mounted() {
var _this = this;
this.$nextTick(function () {
_this.TouchMove();
});
},
deactivated: function deactivated() {
destroyed: function destroyed() {
var _this2 = this;
this.$nextTick(function () {
_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: {
TouchMove: function TouchMove() {
if (this.fun.getPhoneEnv() == 3) {
if (getPhoneEnv() == 3) {
this.$refs.turn.addEventListener("mousemove", this.handleManualTouchMove, false);
this.$refs.turn.addEventListener("mousedown", this.handleManualTouchStart, false);
this.$refs.turn.addEventListener("mouseup", this.handleManualTouchEnd, false);
@ -1331,7 +1350,7 @@ exports.default = {
}
},
TouchMoveOut: function TouchMoveOut() {
if (this.fun.getPhoneEnv() == 3) {
if (getPhoneEnv() == 3) {
this.$refs.turn.removeEventListener("mousemove", this.handleManualTouchMove, false);
this.$refs.turn.removeEventListener("mousedown", this.handleManualTouchStart, false);
this.$refs.turn.removeEventListener("mouseup", this.handleManualTouchEnd, false);
@ -1498,7 +1517,7 @@ exports.default = {
return false;
},
toPage: function toPage(_toPage, startPoint) {
var _this3 = this;
var _this5 = this;
var fromPage = this.viewIndex;
@ -1526,13 +1545,13 @@ exports.default = {
}
this.turn(startPoint || fromPoint, function () {
_this3.viewIndex = _toPage;
_this3.turnPage = null;
_this3.backPage = _toPage;
_this5.viewIndex = _toPage;
_this5.turnPage = null;
_this5.backPage = _toPage;
// console.log('完成翻页，当前页', this.backPage)
_this3.updateTurn();
_this3.turnActive = false;
_this3.$emit("change", _this3.backPage);
_this5.updateTurn();
_this5.turnActive = false;
_this5.$emit("change", _this5.backPage);
});
} else {
if (!this.action) {
@ -1542,51 +1561,51 @@ exports.default = {
}
this.hideFolded(startPoint || fromPoint, function () {
_this3.viewIndex = _toPage;
_this3.turnPage = null;
_this3.backPage = _toPage;
_this5.viewIndex = _toPage;
_this5.turnPage = null;
_this5.backPage = _toPage;
// console.log('完成翻页，当前页', this.backPage)
_this3.updateTurn();
_this3.turnActive = false;
_this3.$emit("change", _this3.backPage);
_this5.updateTurn();
_this5.turnActive = false;
_this5.$emit("change", _this5.backPage);
});
}
// console.log('this.turnActive', this.turnPage, this.turnActive)
this.$emit("turning", this.backPage);
},
turn: function turn(fromPoint, complete) {
var _this4 = this;
var _this6 = this;
var width = this.width,
height = this.height;
this.runAnimation = turnPage(fromPoint, 600, width, height, function (point) {
_this4.updateTurn(fold(point, width, height));
_this6.updateTurn(fold(point, width, height));
}, function () {
complete();
_this4.action = null;
_this4.turnPage = null;
_this4.backPage = _this4.viewIndex;
_this4.updateTurn();
_this4.runAnimation = null;
_this6.action = null;
_this6.turnPage = null;
_this6.backPage = _this6.viewIndex;
_this6.updateTurn();
_this6.runAnimation = null;
});
},
hideFolded: function hideFolded(fromPoint, complete) {
var _this5 = this;
var _this7 = this;
var width = this.width,
height = this.height;
this.runAnimation = hideFoldedPage(fromPoint, width, height, function (point) {
_this5.updateTurn(fold(point, width, height));
_this7.updateTurn(fold(point, width, height));
}, function () {
complete();
_this5.action = null;
_this5.turnPage = null;
_this5.backPage = _this5.viewIndex;
_this5.updateTurn();
_this5.turnActive = false;
_this5.runAnimation = null;
_this7.action = null;
_this7.turnPage = null;
_this7.backPage = _this7.viewIndex;
_this7.updateTurn();
_this7.turnActive = false;
_this7.runAnimation = null;
});
},
handleCoverTouchStart: function handleCoverTouchStart(e) {
@ -2297,11 +2316,20 @@ var render = function() {
)
]),
_vm._v(" "),
_c("div", { staticClass: "manual-page" }, [
_c(
"div",
{ staticClass: "manual-page" },
[
_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(" "),
@ -2369,11 +2397,18 @@ var render = function() {
_vm._v(_vm._s(_vm.index + 1) + " / " + _vm._s(_vm.length))
]),
_vm._v(" "),
_c("div", { staticClass: "manual-page" }, [
_c(
"div",
{ staticClass: "manual-page" },
[
_c("div", { staticClass: "page-photo" }, [
_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",
"version": "1.0.3",
"version": "1.0.5",
"description": "vue翻页效果插件",
"main": "dist/flip.min.js",
"scripts": {

99
src/turn_controller.js
View File

@ -3,6 +3,21 @@ import TurnPage from "./turn_page.vue";
const PI = Math.PI;
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) {
const a = 1 - t;
const b = a * a * a;
@ -11,7 +26,7 @@ function bezier(p1, p2, p3, p4, t) {
}
function point2D(x, y) {
return { x, y };
return {x, y};
}
function peelingPoint(a, b, c) {
@ -91,7 +106,7 @@ function fold(point, width, height, startPoint) {
let df = point2D(0, 0);
let tr = point2D(0, 0);
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);
const k = width - c.x - point.x;
const l = c.y - point.y;
@ -148,7 +163,7 @@ function fold(point, width, height, startPoint) {
tr.y = Math.round(tr.y);
return true;
};
const transform = function(tr, c, x, a) {
const transform = function (tr, c, x, a) {
const l = ["0", "auto"];
const mvW = (width - B) * x[0] / 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 styles = [];
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 + 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(_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));
@ -193,7 +208,7 @@ function fold(point, width, height, startPoint) {
}
let E = Math.max(0.5, 2 - far);
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 (e) {
C = -270 - a;
@ -218,7 +233,7 @@ function fold(point, width, height, startPoint) {
}
}
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;
};
@ -307,7 +322,7 @@ function animatef(point) {
const len = point.to.length;
const time = Date.now();
const frame = function() {
const frame = function () {
const v = [];
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]);
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;
};
@ -345,11 +360,11 @@ function turnPage(p1, duration, width, height, frame, complete) {
return animatef({
from: 0,
to: 1,
frame: function(v) {
frame: function (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();
},
duration: duration
@ -365,11 +380,11 @@ function hideFoldedPage(p1, width, height, frame, complete) {
return animatef({
from: 0,
to: 1,
frame: function(v) {
frame: function (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();
},
duration: 600
@ -383,19 +398,19 @@ function showFoldedPage(to, width, height, frame, complete) {
from: [point.x, point.y],
to: [to.x, to.y],
duration: 300,
frame: function(v) {
frame: function (v) {
const x = Math.round(v[0]);
const y = Math.round(v[1]);
frame({ x, y, corner: to.corner });
frame({x, y, corner: to.corner});
},
complete: function() {
complete: function () {
complete();
}
});
}
export default {
components: { TurnPage },
components: {TurnPage},
props: {
data: Array,
width: {
@ -426,6 +441,14 @@ export default {
};
},
mounted() {
this.$nextTick(() => {
this.TouchMove();
});
},
destroyed() {
this.$nextTick(() => {
this.TouchMoveOut();
});
},
activated() {
this.$nextTick(() => {
@ -439,7 +462,7 @@ export default {
},
methods: {
TouchMove() {
if (this.fun.getPhoneEnv() == 3) {
if (getPhoneEnv() == 3) {
this.$refs.turn.addEventListener("mousemove", this.handleManualTouchMove, false);
this.$refs.turn.addEventListener("mousedown", this.handleManualTouchStart, false);
this.$refs.turn.addEventListener("mouseup", this.handleManualTouchEnd, false);
@ -450,7 +473,7 @@ export default {
}
},
TouchMoveOut() {
if (this.fun.getPhoneEnv() == 3) {
if (getPhoneEnv() == 3) {
this.$refs.turn.removeEventListener("mousemove", this.handleManualTouchMove, false);
this.$refs.turn.removeEventListener("mousedown", this.handleManualTouchStart, false);
this.$refs.turn.removeEventListener("mouseup", this.handleManualTouchEnd, false);
@ -469,7 +492,7 @@ export default {
this.updateTurn();
}
const { width, height, viewIndex } = this;
const {width, height, viewIndex} = this;
if (this.fun.getPhoneEnv() == 3) {
x = e.clientX - (window.innerWidth - width) / 2;
y = e.clientY - (window.innerHeight - height) / 2;
@ -479,7 +502,7 @@ export default {
}
this.startPoint = peelingPoint("r", x, y);
this.touchTimeline = [{ t: Date.now(), x }];
this.touchTimeline = [{t: Date.now(), x}];
if (x < width / 2) {
this.action = "backward";
@ -505,7 +528,7 @@ export default {
let x = "";
let y = "";
if (this.isStart) {
const { width, height } = this;
const {width, height} = this;
if (this.fun.getPhoneEnv() == 3) {
x = e.clientX - (window.innerWidth - width) / 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 === "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);
if (this.invalidTouch) return;
@ -549,11 +572,11 @@ export default {
if (this.invalidTouch) {
if (action === "forward" && this.isSwipe(action)) {
// 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)) {
this.$emit("prev", { to: this.viewIndex - 1, from: this.viewIndex });
this.$emit("prev", {to: this.viewIndex - 1, from: this.viewIndex});
}
} else {
if (action === "forward") {
@ -579,7 +602,7 @@ export default {
this.touchTimeline = [];
},
handleManualTaped() {
const { width } = this;
const {width} = this;
const x = this.touchTimeline[0].x;
this.action = null;
@ -589,8 +612,8 @@ export default {
this.$emit("tap");
},
readyTurn() {
const { width, height } = this;
const point = this.action === "forward" ? { x: width, y: 0 } : { x: -width, y: 0 };
const {width, height} = this;
const point = this.action === "forward" ? {x: width, y: 0} : {x: -width, y: 0};
const fromPoint = peelingPoint("tr", point.x, point.y);
// console.log(fromPoint,"fromPoint");
this.updateTurn(fold(fromPoint, width, height));
@ -612,8 +635,8 @@ export default {
toPage(toPage, startPoint) {
const fromPage = this.viewIndex;
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("next", {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;
@ -621,8 +644,8 @@ export default {
this.runAnimation.stop();
}
const { width, height } = this;
const point = toPage > fromPage ? { x: width, y: height - 45 } : { x: -width, y: 45 };
const {width, height} = this;
const point = toPage > fromPage ? {x: width, y: height - 45} : {x: -width, y: 45};
const fromPoint = peelingPoint("br", point.x, point.y);
if (toPage > fromPage) {
@ -663,7 +686,7 @@ export default {
this.$emit("turning", this.backPage);
},
turn(fromPoint, complete) {
const { width, height } = this;
const {width, height} = this;
this.runAnimation = turnPage(fromPoint, 600, width, height, point => {
this.updateTurn(fold(point, width, height));
}, () => {
@ -676,7 +699,7 @@ export default {
});
},
hideFolded(fromPoint, complete) {
const { width, height } = this;
const {width, height} = this;
this.runAnimation = hideFoldedPage(fromPoint, width, height, point => {
this.updateTurn(fold(point, width, height));
}, () => {
@ -691,11 +714,11 @@ export default {
},
handleCoverTouchStart(e) {
const x = e.touches[0].clientX;
this.touchTimeline = [{ t: Date.now(), x }];
this.touchTimeline = [{t: Date.now(), x}];
},
handleCoverTouchMove(e) {
const x = e.touches[0].clientX;
this.touchTimeline.push({ t: Date.now(), x });
this.touchTimeline.push({t: Date.now(), x});
},
handleCoverTouchEnd(e) {
const first = this.touchTimeline[0];

33
src/turn_page.vue
View File

@ -2,7 +2,8 @@
<div class="turn-wraper"
: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-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"
:style="(Object.assign({}, {width: width+'px', height: height+'px'}, styles[1]))">
<div class="turn-page-left-inner">
@ -12,40 +13,30 @@
<div class="page-photo">
<img :src="item.picture_image">
</div>
<!--<div class="page-content page-content-type-1">-->
<!--<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>-->
<slot></slot>
</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 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-content" :style="(Object.assign({}, {width: width+'px', height: height+'px'}, styles[0]))">
<div class="turn-page-right-clip"
: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="page-count">{{index + 1}} / {{length}}</div>
<div class="manual-page">
<div class="page-photo">
<img :src="item.picture_image">
</div>
<!--<div class="page-content page-content-type-1">-->
<!--<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>-->
<slot></slot>
</div>
</div>
</div>