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

  • 相关阅读:
    引用数据类型:字符串和数组
    java流程控制
    java基本类型-八大基本数据类型(4类8种)
    Java标识符
    Java注释
    虚拟环境管理virtualenv
    pipenv管理模块和包
    有关线程的说法?
    TCP三次握手的序列号和确认号的计算
    jenkins的安装
  • 原文地址:https://www.cnblogs.com/axingya/p/14961308.html
Copyright © 2011-2022 走看看