uni-app写表格时列数过长时实现滑动效果
2021/7/1 23:23:09
本文主要是介绍uni-app写表格时列数过长时实现滑动效果,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
使用标签包裹
//使用标签包裹,设置左右可滑动,宽度100%,超出隐藏 <scroll-view scroll-x="true" @scroll="scroll" style="width: 100%;overflow: hidden;white-space: nowrap;"> <view class="scroll-view_H"> <t-table @change="change"> <t-tr> <t-th>序号</t-th> <t-th>姓名</t-th> <t-th>年龄</t-th> <t-th>爱好</t-th> <t-th>爱好1</t-th> <t-th>爱好2</t-th> <t-th>爱好3</t-th> <t-th>爱好4</t-th> <t-th>爱好5</t-th> <t-th>爱好1</t-th> <t-th>爱好2</t-th> <t-th>爱好3</t-th> <t-th>爱好4</t-th> <t-th>爱好5</t-th> </t-tr> <t-tr v-for="item in tableList" :key="item.id"> <t-td>{{ item.id + 1 }}</t-td> <t-td>{{ item.name }}</t-td> <t-td>{{ item.age }}</t-td> <t-td>{{ item.hobby }}</t-td> <t-td>{{ item.id + 1 }}</t-td> <t-td>{{ item.name }}</t-td> <t-td>{{ item.age }}</t-td> <t-td>{{ item.hobby }}</t-td> <t-td>{{ item.id + 1 }}</t-td> <t-td>{{ item.id + 1 }}</t-td> <t-td>{{ item.name }}</t-td> <t-td>{{ item.age }}</t-td> <t-td>{{ item.hobby }}</t-td> <t-td>{{ item.id + 1 }}</t-td> </t-tr> </t-table> </view> </scroll-view>
样式部分
//设置宽度,定义成弹性盒模式,并且不换行。 .scroll-view_H{ width: 200%; display: flex; flex-wrap: nowrap; }
此时table就是可以左右滑动了
这篇关于uni-app写表格时列数过长时实现滑动效果的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)
- 2024-05-31全网首发!软考2024年5月《软件设计师》真题+解析+答案!(21-30题)
- 2024-05-30【Java】百万数据excel导出功能如何实现
- 2024-05-30我们小公司,哪像华为一样,用得上IPD(集成产品开发)?