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

  • 相关阅读:
    恭介的法则
    229. Majority Element II
    169. Majority Element
    233. Number of Digit One
    172. Factorial Trailing Zeroes
    852. Peak Index in a Mountain Array
    162. Find Peak Element
    34. Find First and Last Position of Element in Sorted Array
    81. Search in Rotated Sorted Array II
    33. Search in Rotated Sorted Array
  • 原文地址:https://www.cnblogs.com/axingya/p/14961308.html
Copyright © 2011-2022 走看看