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就是可以左右滑动了


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM