微信小程序制作表格代码
来源:互联网 发布:js按钮点击事件隐藏 编辑:程序博客网 时间:2024/06/05 22:55
微信小程序中没有专门的表格制作工具,不过使用列表渲染可以实现,
下面是我做的表格图片:
方法如下:
- 在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: '', //用户输入的查询语句})
小程序体验:扫下面的二维码
完整代码下载:
智能生活宝-智能对话小程序Demo下载
技术交流群:
阅读全文
0 0
- 微信小程序制作表格代码
- 表格制作
- 表格制作
- javascript结合Ajax制作的可编辑表格代码
- Swing制作表格鼠标获取所选行的代码
- gns3从代码开始制作安装程序
- 制作微信小程序组件
- 制作微信小程序组件
- 专业制作微信小程序
- 微信小程序怎么制作
- 微信小程序制作
- 微信小程序----简易table表格
- 细线表格制作
- 网页表格制作 转
- 网页表格制作进阶
- 表格特效制作
- div 表格制作
- javaScript制作下拉表格
- C++模版类的声明与定义
- 重定向与管道命令
- 剑指offer 练习四(Java版)
- HDU 4825 Xor Sum (01字典树模板题)
- hdu1596 find the safest road(DijKstra模板简单变形)
- 微信小程序制作表格代码
- maven设置了bootclasspath
- nginx+tomcat+memcache配置
- 第11期 《精品干货》2017年7月刊
- Error:Execution failed for task ':app:compileReleaseJavaWithJavac'
- http和https的区别
- python 动态导入 __import__()函数
- PHP之Linux(二) 基本命令
- [Unity] A-Star(A星)寻路算法