uni-app 小说滑动阅读功能实现

小说项目增添了内容左右滑动需求，于是用了 uni-app 内置的 swiper 来做左右滑动

HTML代码：

 <view class="content-text" id="box" :style="{fontSize: fontSize + 'px'}" v-if="topRight"><view id="data"><rich-text :nodes="contentData"></rich-text></view></view><swiper  v-if="topRight":style="{ backgroundColor: novelBgStyle, color: novelColor,fontSize: fontSize + 'px' }" class="swiper1" :duration="500":current = "swiper_index"@animationfinish = 'swiperChange'><swiper-item v-for="(item,index) in sliderContent" :key='index' :item-id="item.id"><view class="swiper-item" v-html="item.text"></view></swiper-item></swiper>

原本是用 v-show 显示隐藏，后来发现时好时坏，于是改用 v-if 。
最上面的 view 盒子是用来测量内容高度的，外面还有一个父盒子是视窗高度，层级显示在最后面。

1.数据填充进第一个盒子后获取内容高度

uni.request({url: this.urls + '/app/bookDetail/content?ids=' + send_id,success: res => {let swiper_title_init = `<h3 style="margin-bottom:20px">${res.data.data[0].title}</h3>`;this.contentData = swiper_title_init + res.data.data[0].content;var box = uni.createSelectorQuery().select('#box');      //获取父盒子高度box.boundingClientRect(data => {this.boxHeight = Math.floor(data.height / 26) * 26;setTimeout(()=>{   // setTimeout后才能获取到填充了内容的盒子高度var text = uni.createSelectorQuery().select('#data');   //获取内容高度text.fields({size:true} , data => {this.textHeight = data.height;let len = Math.ceil(this.textHeight/this.boxHeight); //  内容分成len个视窗（父盒子）的高度// 每个视窗含有的字符个数let throat = Math.ceil((this.boxHeight/this.textHeight)*this.contentData.length);for (let i = 0; i < len ; i++){this.countText(throat,i,send_id);}if(callback){callback();}}).exec();})}).exec()}
});

2.根据获取的高度裁剪内容后填充

countText(throat,index,id){let tempstr = '';let arr = '';let str = this.contentData.charAt(throat);let id_and_index = id+'-'+index;let put_data = {};// 判断截取部分是否是<p></p>标签和<br/>标签 具体自己编写~我的代码还没精简 就发个简单版的if(str == '<') {if(this.contentData.charAt(throat+2) == '>'){tempstr = this.contentData.slice(0, throat+3);arr = this.contentData.split("");arr.splice(0, throat+3);}}this.contentData = arr.join("");  // 截取后删掉原数据被截取部分put_data.text = tempstr;put_data.id = id_and_index;           //这里下面说明this.sliderContent.push(put_data);
}

放入id和index 是这一章内容的id 和这一章分页截取后的页数，后面会放到 swiper-item 的 item-id 属性当中（:item-id=“item.id”）就可以在 swiper @change 或者 @animationfinish 的调用中取到到时候方便调用记录和返回历史；
推荐用 @animationfinish 监听加载更多，这样看起来不会卡顿。

基本的滑动功能这里就说完了！

补个坑点：

H5端测试没问题手机端滑动后更换章节时 swiper会卡死数据什么的获取填充都是正常的但是显示正常，
这时候用 v-if 的好处就出来了

this.topRight = false;      //v-if
this.sliderContent = [];
setTimeout(()=>{this.topRight = true;  //v-if this.sliderPage(id);
})

先用 v-if 销毁 DOM 然后重新创建渲染 必须用 setTimeout 打个时间差，不然不管用，实测！！！这问题找了好久，才找出来。

uni-app 小说滑动阅读功能实现相关推荐

Android 用Groovy实现扇贝阅读APP的自动阅读功能
动机最近因为想要英语学习,特下载了「扇贝阅读」App,保证自己抽空能够提升一下自己的英语水平.这个App有一个功能,就是打卡功能,每天成功阅读完两篇英语短文,就能完成每日打卡,并领取一些奖励. 问题 ...
用IOS手机看小说，阅读器APP怎么选
由于IOS手机自身不能直接打开epub或者txt格式文件,或者阅读软件使用感较差,会我们的阅读带来不小的困扰.今天我为大家推荐iOS苹果手机上比较好用的3个epub阅读器,用这些阅读器,大家就可以轻松 ...
基于Android的小说电子书阅读app
课题功能描述: 一.管理员的功能需求: 1.用户信息管理:管理用户的注册信息: 2.书籍类型:对书籍类型信息的查看和维护: 3.书籍信息:对书籍信息的查看和维护: 4.章节信息:对章节信息的查看和维护 ...
Delphi 10.4.2 轻松实现Android/IOS txt小说电子书阅读器应用APP翻页效果
Delphi 10.4.2是最新版本的跨平台本机应用开发工具,一套代码可编译到五个操作系统上:iOS.Android.Windows.macOS 和 Linux: 本代码仅仅数十行即可轻松实现Andr ...
有声小说书屋阅读软件功能及技术分析
目录一.有声小说书屋软件功能 1.界面介绍 2.听书功能 1)点击上册工具栏的喇叭,可实现听书功能, 2)生成网页,借助 edge浏览器的听书功能 3. 扩展书屋二.所用技术介绍 1.导入小说 ...
uni app实现WIFI功能(只支持安卓APP)
uni app实现WIFI功能一.前言二.使用 uni-WIFI 三.使用h5+ api 一.前言最近需要在uniapp上实现WiFi功能,将个人的研究结果记录如下(都只支持安卓APP) 使用 ...
阅读替换净化规则_阅读app下载_阅读客户端安卓下载-优基地
软件介绍阅读app是一款非常好用的手机阅读软件,通过导入书源方式实现了强大的小说换源阅读功能,上千个书源可以快速导入,书源丰富度完爆同类软件.阅读app软件开源,不含任何广告,使用起来非常清爽,赶紧 ...
python +pyqt 小说下载阅读器转语音合成 ,基于PyQt5生成图形页面（已打成exe可直接下载使用）
最近在学习python,写了一款简单的小说下载器,基本功能都已经实现,废话不多说直接上效果简单说下功能把 1.支持在线阅读,翻页键盘快捷键上下(阅读) 左右(翻页).可以导出TXT到本地,默认是 ...
用Mac电脑看小说，阅读器软件怎么选
大家通常会遇到自己使用的小说阅读器不能在Mac系统上兼容的问题,作为小说爱好者,经过多款测评,选出以下小说阅读器,在"挑剔"的Mac电脑上体验相对较好.这些阅读器支持TXT EPU ...

uni-app 小说滑动阅读功能实现

uni-app 小说滑动阅读功能实现相关推荐

最新文章

热门文章