uni-app 超简单原理实现小说阅读分页功能_uniapp 分页阅读

前端小白的uni-app艰难学习智力

原理

用到的主要原理有：

1. 分页原理
2. 利用高度截取后台传过来的数据内容

利用高度实现完美分割

在uni-app中，有这样一个接口

通过它我们可以获取一些元素信息，比如宽高，下面是我需要获取的东西：

<view
      class="content-text"
      id="box"
      :style="{height: boxHeight + 'px'}">
        <view
        id="data"
        :style="{top: -boxHeight * currentPage + 'px'}"
        >
          <rich-text :nodes="contentData"></rich-text>
        </view>
      </view>
1
2
3
4
5
6
7
8
9
10
11

首先页面是全屏状态，id为box的view为小说内容的容器，id为data的view是小说内容
boxHeight: 容器高度
textHeight: 由小说内容撑开的高度

.content-text {
      width: 100%;
      height: 92vh;
      line-height: 26px;
      box-sizing: border-box;
      display: block;
      position: absolute;
      top: 4vh;
      z-index: 2;
      background-color: #fff9eb;
      overflow: hidden;
      #data {
        width: 100%;
        display: inline-block;
        position: absolute;
        left: 0;
        padding: 0 10px;
        box-sizing: border-box;
        z-index: 3;
        text-indent: 1.5em;
      }
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

首先给box一个初始高度为92vh，然后获取他的高度（单位为px），因为我设置的行高是26px，所以在下面的代码中我会通过这个行高26px重新计算容器高度，使它成为26的倍数，这样就不会出现露出一半行字的情况了

onReady() {
      var text = uni.createSelectorQuery().select('#data')
      var box = uni.createSelectorQuery().select('#box')
      var view = uni.createSelectorQuery().select('.story')
      box.boundingClientRect(data => {
        this.boxHeight = Math.floor(data.height / 26) * 26
        // console.log('boxHeight', this.boxHeight)
      }).exec()
      text.boundingClientRect(data => {
        this.textHeight = data.height
        // console.log('textHeight', this.textHeight)
      }).exec()
      view.boundingClientRect(data => {
        this.viewWidth = data.width
        // console.log('viewWidth', data.width)
      }).exec()
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

然后在computed中计算一章切割后的页数

storyData () { // 章节信息
        return this.$store.state.storyData
      },
contentData () { // 本章内容
        return this.storyData.content
      },
      pageNum () { // 单章总页数
        return Math.ceil(this.textHeight / this.boxHeight) || 1
        // return Math.ceil(this.data.length / this.pageSize) || 1
      }
1
2
3
4
5
6
7
8
9
10

然后就是在绑定跳到下一页（上一页）方法了，只要++（- -）this.currentPage(当前页码)就ok了！

使用该方法需要注意以下几点：
两个高度获取需要的onready中执行，onready之前的生命周期都是没用的！
需要和后台说好不要用br标签来换行，因为这样会导致高度计算不准确，最好是一个段落就是一对p标签