前端-实现小说阅读翻页(分页)功能

我是通过css3中的columns属性来让文章自动分页的。

通过MDN或w3c来了解columns属性有何作用。超链接

columns 属性是一个速记属性设置列宽和列数。
columns 是 column-width 与 column-count 的简写属性。

前端-实现小说阅读翻页(分页)功能_第1张图片
示例说明

columns: 100px 3;

当每列宽度大于 100px 时,就以 3 列分割显示;当浏览器宽度缩小,导致在 3 列情况下无法满足每列大于 100px,就开始转为 2 列;当浏览器再缩小,2 列中每列无法再保持 100px 每列时,再次转为 1 列…

以此类推,“100px” 为每列不可低于的宽值,“3” 表示指定要显示的列。相对于单独设置 column-width 或 column-count,columns 要更加灵活。

完整实例
通过引入touch.js来绑定手势操作等事件

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="https://cdn.bootcdn.net/ajax/libs/touchjs/0.2.14/touch.js">script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .container {
            height: 100vh;
            overflow: hidden;
            margin: 0 16px;
        }
        article {
            columns: calc(100vw - 32px) 1;
            column-gap: 16px;
            height: 100%;
            word-break: break-word;
            transition: .5s;
        }
    style>
head>
<body>
    <div class="container">
        <article id="content">
            <h3>第一章  九鼎镇州h3>
            <p>用于页面中提供一个可跳转指定App的按钮。此功能仅开放给已认证的服务号,在使用该标签之前,首先需要前往微信开放平台的管理中心-公众账号或小程序详情-接口信息-网页跳转移动应用-关联设置中绑定所需要跳转的App。详细配置规则参考文档《微信内网页跳转APP功能》属性p>
            <p>备注:对于extinfo属性,用于携带额外信息,格式自定义,由跳转的App自⾏解析处理。对应iOS微信openSDK中的messageExt字段(LaunchFromWXReq.message.messageExt),或对应Android微信openSDK中的messageExt字段(ShowMessageFromWX.Req.message.messageExt),详细参见文档《App获取开放标签<wx-open-launch-app>中的extinfo数据》p>
            <p>公众号经常有需要用到一些临时性的多媒体素材的场景,例如在使用接口特别是发送消息时,对多媒体文件、多媒体消息的获取和调用等操作,是通过media_id来进行的。素材管理接口对所有认证的订阅号和服务号开放。通过本接口,公众号可以新增临时素材(即上传临时多媒体文件)。使用接口过程中有任何问题,可以前往微信开放社区 #公众号 专区发帖交流p>
            <p>用于页面中提供一个可跳转指定App的按钮。此功能仅开放给已认证的服务号,在使用该标签之前,首先需要前往微信开放平台的管理中心-公众账号或小程序详情-接口信息-网页跳转移动应用-关联设置中绑定所需要跳转的App。详细配置规则参考文档《微信内网页跳转APP功能》属性众号经常有需要用到一些临时性的多媒体素材的场景,例如在使用接口特别是发送消息时,对多媒体文件、多媒体消息的获取和调用等操作,是通过media_id来进行的。素材管理接口对所有认证的订阅号和服务号开放。通过本接口,公众号可以新增临时素材(即上传临时多媒体文件)。使用接口过程中有任何问题,可以前往微信开放社区 #公众号 专区发帖交流p>
            <p>公众号可以使用本接口获取从JSSDK的uploadVoice接口上传的临时语音素材,格式为speex,16K采样率。该音频比上文的临时素材获取接口(格式为amr,8K采样率)更加清晰,适合用作语音识别等对音质要求较高的业务。p>
        article>
    div>
body>
<script>
    // 获取页面元素
    let dom = document.querySelector('#content')
    // 获取可视区域的宽度
    const width = document.body.offsetWidth
    // 引入touch.js 来绑定左滑和右滑手势
    touch.on('#content', 'swipeleft', function () {
        swiperRemove(1)
    })
    touch.on('#content', 'swiperight', function () {
        swiperRemove(0)
    })
    function swiperRemove (status) {
        if (status === 1) {
            dom.style.transform = `translateX(-${width - 16}px)`
        } else if (status === 0) {
            dom.style.transform = `translateX(-${-Number(document.querySelector('#content').style.transform.replace(/[^[0-9]/ig, '')) + (width - 16)}px)`
        }
    }
script>
html>

效果如下图

你可能感兴趣的:(h5,css3,js,columns)