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


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 相关文章推荐
jquery实现心算练习代码
Dec 06 Javascript
jQuery动态星级评分效果实现方法
Aug 06 Javascript
JSONObject使用方法详解
Dec 17 Javascript
jQuery 实现评论等级好评差评特效
May 06 Javascript
ES6中Math对象新增的方法实例详解
Apr 25 Javascript
webpack学习笔记之优化缓存、合并、懒加载
Aug 24 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
Jan 26 Javascript
js Element Traversal规范中的元素遍历方法
Apr 19 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
Dec 05 Javascript
js form表单input框限制20个字符,10个汉字代码实例
Apr 12 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 Javascript
浅析JavaScript中的变量提升
Jun 01 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
php中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
如何利用php array_multisort函数 对数据库结果进行复杂排序
2013/06/08 PHP
linux mint下安装phpstorm2020包括JDK部分的教程详解
2020/09/17 PHP
弹出广告特效代码(一个IP只弹出一次)
2007/05/11 Javascript
JS代码放在head和body中的区别分析
2011/12/01 Javascript
javascript图像处理—仿射变换深度理解
2013/01/16 Javascript
JS代码同步文本框内容的实例方法
2013/07/12 Javascript
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
2014/11/23 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
2014/12/08 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
jQuery中DOM树操作之复制元素的方法
2015/01/23 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
JavaScript常用数组算法小结
2016/02/13 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
JS数组搜索之折半搜索实现方法分析
2017/03/27 Javascript
NodeJs模拟登陆正方教务
2017/04/28 NodeJs
深入理解Node.js中通用基础设计模式
2017/09/19 Javascript
详解vue.js之props传递参数
2017/12/12 Javascript
自定义PC微信扫码登录样式写法
2017/12/12 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
2019/10/12 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
在cmd命令行里进入和退出Python程序的方法
2018/05/12 Python
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
Windows下PyCharm安装图文教程
2018/08/27 Python
django使用django-apscheduler 实现定时任务的例子
2019/07/20 Python
Python使用内置函数setattr设置对象的属性值
2020/10/16 Python
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
德国大型和小型家用电器网上商店:Energeto
2019/05/15 全球购物
德国家具购物网站:Möbel Höffner
2019/08/26 全球购物
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
某公司C#程序员面试题笔试题
2014/05/26 面试题
银行毕业实习自我鉴定
2013/09/19 职场文书
FFmpeg视频处理入门教程(新手必看)
2022/01/22 杂记