微信小程序制作表格代码
微信小程序中没有专门的表格制作工具,不过使用列表渲染可以实现,
下面是我做的表格图片:
方法如下:
- 在XXX.wxml中填写下面的代码
<view class="table"><view class="tr bg-w"><view class="th">参数</view><view class="th-2">内容</view></view><block wx:for="{{listData}}" wx:key="{{code}}"><view class="tr bg-g" wx:if="{{index % 2 == 0}}"><view class="td-1" selectable="true">{{item.code}}</view><view class="td-2" selectable="true" scroll-y="true" ><text class="th-text" style="overflow-y:auto;overflow-x:scroll" selectable="true">{{item.text}}</text></view><!--view class="td">{{item.type}}</view--></view><view class="tr bg-g2" wx:else><view class="td-1" selectable="true">{{item.code}}</view><view class="td-2" selectable="true" scroll-y="true" ><text class="th-text" style="overflow-y:auto;overflow-x:scroll" selectable="true">{{item.text}}</text></view></view></block> </view>
- 在XXX.wxss中添加如下代码:
.table {border: 2px solid darkgray;width: 100%;margin-top: 1rem;margin-right: 1rem;margin-left: 1rem;} .tr {display: flex;width: 100%;justify-content: center;height: 3rem;align-items: center; } .td {width:20%;justify-content: center;display: flex;text-align: center;border-right: 2px solid #ddd;height: 100%; } .td-1 {width:19%;justify-content: center;display: flex;text-align: center;border-right: 2px solid #ddd;height: 100%; } .td-2 {width:80%;justify-content: center;border-right: 2px solid #ddd;text-align: left;height: 100%;max-width: 100%;padding: 40rpx 0; } .bg-w{background: #afb4db;} .bg-g{background: #E6F3F9; } .bg-g2{background: #fff; } .th {width: 19%;justify-content: center;color: #fff;display: flex;height: 3rem;align-items: center;border-right: 2px solid #ddd; } .th-2 {width: 80%;justify-content: center;color: #fff;display: flex;height: 3rem;align-items: center;max-height: 3rem;max-width: 80%; }.th-text {width: 80%;justify-content: center;color: #000;display: block;height: 3rem;align-items: center;max-height: 3rem;max-width: 80%; }
- 在XXX.js页面的pages定义下面的数据
var idinfolist = [{ "code": "结果", "text": '' },{ "code": "省", "text": '' },{ "code": "市", "text": '' },{ "code": "县", "text": ''},{ "code": "性别", "text": ''},{ "code": "出生年月", "text": ''},{ "code": "地址", "text": ''} ]Page({data: {listData: idinfolist, inputValue: '', //用于显示输入语句searchinput: '', //用户输入的查询语句})
![](/assets/blank.gif)
![](/assets/blank.gif)
微信小程序制作表格代码相关推荐
- 小程序 微信统计表格_微信小程序制作表格的方法
本文实例为大家分享了微信小程序制作表格的具体代码. 微信小程序中没有专门的表格制作工具,不过使用列表渲染可以实现, 下面是我做的表格图片: 方法如下: 在XXX.wxml中填写下面的代码 参数 内容 ...
- 微信小程序制作简单的商品列表页,实现价格求和
微信小程序制作简单的商品列表页,实现价格求和 准备工作 1.node.js 2.微信开发者工具 目录结构 客户端代码实现 index.wxml <view class="contain ...
- 微信小程序-登录-页面-代码-实现-峯-推荐
学习目标 1.掌握 JAVA入门到进阶知识(持续写作中--) 2.学会Oracle数据库用法(创作中--) 3.手把手教你vbs脚本制作(完善中--) 4.强大的 IDEA编程利器(编写中--) 5. ...
- 微信小程序 table表格 PC版本
公司项目啊....其实小程序页面的商品列表也有宫格.列表.大图模式了,尽管描述得不那么详细,但是信息量也能看到个大概,但是领导或业务员比较喜欢看表格详细点,罗列得比较清晰. 所以要求可以通过小程序分享 ...
- 微信小程序制作——获取用户信息
微信小程序制作--获取用户信息 1.获取用户信息 方式一 wxml <view bindtap="getUserName">获取当前用户名</view> j ...
- 微信小程序星星评分代码片段(含半星)
微信小程序星星评分代码片段(含半星) 代码思路 完整代码 代码片段 图片资源 写代码时需要一个点击星星评分的功能 安卓直接用RatingBar非常轻松的解决了 到了小程序,没有现成的封装方法可以用了, ...
- 微信小程序开发难?资深大V教您微信小程序制作步骤和方法
微信小程序开发难?资深大V教您微信小程序制作步骤和方法 一.登录微信公众平台 就能在菜单"开发"---"基本配置"中看到小程序的AppID了,小程序的 Ap ...
- 个人怎么制作微信小程序,微信小程序可以免费制作吗?微信小程序制作教程
微信小程序 微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打开应 ...
- html制作炸金花,微信小程序怎么制作炸金花?微信小程序制作炸金花的方法
很多朋友喜欢玩炸金花游戏,那么怎么在微信小程序上制作炸金花呢?下面就是小编带来的完整详细的教程,想要学习的小伙伴就赶紧看过来吧. 微信小程序怎么制作炸金花?微信小程序制作炸金花的方法 app.json ...
- 零基础也能学会的微信小程序制作动态搜索页
零基础也能学会的微信小程序制作动态搜索页 准备工作: 微信开发者工具 APPID或测试号 创建一个JavaScript基本框架(如下图) 最终效果: 动手做起来吧~ index.wxml <vi ...
最新文章
- MySQL Replace INTO的使用
- java第一份工作_Java 学到什么程度可以找到第一份工作 ?
- Java监听器的用法(一):内部类监听器
- C#发布程序添加其他程序文件
- XML——使用 XPath来定位信息+使用命名空间
- php 路由实现_PHP操作路由器实现方法示例
- Android -- ViewGroup源码分析+自定义
- 25. 自定义Git
- 计算机木材染色 配色技术的应用技术,计算机配色技术在木材连缸染色中的应用研究.pdf...
- 最短哈密顿环 退火_模拟退火法计算最短路径 用 高效的 图论中哈密顿贿赂的 AI...
- Grafana Tempo简介
- 部署DoraCloud实现桌面虚拟化,一款非常简单方便的桌面虚拟化管理平台
- GradientDrawable 渐变背景使用
- Docker学习之day01 Docker的前世今生
- yigo基础学习笔记4_业务流程
- 如何将诸如Acrobat Reader DC等默认安装在C盘的软件,安装在非系统盘?
- 深度搜索解决数独游戏
- 2022年中国智能家居产业链图谱 | 产业链全景图
- 融媒体时代背景下计算机应用,融媒体背景论文10篇_发表之家
- 精确度,召回率,真阳性,假阳性
热门文章
- Java微信支付APIV3密钥生成全过程
- 时间片轮转调度算法详解
- ISSCC 2018 13.2论文笔记
- 【持续更新】MARL 算法汇总
- 单片机光敏电阻c语言程序怎么写,光敏传感器原理图 单片机程序及光敏电阻简介文档下载...
- android 海康云眸SDK简单使用
- 威纶触摸屏485轮询通讯_威纶通触摸屏与PLC实现一机多屏通讯方法
- 【电脑维修系列】妈妈再也不用担心 我装不了电脑系统 全攻略
- php渐变闪动字体代码,33种超好看彩色闪字渐变代码分享
- 自由曲面透镜设计matlab,实现LED台灯均匀照明的自由曲面透镜仿真设计