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

微信小程序制作表格代码「建议收藏」微信小程序中没有专门的表格制作工具,不过使用列表渲染可以实现,下面是我做的表格图片:方法如下:在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)
blank

相关推荐

  • Ubuntu卸载软件:3种卸载方式

    Ubuntu卸载软件:3种卸载方式1.使用Synaptic软件包管理器进行卸载打开软件包管理器。Ubuntu自带了一个GUI(GraphicalUserInterface,图形化用户界面)软件包管理器,它可以让你在一个可视化窗口中卸载程序。如果你不习惯使用命令行,这一工具将非常有用。点击系统,然后选择管理。在管理菜单中,选择Synaptic软件包管理器。某些较新版本的Ubuntu没有预装Synaptic。要安装它,打…

  • 鳄鱼mt4复盘助手_免费MT4复盘助手2015年8月新版

    鳄鱼mt4复盘助手_免费MT4复盘助手2015年8月新版本帖最后由宁静的魔于2015-8-2713:56编辑简介:鳄鱼复盘助手由鳄鱼金融独立研发,可对历史数据进行复盘测试,研究自己的交易系统。乃操盘交易必备神器。鳄鱼复盘助手完全免费,本论坛会员即可参与使用。本程序需要.netframework运行库,部分计算机没有装的下载安装一下,这个可以解决双击无反应.netframework4.0下载参与公测活动可得论坛纪念勋章,详情请点击:鳄…

  • 数据爆发式增长 数据备份成‘刚需’

    数据爆发式增长 数据备份成‘刚需’

  • KVM查看虚拟机的分区内容(4)

    KVM查看虚拟机的分区内容(4)

  • 步入J2EE架构和过程「建议收藏」

    步入J2EE架构和过程「建议收藏」标 题:步入J2EE架构和过程发信站:BBS水木清华站(FriApr2616:02:082002)本文转自赛迪网开发者developer.ccidnet.com摘要Java2企业版(J2EE)平台由四个关键部分构成:规格说明、参考实现、兼容性测试套件和蓝图(BluePrint)计划。蓝图描绘了分布式组件架构最好的实践和设计指导方针。本文基于Rational统一过程和Bl

    2022年10月30日
  • stat函数详解

    Linux系统函数之文件系统管理(二)stat函数​作用:获取文件信息​头文件:include&lt;sys/types.h&gt;#include&lt;sys/stat.h&gt;#include&lt;unistd.h&gt;​函数原型:intstat(constchar*path,structstat*buf)​返回值:成功返…

发表回复

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

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