前端

2024-06-30 19:40| 来源: 网络整理| 查看: 265

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

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

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

在这里插入图片描述示例说明

columns: 100px 3;

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

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

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

DOCTYPE html> Document * { 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; } 第一章九鼎镇州用于页面中提供一个可跳转指定App的按钮。此功能仅开放给已认证的服务号，在使用该标签之前，首先需要前往微信开放平台的管理中心-公众账号或小程序详情-接口信息-网页跳转移动应用-关联设置中绑定所需要跳转的App。详细配置规则参考文档《微信内网页跳转APP功能》属性备注：对于extinfo属性，用于携带额外信息，格式自定义，由跳转的App自⾏解析处理。对应iOS微信openSDK中的messageExt字段（LaunchFromWXReq.message.messageExt），或对应Android微信openSDK中的messageExt字段（ShowMessageFromWX.Req.message.messageExt），详细参见文档《App获取开放标签中的extinfo数据》公众号经常有需要用到一些临时性的多媒体素材的场景，例如在使用接口特别是发送消息时，对多媒体文件、多媒体消息的获取和调用等操作，是通过media_id来进行的。素材管理接口对所有认证的订阅号和服务号开放。通过本接口，公众号可以新增临时素材（即上传临时多媒体文件）。使用接口过程中有任何问题，可以前往微信开放社区 #公众号专区发帖交流用于页面中提供一个可跳转指定App的按钮。此功能仅开放给已认证的服务号，在使用该标签之前，首先需要前往微信开放平台的管理中心-公众账号或小程序详情-接口信息-网页跳转移动应用-关联设置中绑定所需要跳转的App。详细配置规则参考文档《微信内网页跳转APP功能》属性众号经常有需要用到一些临时性的多媒体素材的场景，例如在使用接口特别是发送消息时，对多媒体文件、多媒体消息的获取和调用等操作，是通过media_id来进行的。素材管理接口对所有认证的订阅号和服务号开放。通过本接口，公众号可以新增临时素材（即上传临时多媒体文件）。使用接口过程中有任何问题，可以前往微信开放社区 #公众号专区发帖交流公众号可以使用本接口获取从JSSDK的uploadVoice接口上传的临时语音素材，格式为speex，16K采样率。该音频比上文的临时素材获取接口（格式为amr，8K采样率）更加清晰，适合用作语音识别等对音质要求较高的业务。 // 获取页面元素 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)` } }

效果如下图

在这里插入图片描述

【本文地址】

公司简介

联系我们