微信小程序制作表格

最新推荐文章于 2024-07-30 23:42:08 发布
最新推荐文章于 2024-07-30 23:42:08 发布
阅读量3.1k 收藏 2
点赞数
分类专栏： 微信小程序 文章标签： 微信小程序表格制作
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41715982/article/details/82758794
版权
本文介绍了如何在微信小程序中创建表格。通过提供WXML页面设计代码和WXSS样式布局代码，展示了如何构建一个简单的表格，包括行和单元格的设置，以及边框和填充颜色的样式处理。
摘要由CSDN通过智能技术生成

一.页面wxml设计代码:

 

<view class="container" bindtouchstart='containerTap1'>

<view class="table" >

<view class="tr" wx:for="{ {1}}">

<view class='td' bindtap="XiuXian" style='background-color:{ {TbBackgroundColor}}'> 休闲</view>

<view class="td"> 益智</view>

</view>

<view class="tr" wx:for="{ {1}}">

<view class='td'> 技能</view>

<view class="td"> 直播</view>

</view>

<view class="tr" wx:for="{ {1}}">

<view class='td'> 运动</view>

<view class="td"> 体育</view>

</view>

</view>

</view>

二.样式wxss布局代码

最低0.47元/天 解锁文章
一一冷一一
关注
专栏目录
微信小程序--表格制作
weixin_44531304的博客
04-04 1293
实现效果 实现过程： –js– wx.request({ url: "http://health.ia.ac.cn:5007/checklistParameters/getChecklistParametersByListId?listId=13985", method: "POST", data: { }, header: { "Co...
微信小程序:好看的表格样式
weixin_40762926的博客
10-15 9516
一个在微信小程序中创建表格的demo 效果图 最后做出来大概就是这个样子的，先看下设计图：（画的真好看） 设计图 然后再看下数据返回的格式： 数据返回格式 这数据...o.0... 分析数据得知，后台返回的数据远比设计图上描绘的复杂，内容是不固定的，而且需要显示一周的排班 个人思路：用scroll-view来做，整个表格按 -行- 分为4大块：排班、上午、下午、晚上。 ①先将从今天开始往后7天的日期放到数组中，作为第一大块的数据源 ②循环遍历数据，...
【愚公系列】《AIGC辅助软件开发》018-AI辅助后端编程：快速生成接口文档
最新发布
时光隧道
07-30 1万+
在现代软件开发的过程中，接口文档的编写与维护是一项不可或缺的工作。良好的接口文档不仅能够提高团队之间的沟通效率，还能帮助开发者更快地理解和使用系统的功能。然而，传统的文档编写往往耗时耗力，容易出现版本不一致和信息缺失的问题。随着人工智能技术的不断进步，AI辅助编程工具的出现为这一难题提供了全新的解决方案。本文将探讨如何利用AI技术，特别是ChatGPT等智能助手，快速生成高质量的接口文档。我们将介绍一些实用的方法和工具，展示如何通过AI自动化文档生成的过程，从而减少人工干预，提高文档的准确性和一致性。
微信小程序手写table表格
zybijiso666的博客
11-15 1045
wxss:想加其他样式得可以自己+总结：有循环的可以自己填写数据。
微信小程序开发表格demo
03-08
小程序开发表格demo，### wx:for在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
微信小程序开发
bjyxszd2222的博客
02-29 1303
微信小程序基本内容 一、微信小程序开发 1.申请账号 第一步，你需要拥有一个小程序帐号，通过这个帐号你就可以管理你的小程序。 第二步，接着你需要申请账号，进入小程序注册页 根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。在这个小程序管理平台，你可以管理你的小程序的权限，查看数据报表，发布小程序等操作。登录 小程序后台 ，我们可以在菜单 “开发”-“开发设置” 看到小程序的 AppID...
微信小程序实现简单表格
10-17
主要介绍了微信小程序实现简单表格，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序制作表格的方法
10-17
主要为大家详细介绍了微信小程序制作表格的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
一秒学会微信小程序制作table表格
01-21
大家都知道微信小程序自身没有提供表格这个组件，但是今天的项目需求又出现了，所以只能模仿一个了。 效果图： 代码挺简单方便的： wxml: 日期 时间 伤害 <view class=tr wx:for={{1
个人简历微信小程序源码
05-30
个人简历微信小程序源码
课程表微信小程序源码 快速开发教务管理应用
12-18
课程表微信小程序源码 快速开发教务管理应用 对接微信公众号每日课表推送 三种导入课表方式可供选择 班级课表导入 爬虫导入课表 学号导入课表
小程序表单（个人资料编辑）的Demo
03-28
小程序的表单demo，包含姓名、生日选择器、籍贯选择器、等字段功能
微信小程序实现的绘制table表格功能示例
10-17
主要介绍了微信小程序实现的绘制table表格功能,涉及微信小程序数据读取及界面布局相关操作技巧,需要的朋友可以参考下
微信小程序开发中的数据可视化与图表展示
吃不胖.
06-15 323
二、使用Canvas绘制图表 除了使用第三方图表库，我们也可以使用微信小程序中的Canvas绘制图表。一、引入第三方图表库 为了方便实现数据可视化和图表展示，我们可以引入一些第三方图表库，如ECharts、F2等。这些图表库提供了丰富的图表类型和功能，可以满足各种数据展示需求。综上所述，通过引入第三方图表库和使用Canvas绘制图表，我们可以在微信小程序中实现丰富的数据可视化和图表展示功能。在微信小程序开发中，数据可视化和图表展示是非常重要的功能，它们可以帮助用户更好地理解和分析数据。
微信小程序实现课程表
热门推荐
苏苏就是小苏苏的博客
08-12 1万+
微信小程序实现一个可爱的课程表
动手撸一个微信小程序学生课程表页面
weixin_34221773的博客
06-03 2831
分解 仔细看完课程表页面，我们可以把页面分解： 顶部一栏:周一到周日。 左侧一栏:第1-12节课。 中间部分灰色虚线和午休的红线。 遍历具体课程，并绘制。 开始写代码 顶部： 使用wx的for循环 &lt;view class="top"&gt; &lt;view wx:for="{{['一','二','三','四','五','六','日']}}" class="top-text"&gt...
2024年echarts饼图如何去掉指示线指示文字_echarts饼图去掉标签，面试必备
2401_85012069的博客
05-14 1144
legend: {data: []},series : [name: ‘访问来源’,label: {normal: {},data:[{value:335, name:‘直接访问’},{value:310, name:‘邮件营销’},{value:234, name:‘联盟广告’},{value:135, name:‘视频广告’},{value:1548, name:‘搜索引擎’}],},
小程序基本命令
aiven1637的博客
10-30 3314
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
微信小程序制作一个表格
06-08
要制作一个表格，需要用到小程序的<scroll-view>、<view>、<text>等组件。 以下是一个简单的例子： 1. 在wxml中编写表格的结构： ``` <scroll-view class="table-container"> <view class="table-header"> <text class="table-cell">姓名</text> <text class="table-cell">年龄</text> <text class="table-cell">性别</text> </view> <view class="table-row"> <text class="table-cell">小明</text> <text class="table-cell">18</text> <text class="table-cell">男</text> </view> <view class="table-row"> <text class="table-cell">小红</text> <text class="table-cell">20</text> <text class="table-cell">女</text> </view> </scroll-view> ``` 2. 在wxss中编写表格的样式： ``` .table-container { height: 300rpx; width: 100%; border: 1rpx solid #ccc; overflow: scroll; } .table-header { display: flex; flex-direction: row; justify-content: space-between; background-color: #f5f5f5; border-bottom: 1rpx solid #ccc; } .table-row { display: flex; flex-direction: row; justify-content: space-between; border-bottom: 1rpx solid #ccc; } .table-cell { width: 33.3%; text-align: center; } ``` 3. 在js中添加数据： ``` Page({ data: { tableData: [ {name: "小明", age: 18, gender: "男"}, {name: "小红", age: 20, gender: "女"} ] } }) ``` 4. 在wxml中使用数据渲染表格： ``` <scroll-view class="table-container"> <view class="table-header"> <text class="table-cell">姓名</text> <text class="table-cell">年龄</text> <text class="table-cell">性别</text> </view> <view wx:for="{{tableData}}" wx:key="index" class="table-row"> <text class="table-cell">{{item.name}}</text> <text class="table-cell">{{item.age}}</text> <text class="table-cell">{{item.gender}}</text> </view> </scroll-view> ``` 这样就可以制作一个简单的表格了。你可以根据自己的需求，对表格进行进一步的美化和优化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值