上周《让CSS3中Transform属性带你一文实现炫酷的转盘抽奖效果》博文中说到这周出一篇介绍小说阅读器开发的博文,可能是离职不上班的原因,在家变得也懒散了一些,本来是打算上周三时候动手开发的,一直拖到了昨天才开始开发,花了快一天的时间才把主要的功能实现完,演示效果如下:
下面主要分四个部分介绍小说阅读器的开发流程:
- 阅读器功能划分及效果图
- 拖动进度条切换章节
- 上下滚动、左右滑动翻页
- 其它模块
一、阅读器功能划分及效果图
关于阅读器功能的划分主要参考了起点读书及微信读书小程序及APP,整体的布局、翻页阅读方式是采用了起点读书;阅读器背景颜色、拖动进度条切换章节、操作栏UI参考了微信读书。
整体布局:
二、拖动进度条切换章节
用户左右拖动圆点,监听其touchstart点击事件,然后在其内部再监控touchmove移动事件,计算圆点在进度条的位置,然后与整个进度条长度相除,就算出当前的进度值百分比,再与章节数组长度相乘,算出当前章节的下标,进而拿到当前章节的信息。
用户离开屏幕,触发touchend事件,根据获取的章节信息,调用相应方法,更新阅读器章节内容,此部分代码如下所示:
/**
* 拖动进度条
*/
let now = $('#r-progress-now'); // 已拖动进度条
let bar = $('#r-progress-bar'); // 背景进度条
$('#r-progress').on('touchstart', function () { // 监听用户触发屏幕事件
let chapterId; // 记录章节ID
let _this = this;
let width = 60; // 进度条每次滑动值
let width_bar = bar[0].offsetWidth - this.offsetWidth - 3; // 背景进度条实际使用长度
_this.ontouchmove = function(ev) { // 监听圆点拖动事件
ev = ev || window.event;
let width_new = ev.changedTouches[0].clientX - width; // 圆点距离背景进度条左边距离值
if (width_new <= 0) { // 设置最小值
width_new = 0;
}
if (width_new >= width_bar) { // 设置最大值
width_new = width_bar;
}
let percent = (width_new / width_bar).toFixed(2); // 计算当前拖动百分比
let menuLength = menuMap.length; // 小说目录数组长度
index = parseInt(percent * menuLength); // 当前数组下标
index = (index >= menuLength) ? (menuLength - 1) : index;
// 更新章节ID、章节名及已拖动进度条的长度值
$('#r-progress-title').html(menuMap[index]['name']);
chapterId = menuMap[index]['id'];
now.css('width', width_new + 'px');
};
_this.ontouchend = function() { // 监听用户离开屏幕事件
// 根据当前ID获取章节
changeChapter(chapterId);
}
});
复制代码
效果图:
三、上下滚动、左右滑动翻页
左右滑动翻页是参考了起点读书的web阅读器翻页效果,两种翻页方式的话对用户的来说体验也好一些。
该功能布局是使用column-width【设置多列布局,规定列的宽度,内容】和transform【translateX:设置区块实现平移效果,该属性不会造成页面重绘或者回流】属性实现。
该功能用户点击换页是分为三个区域,左【拉取上一页】、中【弹起操作栏】、右【拉取下一页】。用户点击阅读器监控touchstart事件,判断当前区域在哪个部位,如果在左右部分,则计算当前要移动的值,然后修改阅读器transform中translateX的属性值,就完成了左右滑动换页,此部分代码如下所示:
/**
* 左右翻页
*/
let rContent = $('#r-section'); // 阅读器盒子对象
let touch = {
startX: 0,
count: 0
};
/**
* 阅读器弹出操作栏或左右翻页效果
*/
rContent.on('touchstart', function(event){
// 当前点击距离屏幕的距离
touch.startX = event.targetTouches[0]['pageX'];
if (touch.startX > contentWidth / 4 && touch.startX < (contentWidth * 3 / 4)) { // 弹出操作栏
$('#r-footer').css('display', 'block');
$('#r-header').css('display', 'flex');
$('#r-mask').css('visibility', 'unset');
// touch 和 click事件的相关冲突,有touch 就没有了,click功能,解决方法:去掉
event.preventDefault();
return false;
return;
}
if (changeKey === '1') { // 上下滚动
return;
}
if (touch.startX < contentWidth / 4 && touch.count <= 0) { // 当前为第一页
return;
}
if (touch.startX < contentWidth / 4 ) { // 向上翻页
touch.count --;
}
if (touch.startX > (contentWidth * 3 / 4)) { // 向下翻页
touch.count ++;
}
// 计算平移值,contentWidth 为屏幕的阅读器宽度,初始化时计算的
let translateWidth = -contentWidth * touch.count;
$('#r-section').css('transform', 'translateX(' + translateWidth + 'px)');
});
复制代码
左右滑动效果图:
上下滚动效果图:
四、其它模块
其它模块的话就是切换阅读器皮肤、阅读器文字样式及阅读器内容设置,前面两个已经实现,内容设置的话字体大小和行距两个更能还没做,这个做起来也不是太费时间,另外还有就是保存用户选中样式,这个可以使用Localstorage中的setItem及getItem进行缓存,这个也比较简单,就不介绍了。
关于整个阅读器主要功能已经开发完成,但是真正的放在整个小说软件内与接口联调,还有不小的工作量,因为时间原因,这个也不展开介绍了。
阅读器皮肤效果图:
阅读器字体效果图:
有需要阅读器的源码可以留言或者私聊,后期的话,会把更加完善的代码放在GitHub上,然后将下载地址更新到此博文内,有需要的记得关注、或者收藏此文章。
下周有时间的话,可能会出一篇《团队开发过程中的Git相关的使用》,带你解析微信小程序中智能聊天机器人的接入过程。