手机端表格怎么做横向滑动，滑动时不影响上方结构

因为手机屏幕比较窄，表格数据太长超出屏幕时，需要做左右滑动效果，但表格滑动时发现一个bug，就是滑动时顶上的导航栏也跟着滑动了，原因是我的table表格外面没有包一层 van-list，加上就好了

    // 表格外面必须包一层van-list ， 不然表格左右滑动时 ，上方的页面也会跟着滑动<van-listv-model="loading":finished="finished"finished-text="没有更多了"@load="onLoad"><table :border="1" cellspacing="0" width="100%" id="tableId"><tr v-for="(item, index) in list" :key="index"><td class="name">{{ item.area }}</td><td class="short">{{ item.shortName }}</td><td>{{ item.customercount }}</td><td>{{ item.visitedcustomercount }}</td><td>{{ item.visitedrate }}</td><td>{{ item.sfkhcountDr }}</td><td>{{ item.sfkhcount }}</td><td>{{ item.changerate }}</td><td>{{ item.areasort }}</td></tr></table></van-list>// 引入发请求的api
import {getOrgBoard} from "@/api";created() {this.getData();},data() {return {list: [{area: "区域",shortName: "二级行",customercount: "商机总数",visitedcustomercount: "拜访数",visitedrate: "拜访率",sfkhcountDr: "单日开户数",sfkhcount: "总开户数",changerate: "转化率",areasort: "区域排名",},],pageSize: 10,pageNo: 1,loading: true,finished: false,total: "",};},// 获取数据async getData() {const { data: res } = await getOrgBoard(  {pageNo: this.pageNo,pageSize: this.pageSize});console.log(res);let rows = res.data.list;this.loading = false;this.total = res.data.count;if (rows == null || rows.length === 0) {// 加载结束this.loading = false;this.finished = true;return;}this.list = this.list.concat(rows);console.log(this.list);if (this.list.length >= this.total) {this.finished = true;}},onLoad() {this.pageNo += 1;this.getData();}/deep/ .van-list {//主要是这两行实现左右滑动overflow-x: scroll;overflow-y: hidden;}table {font-size: 0.37rem;border-color: #929292;border-collapse: collapse;white-space: nowrap;text-align: center;word-wrap: break-word;word-break: break-all;.name {// 固定第一列左右滑动时不动background-color: #f3f3f3;position: sticky;z-index: 1;left: 0;padding: unset;}td {padding: 0.23rem;}tr:nth-child(1) {td:nth-child(1) {background-color: #d7d7d7;}}.short {// 固定第二列左右滑动时不动position: sticky;z-index: 1;left: 2.18rem;background-color: white;tr:nth-child(1) {background-color: #d7d7d7;}}tr:nth-child(1) {background-color: #d7d7d7;td:nth-child(2) {background-color: #d7d7d7;}}
}

手机端表格怎么做横向滑动，滑动时不影响上方结构相关推荐

ios手机端表单input调用focus方法时，光标不显示，但软键盘会弹出来，可以修改内容，需要修改内容后光标才显示
功能: ios表单验证时,比如输身份证号,失焦后验证身份证,如果不合法,就让光标跳到对应的输入框,我是不合法就调用focus方法,完了会跳过去,但是ios有个bug,它确实会定位到对应的输入框,而且 ...
手机html5翻页效果代码,jquery html5手机端翻书效果_手指滑动书本翻页效果代码
特效描述:jquery html5手机端翻书手指滑动书本翻页效果.显现手机端翻书效果,支持手拖动翻页代码结构 1. 引入JS 2. HTML代码 function loadApp() { // ...
Android实现类似Excel的大表格，可横向纵向滑动，带表头
在项目中遇到了这样的需求,先是找到了这个库: https://github.com/Kelin-Hong/ScrollablePanel 但是发现横向滑动时很卡,纵向滑动也不那么丝滑,后来网上翻了翻, ...
table-responsive响应式表格,手机端表格自适应
有个项目是之前有电脑端的代码,这次想整一套单纯用在手机端的代码,有很多表格,所以此次的目的是表格在手机端如何更好的展示: @media (max-width: 767px) {.table-respo ...
库存管理：批量入库怎么做？手机端也可以做
如果通过纯Excel的方式来管理库存,未免有些落后和麻烦,尤其是数据太多,电脑配置不够好,Excel打开就会非常卡,关键时刻很容易掉链子. 今天给大家介绍一款可以方便管理库存的在线平台,免费使用,手机 ...
微信小程序真机调试手机端在无法连接电脑localhost:3000时如何调试解决办法
将自己utils文件夹种config.js配置文件地址改为电脑的Ipv4级地址电脑的Ipv4地址在命令行种输入ipconfig即可拿到然后需要电脑和手机在同一个局域网也就是wifi下就可以实 ...
php代码适配手机端,js / php 手机端适配代码
第一. 使用js让广告适配合适的设备(当然你也可以直接让css来隐藏掉广告,但是js可以让网页的速度快一点,因为不需要去加载web端的广告了) function is_mobile() { var r ...
网站手机端seo优化方法和技巧
作为一个寻求名声的网站所有者,从你选择创建一个网站的那一刻起,你就知道SEO(搜索引擎优化)是一个高度优先事项,这就是为什么现在是调整的好时机.SEO是一个不断发展的领域,百度对网站排名的方式有很多修 ...
手机端图片滑动切换效果
最近公司要求开发wap版本页面,碰到了个图片滑动切换效果,折腾了半天,自己封装了一个比较通用的小控件,在此分享一下. 大概功能:可以自定义是否自动切换,支持单手滑动图片进行切换,支持左右滑动切换.循环 ...

手机端表格怎么做横向滑动，滑动时不影响上方结构

手机端表格怎么做横向滑动，滑动时不影响上方结构相关推荐

最新文章

热门文章

手机端表格怎么做横向滑动， 滑动时不影响上方结构

手机端表格怎么做横向滑动， 滑动时不影响上方结构相关推荐

最新文章

热门文章

手机端表格怎么做横向滑动，滑动时不影响上方结构

手机端表格怎么做横向滑动，滑动时不影响上方结构相关推荐