Vue实现简易翻页效果源码分享_vue书本翻页效果,vue-flip-page

vue

翻页效果

32 浏览量更新于2023-05-11 评论收藏 32KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

Vue实现简易翻页效果源码分享实现简易翻页效果源码分享

本文给大家分享了vue实现简易翻页效果，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧

源码如下：

<html>

<title>slidePage</title>

margin: 0;

padding: 0;

}

.container {

width: 100%;

margin: 0 auto;

text-align: center;

}

.content{

font-size: 400px

}

.leftBtn{

width: 45px;

height: 45px;

margin-right: 15px;

}

.rightBtn{

width: 45px;

height: 45px;

margin-left: 15px;

}

</style>

</head>

<body>

<div v-if="numberArr.length == 0">{{showMessage}}</div>

<span class="pagination">{{curPage}}/{{totalPage}}</span>

</div>

new Vue({

el: "#root",

data(){

return {

showMessage: 'No number',

content:'',

numberArr: [1, 2, 3, 4],

curPage: 1,

totalPage: 1,

itemNumPerPage: 1

}

mounted() {

this.init()

methods:{

init(){

this.totalPage = Math.ceil(this.numberArr.length / this.itemNumPerPage)

this.totalPage = this.totalPage < 1 ? 1 : this.totalPage

getCurPageContent: function(numberArr, curPage, itemNumPerPage){

return numberArr.filter(function(element, index){

if(index >= (curPage -1)* itemNumPerPage && index < curPage *itemNumPerPage){

return true

}else{

return false

}

})

handleClick: function(arg){

if(arg == 'leftBtn'){

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38576779

粉丝: 9
资源: 927

会员权益专享

Vue实现简易翻页效果源码分享

评论0

会员权益专享

最新资源

Vue实现简易翻页效果源码分享

评论0

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

flip（翻页效果）

vue 结合 turnjs 实现翻页效果

vue实现书本翻页效果

vue 实现简易记事本

vue 实现grid 定时滑动翻页效果

vue左右滑动翻页效果

vue-awesome-swiper 基于vue实现h5滑动翻页效果

vue h5实现翻页动画效果

使用vue实现简易留言板

vue实现旅游网站源码

vue 书本翻页效果

vue上下滚动条翻页效果

vue实现手动翻页富文本代码

vue 实现动态天气效果

vue实现种菜游戏源码

vue3实现简易计算器

Vue的数字滚动翻滚效果图示.vue

vue+animation实现翻页动画

基于vue实现分页/翻页组件paginator示例

会员权益专享

最新资源