uni-app写表格时列数过长时实现滑动效果

Posted 2021-07-01 seekHelp

使用标签包裹

                                        //使用标签包裹，设置左右可滑动，宽度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就是可以左右滑动了