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

使用标签包裹

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

posted @ 2021-07-01 22:53  seekHelp  阅读(1785)  评论(0编辑  收藏  举报