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": {

27
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;
@ -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);

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>