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就是可以左右滑动了
标签:name,时列数,app,爱好,item,hobby,uni,age,id 来源: https://www.cnblogs.com/axingya/p/14961308.html