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

1415
dist/flip.min.js vendored
View File

File diff suppressed because it is too large Load Diff

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

1239
src/turn_controller.js
View File

File diff suppressed because it is too large Load Diff

57
src/turn_page.vue
View File

@ -2,50 +2,41 @@
<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">
<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>
<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="manual-item"> <div class="turn-page-right-content"
<div class="page-count">{{index + 1}} / {{length}}</div> :style="(Object.assign({}, {width: width+'px', height: height+'px'}, styles[0]))">
<div class="manual-page"> <div class="manual-item">
<div class="page-photo"> <div class="page-count">{{index + 1}} / {{length}}</div>
<img :src="item.picture_image"> <div class="manual-page">
<div class="page-photo">
<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>
@ -55,9 +46,9 @@
</template> </template>
<script> <script>
import turn_page_controller from "./turn_page_controller"; import turn_page_controller from "./turn_page_controller";
export default turn_page_controller; export default turn_page_controller;
</script> </script>
<style lang="scss" rel="stylesheet/scss" scoped> <style lang="scss" rel="stylesheet/scss" scoped>

68
src/turn_page_controller.js
View File

@ -1,36 +1,36 @@
export default { export default {
props: { props: {
item: Object, item: Object,
index: Number, index: Number,
width: { width: {
type: Number, type: Number,
default: 0 default: 0
}, },
height: { height: {
type: Number, type: Number,
default: 0 default: 0
}, },
length: { length: {
type: Number, type: Number,
default: 0 default: 0
}, },
active: { // 翻动效果生效 active: { // 翻动效果生效
type: Boolean, type: Boolean,
default: false default: false
}, },
styles: { styles: {
type: Array, type: Array,
default: () => [{}, {}, {}, {}, {}, {}] default: () => [{}, {}, {}, {}, {}, {}]
} }
}, },
data() { data() {
return {}; return {};
}, },
mounted() { mounted() {
}, },
computed: { computed: {
clipSize() { clipSize() {
return Math.sqrt(Math.pow(this.width, 2) + Math.pow(this.height, 2), 2); return Math.sqrt(Math.pow(this.width, 2) + Math.pow(this.height, 2), 2);
} }
} }
}; };