小程序table 表格+小程序table 表格太长显示不全，实现滚动效果

<view style="margin:15px"><van-row><van-col span="20"><van-field value="{{ name }}"  border="{{ false }}" disabled is-link bindtap="showPopup"   label="传感器类别："/></van-col><van-col span="4"><van-button type="primary" size="small" style="  line-height: 90rpx;" bindtap="getCategoryArr">查询</van-button></van-col> </van-row><view class="table" style="margin-top:15px"><view class="tr"><view class="th">参数</view><view class="th" wx:for="{{headerList}}" wx:key="{{item1}}">{{item.title}}</view></view><view class="tr" wx:for="{{bodyList}}" wx:key="{{item2}}" data-index="{{index}}"><view class="td" wx:if="{{index==0}}">最大值</view><view class="td" wx:if="{{index==1}}">最小值</view><view class="td" wx:if="{{index==2}}">典型值</view><view class="td" wx:if="{{index==3}}">单位</view><view class="td" wx:if="{{index==4}}">精度</view>  <view class="td" wx:if="{{item.param0}}">{{item.param0}}</view><view class="td" wx:if="{{item.param1}}">{{item.param1}}</view><view class="td" wx:if="{{item.param2}}">{{item.param2}}</view></view></view>

.js

const api = require('../../utils/api.js') // 引入api接口管理文件 Page({data: {headerList: [], //表头bodyList: [], //表身体categoryArr: [],// //弹出层控制show: false,id: '',name: '',},/*** 生命周期函数--监听页面加载*/onLoad: function (option) {this.getinfo()this.getCategoryArr()},// 获取 下拉框信息 getinfo() {api._get('/oil/queryTranList/' + wx.getStorageSync('userId'), {}).then(res => {console.log(res)let arr = []res.bodyList.forEach((item, index) => {for (const key in item) {item[key] = item[key] ? item[key] : '-'}arr.push(item)})this.setData({name: res.tranList[0].name,headerList: Object.assign([], res.headerList),bodyList: Object.assign([], arr),categoryArr: Object.assign([], res.tranList),})}).catch(e => {console.log(e)})},// 查询获取getCategoryArr() {api._get('/oil/tranInfo/' + this.data.id, ).then(res => {let arr = []res.bodyList.forEach((item, index) => {for (const key in item) {item[key] = item[key] ? item[key] : '-'}arr.push(item)})this.setData({headerList: Object.assign([], res.headerList),bodyList: Object.assign([], res.bodyList),})}).catch(e => {console.log(e)})},//选择器 点击完成按钮时触发onConfirm(event) {this.setData({'id': event.detail.value.id,'name': event.detail.value.name,show: false,});},//选择器 点击取消按钮时触发categoryOnClose() {this.setData({show: false});},//点击触发弹出框showPopup() {this.setData({show: true});},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载 */onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {},
})

.wxss

page {height: 100%;  font-size: 30rpx;
}
/* table */
.table {border: 1px solid #dadada;border-right: 0;border-bottom: 0;width: 98%;font-size: 30rpx;
}.tr {width: 100%;display: flex;justify-content: space-between;
}.th,
.td {padding: 10px;border-bottom: 1px solid #dadada;border-right: 1px solid #dadada;text-align: center;width: 100%
}.th {font-weight: 400;background-color: #dadada
}
/*  */
.dynamic {margin-top: 15rpx;width: 100%;background: white;
}.van-field__label--disabled {color: #646566 !important;
}.van-field__control {color: #323233 !important;
}
.boxxx {width:100%;height:600rpx;background-color: dadada;
}

Table数据量太多滚动

<view class="group"><view class="group-title">历史报警</view><view class="group-explain" style="color:red">注：横向内容过多时，可选择左右滑动。</view> <view class="table-wrap"><table  header-row-class-name="header-class"headers="{{tableHeader2}}" data="{{ row }}" border="{{ border }}"/>
</view>
</view>

.js

