怎样实现表格在移动端能左右滑动查看

zbit 2018-09-22 01:15:03

表格太宽了，怎样实现表格在移动端能左右滑动查看，像百度百科里面的表格那样。最好能给一个实例。

...全文

2384 1 打赏收藏转发到动态举报

写回复

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

天际的海浪 2018-09-22

打赏
举报

回复

设置个div 样式为 width: 100%; overflow-x: auto; 把表格放div中 <div style="width: 100%; overflow-x: auto;"> <table>.........</table> </div>

下载并解压到项目文件夹下，使用npm install安装依赖，使用npm run serve命令启动项目。

ReactNative表格数据展示组件_支持左右滑动时左侧标题列固定与上下滑动时顶部名称行冻结的跨平台移动端表格视图_用于在iOS和Android应用中实现类似Excel的冻结窗格.zip数据库入门指南与实战进阶

利用Swiper实现移动端Table切换，页面可左右滑动，加动画移动效果

源码来自：https://pan.quark.cn/s/e12be8a584ce 背景不久前我做了关于获取浏览器摄像头并扫码识别的功能，本文中梳理了涉及到知识点及具体代码实现，整理成此篇文章内容。本文主要介绍，通过使用基于技术栈的前端开发技术，在浏览器端调起摄像头 `SCAN QRCODE获取摄像头访问权限的系统提示框点对点（Peer-to-Peer）WebRTC点对点（Peer-to-Peer）MediaStreamRTCPeerConnectionWebRTCRTCDataChannelMDNWebRTCWebRTC APIWebRTCWebRTC适配器（WebRTC adapter）WebRTCJavaScript垫片WebRTCWebRTCMDNnavigator.mediaDevices.getUserMediagetUserMedia APIMediaDevices.getUserMedia()MediaStreamA/D转换器PromiseresolveMediaStream对象promiserejectPermissionDeniedErrorNotFoundErrorpromise对象resolverejectnavigator.mediaDevicesMediaDevicesMDNJSQRjsQRJavaScriptQR码jsQRImageDatajsQRjsQR4图像数据宽高可选的对象imageData[r0, g0, b0, a0, r1, g1, b1, a1, ...]Uint8ClampedArray（ 8位无符号整型固定数组）rgbamediaDevicesAPIScaner4videocanvasScanerScane...

本文介绍了一个适用于Vue3和TypeScript的H5移动端表格组件vue3-h5-table。该组件支持左侧固定、滑动、每行点击回调以及指定列排序等功能。文章详细说明了组件的props配置，包括表格最小高度、显示行数、头部高度、行高等参数，并提供了columnItemType的类型定义。此外，还展示了组件的使用实例，包括模板结构、脚本配置和样式定义。组件经过多次优化，包括渲染方式改进、响应速度提升、屏幕尺寸适配、表头固定优化等，确保了在移动端的流畅体验。具体使用可参考GitHub项目中的示例文件。

87,995

社区成员

224,693

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章