vue 简单实现左右翻页功能

本文阅读 2 分钟
广告

Lark20200617-181906.jpeg
思路:
首先先设一个div把文章内容放进去,超出部分进行隐藏,column-width:300px;用这个属性把这个文章内容按列分开,每一列300px,,翻页时用这个属性transform:translateX(0px);进行左右移动,实现左右翻页,这个很简单,但是判断有点小麻烦。
第一页是向左翻则提示你这已经是第一页了,最后一页时判断那是最后一页。
前者还是蛮简单的,后者我饶了一个圈圈
开始以为是得到他的宽度,然后除以每一列就可以得到页数了,然后根据页数来判断最后一页,但实际上我得不到我的宽度太难了,所以我们只能得到她的高度了。

<div id="main"> <div class="box" id="box"> <div id="connent" ref="connent"> <p v-html="contenttext" id="fonts"></p> </div> </div> <button @click="lbox()">左</button> <button @click="rbox()">右</button> </div>

先给box设一个死的高度,让这个范围变成可视范围,这个时候connent就能拿到文章内容的高度啦,假设每一页是600px,600px除以这个高度也是可以获得页数的,这个数可能为小数,我们可以用Math.ceil()来获取小数的最大整数,这个整数就是我们的页数啦。
我们在点击右翻时我们在给connent设一个高度,这时候文章内容就会自动排列,然后用transform:translateX(0px);调整里面的像素即可实现这个小小的功能呢。

下载地址:
index3.rar

里面的一些引入自己去找哦。

演示效果如下:

Lark20200618-113923.png
Lark20200618-093636.png

您的大名:
万水千山总是情,给个打赏行不行。 打赏
本文来自投稿,不代表本站立场,如若转载,请注明出处:https://www.ruletree.club/archives/2003/
网页封装iosAPP,超链接跳出浏览器问题
« 上一篇 06-17
javascript数组字段排序,sort()方法排序错乱问题
下一篇 » 06-20
广告

发表评论

成为第一个评论的人

作者信息

卑微页面仔
作者有点忙,还没写简介
发表文章 14 篇
最新文章

热门文章

标签TAG

热评文章