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

  • 相关阅读:
    测分用例模板
    功能测试用例设计(24方法)
    pycharm
    Mac-peizhi
    基于Java BufferedImage实现识别图片中的黑色矩形
    Soap从入门到实战
    实列+JVM讲解类的实列化顺序
    基于Springboot的BaseService和BaseController
    Kendo-Grid for Vue API and Template
    web项目jsp中无法引入js问题
  • 原文地址:https://www.cnblogs.com/axingya/p/14961308.html
Copyright © 2011-2022 走看看