微信小程序制作表格的方法


Posted in Javascript onFebruary 14, 2019

本文实例为大家分享了微信小程序制作表格的具体代码。

微信小程序中没有专门的表格制作工具,不过使用列表渲染可以实现,

下面是我做的表格图片:

微信小程序制作表格的方法

方法如下:

在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: '', //用户输入的查询语句
 })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS TextArea字符串长度限制代码集合
Oct 31 Javascript
js中用window.open()打开多个窗口的name问题
Mar 13 Javascript
javascript 判断页面访问方式电脑或者移动端
Sep 19 Javascript
node.js发送邮件email的方法详解
Jan 06 Javascript
微信小程序 图片宽度自适应的实现
Apr 06 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
Dec 05 Javascript
JS实现图片旋转动画效果封装与使用示例
Jul 09 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
Oct 26 Javascript
JavaScript键盘事件常见用法实例分析
Jan 03 Javascript
微信小程序实现类似微信点击语音播放效果
Mar 30 Javascript
Vue中错误图片的处理的实现代码
Nov 07 Javascript
封装 axios+promise通用请求函数操作
Aug 11 Javascript
手把手带你封装一个vue component第三方库
Feb 14 #Javascript
微信小程序实现简单表格
Feb 14 #Javascript
手挽手带你学React之React-router4.x的使用
Feb 14 #Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 #jQuery
vue中各种通信传值方式总结
Feb 14 #Javascript
微信小程序实现banner图轮播效果
Jun 28 #Javascript
如何使用VuePress搭建一个类型element ui文档
Feb 14 #Javascript
You might like
动易数据转成dedecms的php程序
2007/04/07 PHP
解析crontab php自动运行的方法
2013/06/24 PHP
深入PHP购物车模块功能分析(函数讲解,附源码)
2013/06/25 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
YII使用url组件美化管理的方法
2015/12/28 PHP
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
php微信公众号开发之欢迎老朋友
2018/10/20 PHP
Aster vs KG BO3 第一场2.18
2021/03/10 DOTA
用js实现多域名不同文件的调用方法
2007/01/12 Javascript
JavaScript使用prototype定义对象类型
2007/02/07 Javascript
鼠标滚轮控制网页横向移动实现思路
2013/03/22 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
2016/01/04 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
JQuery实现简单的服务器轮询效果实例
2016/03/31 Javascript
js创建jsonArray传输至后台及后台全面解析
2016/04/11 Javascript
详解封装基础的angular4的request请求方法
2018/06/05 Javascript
JavaScript ES6中的简写语法总结与使用技巧
2018/12/30 Javascript
layui多图上传实现删除功能的例子
2019/09/23 Javascript
pymongo为mongodb数据库添加索引的方法
2015/05/11 Python
Python中的ctime()方法使用教程
2015/05/22 Python
Python 读取某个目录下所有的文件实例
2018/06/23 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
会展中心部门工作职责
2013/11/27 职场文书
护理专业学生的求职信范文
2013/12/11 职场文书
幼儿园大班毕业感言
2014/02/06 职场文书
高中打架检讨书
2014/02/13 职场文书
吃空饷专项治理工作实施方案
2014/03/04 职场文书
竞聘书怎么写,如何写?
2014/03/31 职场文书
募捐倡议书
2014/04/14 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
2015年国际护士节演讲稿
2015/03/18 职场文书
不服劳动仲裁起诉书
2015/05/20 职场文书
2015年煤矿安全工作总结
2015/05/23 职场文书
民事调解协议书
2016/03/21 职场文书