zoukankan      html  css  js  c++  java
  • uni-app写表格时列数过长时实现左右滑动效果

    使用标签包裹

                                            //使用scroll-view标签包裹,设置左右可滑动,宽度100%,超出隐藏
                                            <scroll-view scroll-x="true" @scroll="scroll" style=" 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{
    		 200%;
    		display: flex;
    		flex-wrap: nowrap;
    	}
    


    此时table就是可以左右滑动了

  • 相关阅读:
    自定义文书思路
    传输
    Netty的组件和设计
    第一款Netty应用程序
    Netty异步和事件驱动
    初识MQTT
    TCP/IP协议分层模型
    uni原生插件的开发(安卓)
    uniapp离线打包记录
    日常问题处理:Linux通过设备名称如何查看硬盘SN
  • 原文地址:https://www.cnblogs.com/axingya/p/14961308.html
Copyright © 2011-2022 走看看