公告列表
公告列表
收藏
回答

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
      赞
      回复
请 登录 后发表内容
相关问题
相关文档