收藏
回答

scroll-view里面显示表格

框架类型 问题类型 终端类型 微信版本 基础库版本
小程序 Bug 工具 6.5.3 2.0.0


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

回答关注问题邀请回答
收藏

3 个回答

  • Tony Stark
    Tony Stark
    2020-01-03

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

    2020-01-03
    有用
    回复 1
    • 王永清18905050659
      王永清18905050659
      2020-01-10
      我对换数据行列,可以实现
      2020-01-10
      回复
  • 王永清18905050659
    王永清18905050659
    2019-02-08

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

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

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

    3. .sv的className没有

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

    2019-02-08
    有用
    回复 3
    • 铭锋科技
      铭锋科技
      2019-02-08

      代码肯定是经过测试的,wxml给你缩短一点,让你看清楚结构,之前发的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: 150rpx;">

      <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>        

      </scroll-view>

      </view>




      2019-02-08
      回复
    • 王永清18905050659
      王永清18905050659
      2019-02-08

      我把所有代码进行整理,我要的是左右滑动,你这个只能上下滑动,上下简单,左右也行,就是单元格里面无法垂直居中

      2019-02-08
      回复
    • 铭锋科技
      铭锋科技
      2019-02-08回复王永清18905050659

      左右滑动只是简单的把scroll-y改成scroll-x,这是小程序组件的基础属性,垂直居中可以用flex布局轻松搞定,这也只是开发小程序的基础能力,不要什么都是拿来主义,没有人必须为你解决基础问题,好自为之

      2019-02-08
      回复
  • 铭锋科技
    铭锋科技
    2019-02-08

    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>


    2019-02-08
    有用
    回复 2
    • 王永清18905050659
      王永清18905050659
      2019-02-08

      好几个className没有:.sv、table-items-item,第二,你这个能实现左右滑动吗?根据我的经验,你的设计肯定不行。就算能左右滑动,也不可能水平居中,垂直居中

      2019-02-08
      回复
    • 王永清18905050659
      王永清18905050659
      2019-02-08

      都是同道中人,我也是研究了很久,花费了大把精力没办法,才上贴求助。因为我已经连续做了10几个小时,头有点晕,第一次是我没说清楚,后来说了,是要左右滑动,并要求每个单元格上下左右居中,单元格也有表格线。也百度了几十个帖子,没有找到能解决这个问题,估计也没人做出来。不要太傲气,人外有人。

      2019-02-08
      回复
登录 后发表内容