更新记录

1.0.0（2022-05-16）

如果想使用在非h5端（如：小程序，app...）可以用web-view。

平台兼容性

依赖新增

yarn add jquery

yarn add vue-touchjs 

主要文件

main.js:
import '<path>/common/turn.js';

import VueTouch from 'vue-touchjs';
Vue.use(VueTouch,{name:'v-touch'});

app.vue:

* { touch-action: pan-y; }

组件使用：

• 注意：pageFlip里的每一个块级元素就是一页 *

获取动态当前页码_(function): dynamicPageNumber();

例子：
<template>
    <view>
        <pageFlip @dynamicPageNumber='dynamicPageNumber'>
            <view class="magazine-page">
                <image src="../../static/1.jpg"></image>
            </view>
            <view class="magazine-page">
                <image src="../../static/2.jpg"></image>
            </view>
            <view class="magazine-page">
                <image src="../../static/3.jpg"></image>
            </view>
            <view class="magazine-page">
                <image src="../../static/4.jpg"></image>
            </view>
        </pageFlip>
    </view>
</template>
<script>
// #ifdef H5 
import pageFlip from '《path》/page-flip/component/page-flip.vue';
export default{
    components:{pageFlip},
    data(){
        return {
            page: 1,
        }
    },
    methods:{
        dynamicPageNumber(pageNumber){
            this.page = pageNumber;
        }
    },
    watch:{
        page(oldPage, newPage){
            console.log(oldPage, ' to ', newPage); // 当前页码与上一次的页码，可用触发相对应的事件
        }
    }
}
// #endif
</script>

turnjs type