微信小程序table

深碍√TFBOYSˉ_ 2021-09-23 07:52 343阅读 0赞

### 微信小程序table ###

*  前言
 *   *  项目目录!\[在这里插入图片描述\](/images/20210923/1d4a2dbdf44844f8bd9e80aba8000272.png)
     *  table实现
     *  运行效果

# 前言 #

项目需要所以需要研究一下微信小程序，昨天下午看了两个小时，把编译的工具什么都梳理的一遍，发微信小程序相对于开发来说我觉得还是很简单的，整体复杂性并不高。比我写的vue及微服务等简单多了，初步研究，这里记录一下实现过程中感觉比较重要的东西，我这里就不做深入的代码解说，因为刚研究担心说错了给您后续的研究带来不便。

## 项目目录![在这里插入图片描述][20190918105247616.png] ##

## table实现 ##

table.js文件代码【业务逻辑代码】

const app=getApp()
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        nodes: [{ //表格配置
          name: "table",
          attrs: {
            style: "  text-align: center",
          },
          children: [
            {
              name: "thead",   //thead不能改变表示表头
              attrs: {
                style: "border:1px solid #000;color：black",
                class: "black"
              },
              //表头
              children: [
                {
                  name: "tr",
                  attrs: {
                    style: "border:1px solid #000;color:black",
                    class: "red"
                  },
                  children: [
                    {
                      name: "th",
                      attrs: {},
                      children: [{
                        type: "text",
                        text: "姓名"
                      }]
                    },
                    {
                      name: "th",
                      attrs: {},
                      children: [{
                        type: "text",
                        text: "年龄"
                      }]
                    },
                    {
                      name: "th",
                      attrs: {},
                      children: [{
                        type: "text",
                        text: "地址"
                      }]
                    }]
    
                }],
            },
            
            {
              name: "tbody",  //tbody不能改变
              attrs: {
                style: "border:1px solid #000;color:black",
                class: "red"
              },
              children: [
                {
                  name: "tr",
                  attrs: {
                    style: "border:1px solid #000;color:black",
                    class: "red"
                  },
                  children: [
                    {
                      name: "td",
                      attrs: {},
                      children: [{
                        type: "text",
                        text: "张三"
                      }]
                    },
                    {
                      name: "td",
                      attrs: {},
                      children: [{
                        type: "text",
                        text: "18"
                      }]
                    },
                    {
                      name: "td",
                      attrs: {},
                      children: [{
                        type: "text",
                        text: "陕西省西安市"
                      }]
                    }                
                    ]
                }
                ],
            }
            ,
    
            {
              name: "tbody",  //tbody不能改变
              attrs: {
                style: "border:1px solid #000;color:red",
                class: "red"
              },
              children: [
                {
                  name: "tr",
                  attrs: {
                    style: "border:1px solid #000;color:black",
                    class: "red"
                  },
                  children: [
                    {
                      name: "td",
                      attrs: {},
                      children: [{
                        type: "text",
                        text: "李四"
                      }]
                    },
                    {
                      name: "td",
                      attrs: {},
                      children: [{
                        type: "text",
                        text: "21"
                      }]
                    },
                    {
                      name: "td",
                      attrs: {},
                      children: [{
                        type: "text",
                        text: "陕西省榆林市"
                      }]
                    }
                  ]
                }
              ],
            },
    
            {
              name: "tbody",  //tbody不能改变
              attrs: {
                style: "border:1px solid #000;color:blue",
                class: "red"
              },
              children: [
                {
                  name: "tr",
                  attrs: {
                    style: "border:1px solid #000;color:black",   //设置表格内容是黑色
                    class: "red"
                  },
                  children: [
                    {
                      name: "td",
                      attrs: {},
                      children: [{
                        type: "text",
                        text: "王五"
                      }]
                    },
                    {
                      name: "td",
                      attrs: {},
                      children: [{
                        type: "text",
                        text: "45"
                      }]
                    },
                    {
                      name: "td",
                      attrs: {},
                      children: [{
                        type: "text",
                        text: "陕西省渭南市"
                      }]
                    }
                  ]
                }
              ],
            }
          ],
        }]
      },
      tap() {
        console.log('tap')
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
        
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
        
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
        
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
        
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
        
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
        
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
        
      }
    })

