因为手机屏幕比较窄,表格数据太长超出屏幕时,需要做左右滑动效果 ,但表格滑动时发现一个bug,就是滑动时顶上的导航栏也跟着滑动了, 原因是我的table表格 外面没有包一层 van-list, 加上就好了
// 表格外面必须包一层van-list , 不然表格左右滑动时 ,上方的页面也会跟着滑动
<van-list
v-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;
}
}
}