vue 翻页组件vue-flip-page效果
方法
change（改变页面）
tap （点击）
turning （正在翻页）
prev （前一页）
next （后一页）
翻到指定页面：
handleSwitchManual(index){
if(index===this.currentIndex)return;
this.$refs["turn"].toPage(index);
this.currentIndex=index;
this.goods_id=this.manuals[this.currentIndex].goods_id;
this.show=false;
},
传入参数：
|参数|type|example|describe|
|------|----|--------|----------|
|width|number|375|宽度|
|height|number|667|高度|
|data|Array|[{"picture_image":"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2600216442,2384386498&fm=15&gp=0.jpg",},{"picture_image":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580807703833&di=0ab054549c3ea050dc0bd49e146b20e9&imgtype=0&src=http%3A%2F%2Fwww.thatsmags.com%2Fimage%2Fview%2F201703%2Fvue-cover.jpg",}]|传入的数据|
npm包npminstallvue-flip-page
在需要用到的页面中（注意一个页面目前只能引入一次）
importturnfrom"vue-flip-page";
components:{turn}
例子：
效果：
样式：
.manual-wrap{
position:relative;
z-index:0;
width:100%;
height:100%;
opacity:0;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
-webkit-transform:scale(0.95);
transform:scale(0.95);
-webkit-transition:opacityease0.5s;
transition:opacityease0.5s;
-moz-user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
user-select:none;
-o-user-select:none;
}
.manual-wrap.active{
-webkit-transform:scale(1);
transform:scale(1);
opacity:1;
}
总结
以上所述是小编给大家介绍的vue翻页组件vue-flip-page效果，希望对大家有所帮助！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。