table.json文件代码【界面设置代码】

{
      "usingComponents": {},
      "navigationBarTitleText": "表格"
    }

table.wxml文件代码【UI代码】

<rich-text nodes="{
       {nodes}}" bindtap="tap"></rich-text>

table…wxss文件代码【样式代码代码】

## 运行效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5NzY4Nzk_size_16_color_FFFFFF_t_70]

[20190918105247616.png]: /images/20210923/1d4a2dbdf44844f8bd9e80aba8000272.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5NzY4Nzk_size_16_color_FFFFFF_t_70]: /images/20210923/20722ad36d67475b8c05d12ebeab3c4e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，343人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序反编译微信小程序

微信小程序反编译跳一跳项目地址： [https://github.com/shunyue1320/decompile-wx][https_github.com_sh

- 日理万妓/ 2022年10月29日 07:40/ 0 赞/ 387 阅读

相关微信小程序一秒学会制作table表格

大家都知道微信小程序自身没有提供表格这个组件，但是今天的项目需求又出现了，所以只能模仿一个了。效果图： ![图片描述][SouthEast] 代码挺简单方便的：

浅浅的花香味﹌/ 2022年05月26日 09:19/ 0 赞/ 184 阅读

相关微信小程序上实现 <table> 表格

微信小程序不支持 table 标签，在网上找到一个使用 flex 来实现表格的简明例子，记录一下。 table.wxml <view class="table">

傷城~/ 2022年05月24日 11:34/ 0 赞/ 1240 阅读

相关微信小程序、

玩了一天的微信小程序出现错误好多呀犹豫好久，，，把最让我苦恼的问题记录下来 1. 原先使用的都是HBuilder X。。。。。。听说也可以使用这个开发微信小程

客官°小女子只卖身不卖艺/ 2022年01月07日 12:03/ 0 赞/ 563 阅读

相关微信小程序：注册微信小程序

注册小程序帐号在微信公众平台官网首页（mp.weixin.qq.com）点击右上角的“立即注册”按钮。 ![20170521234518211][] 选择注册

短命女/ 2021年12月09日 03:53/ 0 赞/ 776 阅读

相关微信-小程序：小程序

<table> <tbody> <tr> <td><span style="font-size:16px;color:FFFFFF;"><strong>ylb

╰半夏微凉°/ 2021年11月17日 15:16/ 0 赞/ 841 阅读

相关微信小程序

微信小程序游戏类demo：识色；从相似颜色中挑选不同的一个源码链接：[http://www.wxapp-union.com/forum.php?mod=viewthread

柔光的暖阳◎/ 2021年09月30日 09:16/ 0 赞/ 727 阅读

相关微信小程序table

微信小程序table 前言项目目录!\[在这里插入图片描述\](/images/20210923/1d4a2dbdf44844f8bd9e80aba8

深碍√TFBOYSˉ_/ 2021年09月23日 07:52/ 0 赞/ 344 阅读

相关微信小程序微信小程序框架API

[完整微信小程序(Java后端) 技术贴目录清单页面（必看）][Java_] 微信小程序框架所提供的API接口也是相当完备的,如果说小程序组件是用来构建小程序的视图层,那么小

àì夳堔傛蜴生んèń/ 2021年09月08日 21:04/ 0 赞/ 921 阅读

相关微信小程序table表格自定义组件实现

效果 1. 左图是多列并且给了最大高度的效果。 2. 右图是没有给某列固定宽度并且四列的宽度加起来不超出屏幕宽度的效果。 3. 在不为某列

秒速五厘米/ 2021年09月02日 07:06/ 0 赞/ 1492 阅读