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标签. 以下用原生的小程序代码写了一版简单的表格, ...
最新文章
- Python开发环境配置
- word饼图如何画引导线_网络授课如何手写、标注？
- 《C++ Primer 5th》笔记（7 / 19）：类
- php mysql 字段自增_MySQL自增字段取值的详细介绍（附代码）
- app头像上传vue_当前GitHub上排名前十的热门Vue项目
- Spring 配置文件加载原理
- IO流之流的操作规律
- JavaScript高级教程（函数进阶、闭包、正则表达式、ES6新增语法、新增扩展方法）
- php ddos 防御,PHP DDos的几个防御方法详解
- 【贪玩巴斯】数字信号处理Digital Signal Processing（DSP）——第二节「离散时间信号详解」2021-09-29
- 导弹巡航追踪目标模拟程序(1)源码版--matlab
- 爬取游戏优惠信息，并且将结果发送到邮箱
- mybatis从入门到精通(刘增辉著)-读书笔记第四章
- EAS中的EAS License与Apusic的License区别
- ggg的区别+linux、GNU、GNU/linux
- tensorflow和Python关系
- 解决常见Surface上不了应用商店的问题
- ThinkPHP 6.0 phpspreadsheet操作Excel表格实例
- IPB60R950C6-ASEMI代理英飞凌高压MOS管IPB60R950C6
- HelloCarbide Example详细解读