当前位置: 首页 > 编程笔记 >

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

严阳夏
2023-03-14
本文向大家介绍微信小程序制作表格的方法,包括了微信小程序制作表格的方法的使用技巧和注意事项,需要的朋友参考一下

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

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

下面是我做的表格图片:

方法如下:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍微信小程序实现简单表格,包括了微信小程序实现简单表格的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了微信小程序实现简单表格的具体代码,供大家参考,具体内容如下 效果图: wxml wxss js 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍微信小程序的分类页面制作,包括了微信小程序的分类页面制作的使用技巧和注意事项,需要的朋友参考一下 微信小程序实的分类页面制作 先上效果图。 这个界面布局难度不是很大,css基础好的,很快就实现了,分类界面,左边是一级目录,右边是一级目录对应的二级目录,根据 这个需求,我们数据设计的结构一定是数组嵌套数组,第一个数组包含一级目录数据,嵌套的数组包含的是二级目录的数据。 代码的实现 js

  • @megalo/target 的 platform 设置成 wechat,mini-css-extract-plugin 提取文件后缀改成微信小程序的 wxss。 const createMegaloTarget = require( '@megalo/target' ) const compiler = require( '@megalo/template-compiler' ) const M

  • 1、第三方应用授权对接 ​ 之前对接小程序只提供了开发者授权的方式,这种方式的弊端是,如果客户同时对接了其他的系统,会产生access token冲突,导致消息发不过来。因此新增第三方平台授权的方式,客户可以在智齿后台直接扫二维码授权对接。流程如下: 1.1、选择授权方式,进入配置页 点击绑定小程序时选择授权方式,默认推荐第三方平台授权: 点击确定进入配置页: 1.2、扫描授权二维码 点击“微信公

  • 微信小程序配置 1.微信小程序使用流程 具体配置参考相关教程 uni-app编译版参考教程 uni-app编译版 uni-app开源版参考教程 uni-app开源版 2.微信小程序下载 打开后台-小程序-微信小程序-小程序源码下载,注:针对已购买小程序的客户,可选"编译版""开源版""更新包" 3.微信小程序装修 1.首页导航: (导航能够有效帮助粉丝跳转到各个关键页面,是整个店铺的“指南针”。)

  • 微信小程序 微信小程序扫码授权以后,用户在小程序点击客服按钮发送的消息会转发给机器人,机器人会自动回复消息给小程序用户,同一个微信小程序同时只能绑定一个机器人,如果绑定了新的机器人,之前绑定的机器人会解除绑定。 注:微信小程序渠道接入后,用户仅可以发送文字进行问答。 只需三步接入微信小程序,自动回答小程序上的用户问题: 1. 创建机器人 注册登录https://bot.4paradigm.com后