vue 翻页组件vue-flip-page效果

2024-10-19 17:05:47

方法
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包 npm install vue-flip-page

在需要用到的页面中（注意一个页面目前只能引入一次）

import turn from "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: opacity ease 0.5s;
  transition: opacity ease 0.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效果，希望对大家有所帮助！

vue router自动判断左右翻页转场动画效果

前段时间做了一个移动端spa项目,技术基于 :vue + vue-router + vuex + mint-ui 因为使用了vue-cli脚手架的webpack模版,所有页面都以.vue为后缀的文件作为一个组件最近公司项目比较少终于有空来记录一下自己对vue-router的一些小小的使用心得, 一般的移动端口单页应用在跳转页面时候会有相应的转场动画,比如: 1. 从当前一级页面跳转二级页面需要展示的转场动画是一级页面向屏幕左边移动消失的同时, 二级页面从屏幕的右边向左边移动出现.(类似翻书翻到
基于Vuejs框架实现翻页组件

翻页功能对前端后端都是个难题啊!今天终于给踩了!哈哈!整理下方法,我是基于vueJs写的,同样适用于angular哈! 封装下载地址:vue.js翻页组件效果截图: 整体实现逻辑,当用户点击页码时,ajax从后端获取数据,包括:records(当前页查询到的记录),totalRecords: 121(所有记录),currentPage(当前页码),totalPage(总页码),size(当前页显示数量),之后用我封装的算法assemblePageTurnerParams,算出页面展示哪些页码.
vue 实现滚动到底部翻页效果(pc端)

pc端vue 滚动到底部翻页效果,具体内容如下所示: html: <div class="list" ref="scrollTopList"> <div class="listsmall" v-for="(item,index) of list" :key="index" @click="getDeviceInfo(item.id)"> <span cla
基于vue实现分页/翻页组件paginator示例

序言项目需要自己写了一个基于vue的paginator分享出来,欢迎各路好汉来指教当页数小于999(包括999)页页数大于999页首页或尾页disabled 10页之内显示 Usage 参数 pageCount: 整数,代表总页数监听事件 @togglePage: 监听切换页面事件,可以获取到当前前往页的页数父组件调用方法 index.vue <template lang="html"> <div> <paginator :pageCount=
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】

说到h5的翻页,很定第一时间想到的是swiper.但是我当时想到的却是,vue里边怎么用swiper?! vue-awesome-swiper就是其中一个前辈们产出的结晶.就看首尾两个单词,就知道他是vue和swiper的爱情之子了. vue-awesome-swiper官网是中文文档,妈妈再也不用担心我读api啦."基于 Swiper4.适用于 Vue 的轮播组件".在产品催着进度的紧张环境下,在四处搜寻解决方案的情况下,这句话简直发着光啊. 具体怎么用,官方文档写的很清楚,但我还是
Vue实现简易翻页效果源码分享

源码如下: <html> <head> <meta charset="UTF-8"> <title>slidePage</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <style type="text/css"> *{ margin
Vue2.0+ElementUI实现表格翻页的实例

ElementUI的表格要求的数据类型为字典数组.我使用了python3写后端,那么从数据库取数据时添加一行cursorclass=pymysql.cursors.DictCursor即可.取出后我将其存入redis数据库方便之后取用.取用时使用eval()函数再传到前端即可. 前端放置Pagination 分页器,我这里直接采用了完整功能的分页器. <el-pagination @size-change="handleSizeChange" @current-change=&q
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.curre
vue自定义翻页组件的方法

本文实例为大家分享了vue自定义翻页组件的具体代码,供大家参考,具体内容如下效果图如下: 1.在components建立page.vue文件 <template> <div class="pagination">  <button :disabled="pageNo == 1" @click="getPageNo(pageNo - 1)">
Vue实现内部组件轮播切换效果的示例代码

对于那些不需要路由的内部组件,在切换的时候希望增加一个轮播过渡的效果,效果如下: 我们可以引入一个轮播组件,但是有个问题,通常轮播组件都会把所有的slide都渲染出来再进行切换,这样就导致所有的资源都会触发加载,这可能不是我们所期待的,毕竟如果slide比较多的情况需要一次性加载的图片等资源太多了.所以我们可以手动简单地写一个,满足需求即可. 现在一步步来实现这个功能,先写一个实现基本切换的demo. 1. 实现切换先用vue-cli搭建一个工程脚手架,使用以下命令: npm install
Vue实现兄弟组件间的联动效果

需求说明如图,我想要实现当点击字母L,页面定位到L开头的城市名 Do it 1.找到字母表的页面在html标签绑定一个click事件,在js中定义一个方法,并使用参数e获取点击的字母.当在页面点击时,console出来效果如下 2.通过city这个父页面,进行列表页和字母表页面的值传递 <1>在字母表页定义一个监听方法 <2>进入city页面,在html中绑定一个监听事件在js中编写这个事件的方法打开页面,可以看到没有问题,city页面监听到了字母表页面的点击 <3
vue swipe自定义组件实现轮播效果

本文实例为大家分享了vue swipe自定义组件实现轮播效果的具体代码,供大家参考,具体内容如下 <template> <layout-div :style="getStyle" class="over-h posi-r"> <layout-div :style="getChildStyle" class="flex" @load="loadHandle"> <sl
vue使用动态组件实现TAB切换效果

问题描述 tab切换的场景在开发中会经常用到.当需要实现这种效果的时候,我们常常会想到下面的方式去实现这个效果. 方式一使用display:none;去控制dom元素的显示与隐藏.从而实现,两个tab的显示与隐藏.不过如果有三四个tab要切换的话,这种方式就不可取了. 方式二使用vue中的指令v-if或者v-show实现.这种方式可以实现,不过代码写的不优雅.试想一个.vue文件中出现一大把v-if是什么样的效果?而且使用v-if还得声明很多的变量去做标识.所以不是十分好的的解决方案方式三
Android基于ListView实现类似QQ空间的滚动翻页与滚动加载效果

本文实例讲述了Android基于ListView实现类似QQ空间的滚动翻页与滚动加载效果.分享给大家供大家参考,具体如下: 1. 滚动加载 listView.setOnScrollListener(new OnScrollListener() { //添加滚动条滚到最底部,加载余下的元素 @Override public void onScrollStateChanged(AbsListView view, int scrollState) { if (scrollState == OnScro
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路

前端的翻页插件有很多,bootstrap的翻页界面看起来就不错,做起来也易于上手,但应用于项目中的翻页实现还有有几个难点,分别是: 如何封装一个翻页插件,如题中的yunm.pager.js. 涉及到的div局部刷新该如何做. 在没给大家介绍正文之前,先给大家展示下效果图,如果感觉还不错,请继续往下阅读: 翻页的总体流程涉及到的知识点很多,这篇文章我们也主要来关注以上两点,其余的内容,请自悟. 一.如何定义局部刷新的div 翻页时,我们一般只会刷新页面中涉及到翻页的父级div,那么该如何定义呢?
jQuery实现鼠标经过像翻页和描点链接效果

在百度地图api首页经常见到当鼠标经过像翻页和描点链接效果,基于jquery和js代码是如何实现的呢?下面小编给大家分享关键代码,一起看下吧! var timer; $("li").on("mouseover",function(){ clearTimeout(timer); timer=null; $(this).addClass("active"); $(this).siblings().removeClass("active&qu

vue 翻页组件vue-flip-page效果

相关推荐

随机推荐