小程序:表格上下左右滚动

小程序:列表上下左右滚动

axml:

<view  style="height:80%;width:100%;margin-top:10%;" ><scroll-view scroll-y="true" style="height:100%;width:100%;" bindscroll="scroll" onScrollToLower="addmore" scroll-top="{{scrollTop}}"><view class="top"></view><view class="wrapper"><view class="main"><view class="left"><view class="line"></view></view><view class="right"><view class="right-wrapper"><view class="line"><view class="table1" ><view class="table-tr1"><view class="table-th1">序号</view><view class="table-th1">姓名</view><view class="table-th1">部门</view><view class="table-th1">订餐时间</view><view class="table-th1">定餐类型</view><view class="table-th1">价格</view><view class="table-th1">访客数量</view><view class="table-th1">来访单位</view><view class="table-th1">创建时间</view></view><view class="table-tr1" a:for="{{detailelist}}"><view class="table-td1">{{++index}}</view><view class="table-td1">{{item.name}}</view><view class="table-td1">{{item.department}}</view><view class="table-td1">{{item.reservationStart}}->{{item.reservationEnd}}</view><view class="table-td1"><view style="display:inline-block" a:if="{{item.breakfast==1}}">早</view><view style="display:inline-block" a:if="{{item.lunch==1}}">午</view><view style="display:inline-block" a:if="{{item.supper==1}}">晚</view></view><view class="table-td1">{{item.reservationMoney}}</view><view class="table-td1">{{item.visitorNum}}</view><view class="table-td1">{{item.visitorDepartment}}</view><view class="table-td1">{{item.creattime}}</view></view></view ></view></view></view></view></view></scroll-view></view>

acss:

.table1, .table1 div {margin: 0 auto;}.table1 {margin-top:8%;display: table;/* //合并边框 */border-collapse: collapse;box-sizing: border-box;}.table-tr1 {/* //此元素会作为一个表格行显示（类似 <tr>） */display: table-row;height: 40px;}.table-th1 {/* //此元素会作为一个表格单元格显示（类似 <td> 和 <th>） */display: table-cell;width: 24%;font-weight: bold;border: 2px solid rgb(0,115,95);text-align: center;vertical-align: middle;}.table-td1 {display: table-cell;width: 24%;border: 2px solid rgb(0,115,95);text-align: center;vertical-align: middle;}.top{position: fixed;top: 0;left: 0;right: 0;height: 50rpx;text-align: center;z-index: 1;}.wrapper{padding-top: 50rpx;width:1000rpx;overflow-x: hidden;/* overflow-y: hidden; */position: relative;height: 100%;}.left{position: absolute;width: 10rpx;}.right{padding-left: 50rpx;width: 100%;}.right-wrapper{width: 600rpx;overflow-x: auto;/* overflow-y: auto; */}.line{white-space: nowrap;}.scllo{white-space: nowrap;//不换行}

js:

data:{detailelist: [{name:'1',department:'sas',reservationStart:'2020-01-02',reservationEnd:'2020-03-04',breakfast:'1',lunch:'0',supper:'0',reservationMoney:'3332',visitorNum:'2',visitorDepartment:'cc',creattime:'1990-02-02'},{name:'2',department:'sas',reservationStart:'2020-01-02',reservationEnd:'2020-03-04',breakfast:'1',lunch:'0',supper:'0',reservationMoney:'3332',visitorNum:'2',visitorDepartment:'cc',creattime:'1990-02-02'},],}

说明：表格内容既可以上下滑动，也可以左右滑动。

小程序:表格上下左右滚动相关推荐

微信小程序表格列冻结功能的实现
微信小程序表格列冻结功能的实现 **由于公司项目功能需求:查询日考勤报表,如图,用户需要增加横向滚动功能,重点是冻结年月日这列,就像EXCEL那样. 效果如下: 微信小程序表格列冻结功能的实现.mp4 ...
微信小程序里页面滚动到底部
小程序页面要滚动到页面的底部,可以写上以下这句: wx.pageScrollTo({ scrollTop: 1000 }) 在需要触发的地方写上这句,就会滚动到页面的底部了.
小程序scroll-view，滚动到最低_小程序滚动到底部
小程序scroll-view,滚动到最低_小程序滚动到底部小程序滚动条,滚到最底部解决方案1 小程序滚动到底部使用Scorll-view实现方案: scrill-view:组件要固定高度. scro ...
微信小程序页面上下滚动、左右滑动（二）
系列文章目录微信小程序页面上下滚动.左右滑动(一) 文章目录系列文章目录前言项目结构解决问题1 1.pretest页面 2.test页面解决问题2 总结参考前言在上一篇文章,讲解了再 ...
【Flutter实现表格上下左右滚动】
[Flutter实现表格上下左右滚动]9.29 一.需求以及设计效果: 水平滑动时,表格第一列和第二列固定不动: 铅直滑动时,表格第一行固定不动: 一.设计思路 (1)样式绘制:将表格划分为四块: 左 ...
微信小程序页面竖向滚动逻辑
微信小程序页面竖向滚动逻辑 1.实现下面类似的数组注:下面这个生成的数组最好是整数,滑动的时候会失去精度的,要不然你永远会差一点,让你崩溃的.而且你永远不知道差在哪里. this.leftScrol ...
解决微信小程序ios端滚动卡顿的问题
解决微信小程序ios端滚动卡顿的问题参考文章: (1)解决微信小程序ios端滚动卡顿的问题 (2)https://www.cnblogs.com/goloving/p/10563472.html 备 ...
php小程序 100行左右,微信小程序左右分类滚动列表
今天需求个类似得到app分类的功能,效果如图: 左右分别滚动,互不干扰,先把简单的布局和样式搭好. 左侧分类右侧顶部分类右侧列表 .flex_row{display: flex;flex-dire ...
零基础也能学会的微信小程序制作横向滚动布局
零基础也能学会的微信小程序制作横向滚动布局准备工作: 微信开发者工具 APPID或测试号创建一个JavaScript基本框架(如下图) 动手做起来吧~ index.wxml 最终效果: <! ...

小程序:表格上下左右滚动

小程序:表格上下左右滚动相关推荐

最新文章

热门文章