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


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检测输入的字符串包含的中英文的数量
Apr 17 Javascript
jQuery实现伪分页的方法分享
Feb 17 Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 Javascript
基于angularJS的表单验证指令介绍
Oct 21 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
Mar 07 Javascript
Webpack实现按需打包Lodash的几种方法详解
May 08 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
Dec 07 Javascript
vue实现提示保存后退出的方法
Mar 15 Javascript
node puppeteer(headless chrome)实现网站登录
May 09 Javascript
vue 使用自定义指令实现表单校验的方法
Aug 28 Javascript
vuex存值与取值的实例
Nov 06 Javascript
vue实现移动端H5数字键盘组件使用详解
Aug 25 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与MySQL开发中页面乱码的产生与解决
2008/03/27 PHP
PHP关于IE下的iframe跨域导致session丢失问题解决方法
2013/10/10 PHP
PHP实现图片压缩的两则实例
2014/07/19 PHP
thinkphp配置文件路径的实现方法
2016/08/30 PHP
Thinkphp事务操作实例(推荐)
2017/04/01 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
防止登录页面出现在frame中js代码
2014/07/22 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
基于Datatables跳转到指定页的简单实例
2017/11/09 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
Vue + better-scroll 实现移动端字母索引导航功能
2018/05/07 Javascript
vue v-model动态生成详解
2018/06/30 Javascript
vue-cli监听组件加载完成的方法
2018/09/07 Javascript
React通过redux-persist持久化数据存储的方法示例
2019/02/14 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
一篇文章看懂JavaScript中的回调
2021/01/05 Javascript
教你安装python Django(图文)
2013/11/04 Python
Python兔子毒药问题实例分析
2015/03/05 Python
Python安装使用命令行交互模块pexpect的基础教程
2016/05/12 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
Django获取该数据的上一条和下一条方法
2019/08/12 Python
python如果快速判断数字奇数偶数
2019/11/13 Python
15行Python代码实现免费发送手机短信推送消息功能
2020/02/27 Python
基于python纯函数实现井字棋游戏
2020/05/27 Python
python怎么判断素数
2020/07/01 Python
利用CSS3实现的文字定时向上滚动
2016/08/29 HTML / CSS
详解window.open被浏览器拦截的解决方案
2019/07/18 HTML / CSS
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
保健品市场营销方案
2014/03/31 职场文书
听课评语大全
2014/04/30 职场文书
推广活动策划方案
2014/08/23 职场文书
申报优秀教师材料
2014/12/16 职场文书
小学少先队活动总结
2015/05/08 职场文书
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript