android 上下左右滑动的表格,适用小程序的表格table，冻结行，冻结列，可左右，上下滑动...
更新记录
1.0.0(2020-07-22)
1.暂时适用于微信小程序，
2.点击首列跳转或提示
3.首列合并行，首列背景色不一样
4.点击行变背景色
平台兼容性
app
微信小程序
支付宝小程序
百度小程序
字节小程序
QQ小程序
快应用
2.6.16 app-vue
×
×
×
×
×
×
h5-Safari
Android Browser
微信浏览器(Android)
QQ浏览器(Android)
Chrome
IE
Edge
Firefox
pc-Safari
×
×
×
×
×
×
×
×
×
简易版纵向，横向table，冻结几列，冻结几行，点击变色
参数介绍
tableData(列表数据，一般是后台返回的数据)
tableHead(表头数据，自己定义，这个代表左边区域)
tableHeadT(表头数据，自己定义，这个代表右边区域)
centerList(左边区域第一列的名称)
例子
import mytable from "@/components/mytable/mytable.vue";
export default {
data() {
return {
tableData:[],
tableHead: [
{
name:'核心指标'
},
{
name: '姓名'
},
{
name: '年龄'
},
{
name: '颜色'
},
{
name: '出生地'
},
{
name: '居住地'
},
{
name: '高度'
},
{
name: '宽度'
},
{
name: '重量'
},
{
name: '热度'
},
],
tableHeadT: [
{
name: '姓名'
},
{
name: '年龄'
},
{
name: '颜色'
},
{
name: '出生地'
},
{
name: '居住地'
},
{
name: '高度'
},
{
name: '宽度'
},
{
name: '重量'
},
{
name: '热度'
},
],
centerList:[
{
name:'行政中心',
bgColor:'#ede8f3'
},
{
name:'操作中心',
bgColor:'#dff8dc'
},
{
name:'经营中心',
bgColor:'#d8dbfe'
},
{
name:'转运中心',
bgColor:'#f9fecf'
},
{
name:'运营中心',
bgColor:'#f8bbbb'
},
],
}
},
components: {
mytable
},
onLoad(options){
this.getList()
},
methods: {
getList(){
this.tableData = [
{
name:'小曾',
age:11,
color:'red',
region:'茂名',
address:'深圳',
height:'170cm',
width:'50cm',
weight:'62kg',
hot:'hot'
},
{
name:'小曾',
age:11,
color:'red',
region:'茂名',
address:'深圳',
height:'170cm',
width:'50cm',
weight:'62kg',
hot:'hot'
},
{
name:'小曾',
age:11,
color:'red',
region:'茂名',
address:'深圳',
height:'170cm',
width:'50cm',
weight:'62kg',
hot:'hot'
},
{
name:'小曾',
age:11,
color:'red',
region:'茂名',
address:'深圳',
height:'170cm',
width:'50cm',
weight:'62kg',
hot:'hot'
},
{
name:'小曾',
age:11,
color:'red',
region:'茂名',
address:'深圳',
height:'170cm',
width:'50cm',
weight:'62kg',
hot:'hot'
},
{
name:'小曾',
age:11,
color:'red',
region:'茂名',
address:'深圳',
height:'170cm',
width:'50cm',
weight:'62kg',
hot:'hot'
},{
name:'小曾',
age:11,
color:'red',
region:'茂名',
address:'深圳',
height:'170cm',
width:'50cm',
weight:'62kg',
hot:'hot'
},{
name:'小曾',
age:11,
color:'red',
region:'茂名',
address:'深圳',
height:'170cm',
width:'50cm',
weight:'62kg',
hot:'hot'
},{
name:'小曾',
age:11,
color:'red',
region:'茂名',
address:'深圳',
height:'170cm',
width:'50cm',
weight:'62kg',
hot:'hot'
},{
name:'小曾',
age:11,
color:'red',
region:'茂名',
address:'深圳',
height:'170cm',
width:'50cm',
weight:'62kg',
hot:'hot'
},{
name:'小曾',
age:11,
color:'red',
region:'茂名',
address:'深圳',
height:'170cm',
width:'50cm',
weight:'62kg',
hot:'hot'
},{
name:'小曾',
age:11,
color:'red',
region:'茂名',
address:'深圳',
height:'170cm',
width:'50cm',
weight:'62kg',
hot:'hot'
},{
name:'小曾',
age:11,
color:'red',
region:'茂名',
address:'深圳',
height:'170cm',
width:'50cm',
weight:'62kg',
hot:'hot'
},{
name:'小曾',
age:11,
color:'red',
region:'茂名',
address:'深圳',
height:'170cm',
width:'50cm',
weight:'62kg',
hot:'hot'
},{
name:'小曾',
age:11,
color:'red',
region:'茂名',
address:'深圳',
height:'170cm',
width:'50cm',
weight:'62kg',
hot:'hot'
},
]
},
}
};
写在最后
创作不易，好用请点个赞吧！
android 上下左右滑动的表格,适用小程序的表格table，冻结行，冻结列，可左右，上下滑动...相关推荐
- Android studio开发-单界面单机小程序
Android studio开发-单界面单机小程序 最终结果展示 步骤: 建立项目 file-new-new project 新建一个项目文件 选择一个empty activity 配置项目名称以及项 ...
- 微信小程序上实现 table 表格
微信小程序不支持 table 标签,在网上找到一个使用 flex 来实现表格的简明例子,记录一下. table.wxml <view class="table">< ...
- 小程序 微信统计表格_微信小程序制作表格的方法
本文实例为大家分享了微信小程序制作表格的具体代码. 微信小程序中没有专门的表格制作工具,不过使用列表渲染可以实现, 下面是我做的表格图片: 方法如下: 在XXX.wxml中填写下面的代码 参数 内容 ...
- 设置钉钉小程序里面表格的宽度
背景 在小程序里面显示列表 问题 要求列表里面每一列宽度不一样,最好按比例分配 解决办法 1.尝试使用 表格标签,结果小程序显示不支持,好像小程序没有表格类的标签. 2.使用wxparse解析富文本, ...
- 微信小程序用表格＜table＞＜/table＞查看数据
微信小程序不支持 table 标签,所以自己写了一个,记录一下方便以后可以直接复制使用 图片,可以自己修改样式 index.js,也就是数据,这里写死,可以字自己对接口 ** [ ] index.wx ...
- Android安卓的家教平台设计小程序app毕业设计
Android安卓的家教平台设计小程序app毕业设计
- 微信小程序账号长时间未登录冻结解封
微信小程序账号长时间未登录冻结解封 1.账号找回链接[官方]:http://mp.weixin.qq.com/acct/findacct?action=scan 2.按照官方指引的三个操作步骤进操作, ...
- axure中怎么做出固定首行_办公软件操作技巧078：如何在excel表格中冻结行与列...
在日常工作中,有时我们编辑的excel表格会比较大,数据内容有很多行和列,当我们拖动滚动条找到了离表头比较远的数据行或列的内容时,又看不到行或列表头标题信息了,这时再去处理数据信息就会感觉很不方便,如 ...
- 小程序绘制表格table（表头固定，可上下左右滑动）
某天在写小程序表格时偶然发现小程序没有table标签,在微信小程序社区搜索了一番发现官方给出的说法是view能够满足table样式,足以替代table标签. 以下用原生的小程序代码写了一版简单的表格, ...
最新文章
- 树上问题 ---- Codeforces Round #722 (Div. 1) C. Trees of Tranquillity [dfs序区间的性质+最大不相交区间的性质]
- 我的第二故乡 – 广州
- 马斯克39页火星计划PPT曝光，我们能学到什么
- 「每天一道面试题」下面的代码有问题吗？为什么？
- Attempting to deserialize object on a CUDA device but torch.cuda.is_available() is False
- python3反爬虫原理与绕过实战 网盘_Python 3反爬虫原理与绕过实战
- 前端学习（3258）：js高级教程（2）
- 十大Ajax框架 排名不分先后
- python复杂网络分析_科学网—复杂网络分析库NetworkX学习笔记（3）：网络演化模型 - 闫小勇的博文...
- dw选项卡代码_Dreamweaver中js实现竖向选项卡或滑动门代码！急！！！
- （六）linux中的进程管理
- 2023计算机毕业设计SSM最新选题之javaAI学院教务信息管理系统lx9v9
- 解决Server2008下远程桌面连接“由于没有终端服务器许可证服务器可以提供许可证”
- 控制面板中点击管理工具提示administrative tools 位置不可用的解决办法
- DELL R730xd 安装PCIE SSD 后风扇转速增高的解决方案
- ruoyi数据权限设置
- html5应用缓存教程视频教程,html5——应用缓存
- 国内有那些chia矿池，chia矿池排行那几家比较靠谱
- 字段属性——唯一约束
- 软件测试技能图谱|自学测试路线图
热门文章
- sencha touch + PhoneGap(cordova) 使用 adt eclipse进行打包
- gps ins matlab,GPS和INS联合导航matlab程序（带数据有用的）
- python爬虫（五）：实战 【2. 爬创客实验室（requests + bs4）】
- excel--CLEAN()函数，解决为什么看着相同的字符串但是len()长度不同
- 算法设计与分析作业:小朋友过桥问题(蓝桥杯)
- String的长度是多少？
- IE浏览器下使用localhost域名保存cookie的问题
- 定时发圈，一键转发，跟圈看过来
- 大话小结（2）——创建型模式
- 【调剂】黑龙江科技大学2020年硕士研究生招生预调剂政策