scroll-view里面显示表格
发布于 5 年前 作者 pkong 7847 次浏览 来自 问答

这是一个用scroll-view里面用view设计的表格，希望第一列能垂直居中，研究了好多天，就是没结果

3 回复

我只能做到这种了，可以左右滑动，但是宽度不能自适应，哎

首先谢谢你的支持，但我不知道，这个代码是否经过测试

  1. wxml的结构肯定不完整，第二

  2. 我研究了很久，你这样设置，左右滑动是不可能

  3. .sv的className没有

浪费了半小时，还是没能解决问题。

flex布局的align-items:center;

wxss:

.table{

background: #f0f0f0;

}

.table-head{

padding:20rpx;

display: flex;

justify-content: space-between;

}

.table-items{

background: #fff;

padding:20rpx;

display: flex;

justify-content: space-between;

align-items:center;/*垂直居中*/

text-align: center;

border-bottom:1rpx solid #f0f0f0;

}

wxml:

<view class=‘table’>

<view class=‘table-head’>

<view class=‘table-head-item’>星期</view>

<view class=‘table-head-item’>班级</view>

<view class=‘table-head-item’>节次</view>

</view>

<scroll-view scroll-y style=“height: 200px;” class=‘sv’>

<view class=‘table-items’>

<view class=‘table-items-item’>一</view>

<view class=‘table-items-item’>

<view>语文</view>

<view>三年2班</view>

</view>

<view class=‘table-items-item’>科目</view>

</view>

<view class=‘table-items’>

<view class=‘table-items-item’>一</view>

<view class=‘table-items-item’>

<view>语文</view>

<view>三年2班</view>

</view>

<view class=‘table-items-item’>科目</view>

</view>  

<view class=‘table-items’>

<view class=‘table-items-item’>一</view>

<view class=‘table-items-item’>

<view>语文</view>

<view>三年2班</view>

</view>

<view class=‘table-items-item’>科目</view>

</view>

<view class=‘table-items’>

<view class=‘table-items-item’>一</view>

<view class=‘table-items-item’>

<view>语文</view>

<view>三年2班</view>

</view>

<view class=‘table-items-item’>科目</view>

</view>

<view class=‘table-items’>

<view class=‘table-items-item’>一</view>

<view class=‘table-items-item’>

<view>语文</view>

<view>三年2班</view>

</view>

<view class=‘table-items-item’>科目</view>

</view>

<view class=‘table-items’>

<view class=‘table-items-item’>一</view>

<view class=‘table-items-item’>

<view>语文</view>

<view>三年2班</view>

</view>

<view class=‘table-items-item’>科目</view>

</view>

<view class=‘table-items’>

<view class=‘table-items-item’>一</view>

<view class=‘table-items-item’>

<view>语文</view>

<view>三年2班</view>

</view>

   

</scroll-view>

</view>

回到顶部