微信小程序制作表格代码「建议收藏」

微信小程序制作表格代码「建议收藏」微信小程序中没有专门的表格制作工具,不过使用列表渲染可以实现,下面是我做的表格图片:方法如下:在XXX.wxml中填写下面的代码参数内容{{item.code}}{{item.text}}{{item.type}}

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

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

下面是我做的表格图片:

微信小程序制作表格代码「建议收藏」

方法如下:

  1. 在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>

  2. 在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%;}

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

小程序体验:扫下面的二维码
 微信小程序制作表格代码「建议收藏」



完整代码下载:


技术交流群:
微信小程序制作表格代码「建议收藏」

      

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/157840.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • bigdecimal四舍五入保留整数_bigdecimal保留两位小数显示00

    bigdecimal四舍五入保留整数_bigdecimal保留两位小数显示00测试代码如下:doubledayDiff2=5.06135778;BigDecimalusedM=newBigDecimal(dayDiff2);//保留两位小数且四舍五入usedM=usedM.setScale(2,BigDecimal.ROUND_HALF_UP);测试结果如图:…

  • 项目范围管理「建议收藏」

    项目范围管理「建议收藏」1、项目范围管理要做好以下三方面工作:1)明确项目边界2)对项目执行工作进行监控3)防止项目范围发生蔓延2、项目的范围基准是经过批准的项目范围说明书、WBS和WBS字典。判断项目是否完成要以范

  • 通过经纬度计算距离的公式是什么_excel经纬度计算距离公式

    通过经纬度计算距离的公式是什么_excel经纬度计算距离公式原文地址:http://www.storyday.com/html/y2009/2212_according-to-latitude-and-longitude-distance-calculation-formula.html在去年cosbeta曾经发布了一个网页计算工具,这个作用就是根据地球上两点之间的经纬度计算两点之间的直线距离。经纬度到距离的计算在通信工程中应用比较广泛,所以cosbet

  • 运行程序时”提示找不到zlib1.dll,无法继续执行代码”的解决方法

    运行程序时”提示找不到zlib1.dll,无法继续执行代码”的解决方法解决办法如下:1.下载zlib1.dll:zlib1.dll下载链接2.解压后放到系统目录中32位系统:放到C:\Windows\System32\64位系统:放到C:\Windows\SysWOW64\

  • matlab设计模拟带通滤波器

    matlab设计模拟带通滤波器简单记录下在matlab上如何设计出模拟的带通滤波器,包括:巴特沃斯滤波器、切比雪夫I型滤波器、切比雪夫II型滤波器、椭圆型滤波器。代码如下:%设计带通滤波器%巴特沃斯、切比雪夫I型、切比雪夫II型、椭圆型滤波器clearall;%wp和ws分别是通带和阻带的频率(截止频率)。当wp&amp;amp;amp;gt;ws时,为高通滤波器;当wp和ws为二元矢量时,为带通或带阻滤波器,这是求出的Wn也是二元…

  • React 动态菜单-不限级递归菜单树

    React 动态菜单-不限级递归菜单树import{FC,useState}from”react”;import{Layout,Menu}from’antd’;import{Link}from’react-router-dom’import{getData}from”../../mock-data”;const{Header,Content,Footer,Sider}=Layout;//菜单数据结构typeMenuData={id:number,name:.

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号