const api = require('../../utils/api.js') // 引入api接口管理文件
const app = getApp()
Page({data: {date:'2021-11-28 16:03:15',disabled:false,//设置是否能点击 false可以 true不能点击startDate: '2021-11-28 16:03:15',endDate: '2028-11-29 16:03:15',placeholder:'查询开始时间',date1:'2021-11-28 16:03:15', startDate1: '2021-11-28 16:03:15',endDate1: '2028-11-29 16:03:15',placeholder1:'查询结束时间',month: '',user_name: '',  tableHeader2:[{prop: 'id',width: 150,label: '序号',},{prop: 'createTime',width: 150,label: '日期时间',},{prop: 'type',width: 152,label: '事件类型'},{prop: 'describe',width: 152,label: '事件描述'},{prop: 'nowValue',width: 110,label: '当前值'},{prop: 'warningValue',width: 110,label: '报警值'}],stripe: true,border: true,outBorder: true,height: '150px',row:[], row1:[], msg: '没有打卡记录哦～'},/*** 生命周期函数--监听页面加载*/onLoad: function () {},getCategoryArr(){api._get('/oil/queryWarningList', {starTime:this.data.date,endTime:this.data.date1}).then(res => { if (res.code ==500) {wx.showToast({title: res.msg,icon: 'none',duration: 2000})return false}let arr = []  res.warningEntities.forEach((item, index) => {for (const key in item) {item[key] = item[key] ? item[key] : '-'}arr.push(item)})this.setData({ row: Object.assign([],  arr), })}).catch(e => {console.log(e)})},/*** 日历控件绑定函数 * 点击日期返回*/
onPickerChange: function (e) {console.log(e.detail);this.setData({date: e.detail.dateString, })
}, onPickerChange1: function (e) {console.log(e.detail);this.setData({date1: e.detail.dateString})
},
})

.wxss

.van-buttonone{margin: 20rpx;
}
.container {padding: 30rpx;
}
.group {margin-bottom: 60rpx;
}
.group .group-title {margin-bottom: 30rpx;font-size: 34rpx;font-weight: 700;color: #333;
}
.group .group-explain {margin-bottom: 20rpx;font-size: 28rpx;color: #666;
}.header-class {border: 1rpx solid #55C355;background-color: #77c1f3;color: #fff!important;font-size: 28rpx;
}
.header-class .td:first-child {color: #55C355;
}
.row-class:nth-child(2n) {background-color: #c1e4c175;
}

小程序table 表格+小程序table 表格太长显示不全，实现滚动效果相关推荐

web前端工作笔记008---jQuery table jstable的使用方法,字符串太长显示...初始化显示数据
技术交流QQ群[JAVA,C++,Python,.NET,BigData,AI]:170933152 刷新表格: 下面这样刷新,需要这两行 var pages = _table.page.info() ...
【word】word表格不自动跨页，文字显示不全
@[TOC]word表格不自动跨页,文字显示不全需要设置当前表格的属性,选择行->不勾选[指定高度]属性->勾选[允许跨页断行]属性
excel导出java不完整_有关Java POI导出excel表格中，单元格合并之后显示不全的解决方法。...
我在table变换excel之后发现合并的单元格不能显示全部边框,在网上找了半天解决方案,终于解决了.具体解决代码如下; /** * 设置合并单元格的边框样式 * * @param sheet 当前表 ...
小技巧-解决电脑文件名太长显示不完整问题
如图,在浏览电脑文件的时候,文件名太长的文件信息有时候显示不完整. 我们想要电脑显示出完整的文件信息,怎么办呢?我试验了一下,有以下三种方法. 1.直接用鼠标左右拖动属性行 | 的位置进行列宽调整. ...
小程序vant tab组件解决文字过多显示不全的问题
使用小程序时,某些分类名称可能会过长,导致tab组件显示就会出现下图显示不全的问题. 方法步骤 1. 增加tab-class标签样式类  <v ...
excel 科学计数法转换成文本完整显示_表格技巧—Excel里身份证号码显示不全的多种解决办法...
运用Excel表格可以快速统计和汇总数据,那么当在表格当中输入身份证号码时,表格通常显示不完全,这是为什么呢,今天小编就来给大家详细介绍当身份证号码显示不全时的多种解决办法,一起来学习一下吧. 首先, ...
excel表格数字显示不全_表格技巧—Excel里身份证号码显示不全的多种解决办法...
运用Excel表格可以快速统计和汇总数据,那么当在表格当中输入身份证号码时,表格通常显示不完全,这是为什么呢,今天小编就来给大家详细介绍当身份证号码显示不全时的多种解决办法,一起来学习一下吧. 首先, ...
微信小程序之获取后台动态数据表格布局display:table
微信小程序之获取后台动态数据表格布局display:table 猿来独往 2018-09-02 本文没有采用flex布局和grid布局来设置表格的,而是通过 display: table;来设置. 一 ...
python翻译程序-python实现翻译word表格小程序
背景原是弱电集成的设计员,纠结很久后参加了python培训机构转职后的一员小白,由于一次工作中需要翻译一份近100页word表格,纯手工翻译大概三个小时,为了解决这种重复又耗时的劳动,并重温pyth ...

小程序table 表格+小程序table 表格太长显示不全，实现滚动效果

Table数据量太多滚动

小程序table 表格+小程序table 表格太长显示不全，实现滚动效果相关推荐

最新文章

热门文章