精华内容
下载资源
问答
  • 微信小程序表格组件
    更多相关内容
  • 微信小程序 表格组件

    2020-12-12 08:37:40
    本文档为个人博客文档系统的备份版本、作者:游、作者博客:点击访问 找到一个开源项目: https://github.com/s249359986/wx-minapp-components

    本文档为个人博客文档系统的备份版本、作者:小游、作者博客:点击访问

    找到一个开源项目:
    https://github.com/s249359986/wx-minapp-components

    展开全文
  • 针对上期打卡需求开发,这期需要以列表的形式展现打卡记录,但是微信小程序并没有表格组件,可能是官方考虑到,在前端开发中,表格一直都是最复杂的组件之一就没有实现吧。没有现成的组件可以使用,针对这个问题,...
  • 小程序表组件微信小程序自定义组件-表组件-支持第三方npm包使用使用此组件需要依赖小程序基础库2.2.2版本,同时依赖开发者工具的npm构建。具体细节可查阅 。表组件实现了table的以下功能: 1.基础表格2.带斑马纹表格...
  • 最近想要捣鼓一个自己的小程序,其中数据展示部分比较多,想用table来做展示,但是微信小程序并没有table组件,于是就自己动手捣鼓了一个,勉强能用。 可以看看效果: etable使用介绍 etable的使用很简单,分为 ...
  • 微信小程序 树形菜单组件 v2 需属性传值 listData(树形菜单数据) listData数据格式:[{title:'A层级菜单1',children:[]},{title:'A层级菜单2',children:[]}] 使用: <wxTreeList listData="{{listData}}"></...
  • 微信小程序表格组件封装

    千次阅读 2020-04-17 14:05:40
    table.wxml {{item}} {{item}} table.js properties: { list: { type: Array, value: [] }, headers: { type: Array, value: [] }, hasBorder: { type: String, value: “no” ...“usingC...

    table.wxml

        <scroll-view class="table-wrap" scroll-x="{{true}}">
    <view>
        <view class="table">
            <view class="tr">
                <block wx:for="{{headers}}" wx:key="{{index}}">`在这里插入代码片`
                <view class="th left">{{item}}</view>
                </block>
            </view>
            <view class="tr" wx:for="{{list}}" wx:key="index">
                <block wx:for="{{item}}" wx:key="index">
                    <view class="td left">{{item}}</view>
                </block>
            </view>
        </view>
    </view>
        </scroll-view>
    

    table.wxss

    
    .table-wrap{
        width: 100%;
        top: 20rpx;
    }
    .table{
        background-color: white;
        border:1px solid #dadada;
        border-right:0;
        border-bottom: 0;
        width: 100%;
    }
    .tr{
        width:100%;
        display: flex;
        justify-content: space-between;
    }
    .th{
        padding: 3px;
        border-bottom: 1px solid #dadada;
        border-right: 1px solid #dadada;
        text-align: center;
        width: 100%;
        /*font-weight: 800;*/
        background-color: rgba(139, 182, 155, 0.12);
        font-size: 28rpx;
        color: rgba(23, 21, 23, 0.73);
    }
    .td{
        padding: 3px;
        border-bottom: 1px solid #dadada;
        border-right: 1px solid #dadada;
        text-align: center;
        width: 100%;
        font-size: 28rpx;
        color: #666666;
    }
     
    
    **table.js**
      properties: {
    list: {
      type: Array,
      value: []
    },
    headers: {
      type: Array,
      value: []
    },
    hasBorder: {
      type: String,
      value: "no"
    },
    

    },
    在JSON文件中引入
    “usingComponents”: {
    “mytable”:"…/…/components/table/table"
    }
    其他的页面使用

    <mytable list="{{list}}" headers="{{headers}"></mytable>
    
    **页面JS部分**
    

    data: {
    headers: [“第一”, “第二”, “第三”, “第四”, “第五”],
    list:[[100,100,100,100,100],[200,200,200,200,200]]
    },
    效果图
    在这里插入图片描述

    展开全文
  • 微信小程序table表格自定义组件实现

    千次阅读 多人点赞 2020-10-22 17:16:22
    效果 属性 属性 类型 默认值 必填 说明 tabData Array ...表格标题 ...表格中需要展示的数据列 onclick Boolean false 否 为某一列设置点击事件,若同时为多列设置了点击事件,则只有第一个生效

    效果

        1. 左图是多列并且给了最大高度的效果。
        2. 右图是没有给某列固定宽度并且四列的宽度加起来不超出屏幕宽度的效果。
        3. 在不为某列设置固定宽度的情况下,四列及四列以下均是平分屏幕宽度的,并且不能左右滑动。

    属性

    属性类型默认值必填说明
    tabDataArray[ ]数据源
    columnsArray[ ]数据列
    settingObject{ }自定义样式配置项

    columns

    属性类型默认值必填说明
    labelString表格标题
    propArray表格中需要展示的数据列
    onclickBooleanfalse为某一列设置点击事件,若同时为多列设置了点击事件,则只有第一个生效
    fontSizeNumber24某一列的字体大小,单位:rpx
    fontWeightNumber / Stringnormal某一列的字重(粗细),支持 css 的所有属性值
    textDecorationStringnone某一列的文本修饰,支持 css 的所有属性值
    colorString某一列的字体颜色,支持十六进制、RGB、RGBA、英文单词

    setting

    属性类型默认值必填说明
    tableOutBorderString表格外边框,支持三值写法,例如:2rpx solid #ebeef5
    tableInBorderString表格内边框,支持三值写法,例如:2rpx solid #ebeef5
    tableInBorderLevelBooleanfalse表格内是否只显示水平边框
    tableRadiusString表格圆角
    theadHeightString表格标题的高度
    theadAlignStringleft表格标题的字体对齐方式,值:left、center、right
    theadColorString表格标题的字体颜色,支持十六进制、英文单词
    theadBgColorString表格标题的背景颜色,支持十六进制、RGB、RGBA、英文单词
    theadFontSizeNumber24表格标题的字体大小,单位:rpx
    theadFontWeightNumber / Stringbold表格标题的字重(粗细),支持 css 的所有属性值
    tbodyHeightString表格体的高度, 用于垂直滚动
    tbodyAlignStringleft表格体的字体对齐方式,值:left、center、right
    tbodyColorString表格体的的字体颜色,支持十六进制、英文单词
    tbodyBgColorString表格体的背景颜色,支持十六进制、RGB、RGBA、英文单词
    tbodyFontSizeNumber24表格体的字体大小,单位:rpx
    tbodyFontWeightNumber / Stringnormal表格体的字重(粗细),支持 css 的所有属性值
    trHeightString表格体的行的高度
    stripeString表格体的斑马纹背景色,支持十六进制、RGB、RGBA、英文单词

    子组件WXML

    <wxs src="./index.wxs" module="filter" />
    <view class="container">
      <view class="table"
            style="width:{{headWidth}};border-radius: {{config.tableRadius}}rpx;border:{{config.tableOutBorder}};border-bottom:{{config.tableOutBorder=='none'?(!!config.tableInBorder?config.tableInBorder:'2rpx solid #ebeef5'):''}};">
        <view class="thead" style="min-height:{{config.theadHeight}}rpx;background:{{config.theadBgColor}};">
          <view class="th"
                wx:for="{{column}}"
                wx:key="index"
                style="flex-grow:0;flex-basis:{{headWidth=='100%'?(100/column.length)+'%':item.width+'rpx'}};color:{{config.theadColor}};font-size:{{config.theadFontSize}}rpx;font-weight:{{config.theadFontWeight}};border-right:{{index==(column.length - 1)?'none':(config.tableInBorderLevel?'none':config.tableInBorder)}};border-bottom:{{config.tableInBorder}};">
            <view class="txt" style="text-align:{{config.theadAlign}};">{{item.label}}</view>
          </view>
        </view>
        <scroll-view scroll-y wx:if="{{tabData.length > 0}}" style="max-height:{{config.tbodyHeight}}rpx;">
          <view class="tr"
                wx:for="{{tabData}}"
                wx:for-item="item"
                wx:key="index"
                style="min-height:{{config.trHeight}}rpx;background:{{config.tbodyBgColor}};">
            <view class="td"
                  wx:for="{{column}}"
                  wx:for-item="col"
                  wx:for-index="colIndex"
                  wx:key="colIndex"
                  style="flex-grow:0;flex-basis:{{headWidth=='100%'?(100/column.length)+'%':col.width+'rpx'}};background:{{index%2!=0?config.stripe:''}};color:{{config.tbodyColor}};font-size:{{config.tbodyFontSize}}rpx;font-weight:{{config.tbodyFontWeight}};border-right:{{colIndex==(column.length - 1)?'none':(config.tableInBorderLevel?'none':config.tableInBorder)}};border-bottom:{{index==tabData.length-1?'none':config.tableInBorder}};">
              <view class="txt"
              		data-value="{{item}}"
                    bindtap="{{(col.οnclick==true||col.οnclick=='true')?'btnAction':''}}"
              		style="text-align:{{config.tbodyAlign}};font-size:{{col.fontSize}}rpx;font-weight:{{col.fontWeight}};text-decoration:{{col.textDecoration}};color:{{col.color}};">
                <block wx:if="{{!!col.type}}">{{filter[col.type](item[col.prop], col.param)}}</block>
                <block wx:else>{{item[col.prop]}}</block>
              </view>
            </view>
          </view>
        </scroll-view>
        <view wx:if="{{tabData.length === 0}}" class="msg">
          <view>暂无数据~</view>
        </view>
      </view>
    </view>
    

    子组件JS

    Component({
      data: {
        headWidth: null, // 设置表格的整体宽度,用于水平滚动
        column: [], // 表头标题
        config: { // 表格自定义样式设置
          tableOutBorder: '', // 表格的表框
          tableInBorder: '', // 表格的表框
          tableInBorderLevel: false, // 表格内只显示水平边框
          tableRadius: '', // 表格圆角
          theadHeight: '', // 表头的高度
          theadAlign: '', // 表头的字体对齐
          theadColor: '', // 表头的字体颜色
          theadBgColor: '', // 表头的背景色
          theadFontSize: '', // 表头的字体大小
          theadFontWeight: '', // 表头的字体粗细
          tbodyHeight: '', // 表格 tbody 的高度, 用于垂直滚动
          tbodyAlign: '', // 表格行的字体对齐方式
          tbodyColor: '', // 表格行的字体颜色
          tbodyBgColor: '', // 表格行的背景色
          tbodyFontSize: '', // 表格行的字体大小
          tbodyFontWeight: '', // 表格行的字体粗细
          trHeight: '', // 表格行 tr 的高度
          stripe: '' // 表格的斑马纹背景色
        }
      },
      properties: {
        tabData: { // 父组件传入的表格数据
          type: Array,
          value: []
        },
        columns: { // 父组件传入的表头标题
          type: Array,
          value: []
        },
        setting: { // 父组件传入的表格自定义样式
          type: Object,
          value: {}
        }
      },
      observers: {
        'tabData'(val) {
          // console.log('tableData', val)
        },
        'columns'(val) {
          if(val.length !== 0) {
            let width = 0
            let num = 0
            val.forEach((item)=>{
              // 判断是否设置了列宽,没有的话赋值默认的宽度 186,单位rpx
              if(!!item.width) {
                width += item.width/1
              } else {
                item.width = 186
                width = width + 186
              }
              // 如果给多列添加了点击事件,则第一个绑定了点击事件的列生效
              if(!!item.onclick && (item.onclick == true || item.onclick == 'true')) {
                num++
                if(num > 1) {
                  item.onclick = false
                }
              }
            })
            // 判断table的宽度是否超出屏幕的宽度,超出则赋值固定的宽度,否则赋值百分比
            if(width < 750) {
              width = '100%'
            } else {
              width = width + 'rpx'
            }
            this.setData({
              column: val,
              headWidth: width
            })
          }
        },
        'setting'(val) {
          // 判断传入的表格设置项是否为空
          if (Object.keys(val).length !== 0) {
            for (let key in val) {
              let str = null
              if(key == 'tableInBorderLevel' && (val[key] == true || val[key] == 'true')) {
                str = true
              } else if(key == 'tableInBorderLevel') {
                str = false
              } else {
                str = String(val[key]).replace(/(^\s*)|(\s*$)/g, '')
              }
              if(str != '' && str != null && str != 'null' && str != undefined && str != 'undefined') {
                this.data.config[key] = str
              }
            }
            this.setData({
              config: this.data.config
            })
          }
        }
      },
      methods: {
        // 表格某行的点击事件
        btnAction: function(e) {
          let value = e.currentTarget.dataset.value // value:一个包含点击行所有数据的对象
          this.triggerEvent("getCurrentValue", value)
        }
      }
    })
    

    子组件WXS

        内含格式化时间、价格、百分比的方法

    // 格式化时间
    function time(val, option) {
      var date = getDate(val)
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var day = date.getDate()
      var week = date.getDay()
      var hour = date.getHours()
      var minute = date.getMinutes()
      var second = date.getSeconds()
      
      //获取 年月日
      if (option == 'YY-MM-DD') return [year, month, day].map(formatNumber).join('-')
    
      //获取 年月
      if (option == 'YY-MM') return [year, month].map(formatNumber).join('-')
    
      //获取 年
      if (option == 'YY') return [year].map(formatNumber).toString()
    
      //获取 月
      if (option == 'MM') return  [mont].map(formatNumber).toString()
    
      //获取 日
      if (option == 'DD') return [day].map(formatNumber).toString()
    
      //获取 年月日 周一 至 周日
      if (option == 'YY-MM-DD Week')  return [year, month, day].map(formatNumber).join('-') + ' ' + getWeek(week)
    
      //获取 月日 周一 至 周日
      if (option == 'MM-DD Week')  return [month, day].map(formatNumber).join('-') + ' ' + getWeek(week)
    
      //获取 周一 至 周日
      if (option == 'Week')  return getWeek(week)
    
      //获取 时分秒
      if (option == 'hh-mm-ss') return [hour, minute, second].map(formatNumber).join(':')
    
      //获取 时分
      if (option == 'hh-mm') return [hour, minute].map(formatNumber).join(':')
    
      //获取 分秒
      if (option == 'mm-dd') return [minute, second].map(formatNumber).join(':')
    
      //获取 时
      if (option == 'hh')  return [hour].map(formatNumber).toString()
    
      //获取 分
      if (option == 'mm')  return [minute].map(formatNumber).toString()
    
      //获取 秒
      if (option == 'ss') return [second].map(formatNumber).toString()
    
      //默认 年月日 时分秒 
      return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':')
    }
    
    function formatNumber(n) {
      n = n.toString()
      return n[1] ? n : '0' + n
    }
    
    function getWeek(n) {
      switch(n) {
        case 1:
          return '星期一'
        case 2:
          return '星期二'
        case 3:
          return '星期三'
        case 4:
          return '星期四'
        case 5:
          return '星期五'
        case 6:
          return '星期六'
        case 7:
          return '星期日'
      }
    }
    // 格式化价格
    function price(val, option) {
      var option = option || 0
       // 不是数字返回空
       if(val != null && val != '' && isNaN(val/1)) {
        return ''
      }
      if(!!val && val != 'null' && val != 'undefined') {
        return val.toFixed(option)
      }
      return ''
    }
    // 格式化百分比
    function percent(val) {
      // 不是数字返回空
      if(val != null && val != '' && isNaN(val/1)) {
        return ''
      }
      // 如果值小于万分位(小于 0.01%)则返回 0%
      if(val < 0.0001) {
        return '0%'
      }
      // 小数 *100 后不包含小数点,返回 *100 后的结果
      if(val >= 0.0001 && ((val * 100) + '').indexOf('.') == -1) {
        return (val * 100) + '%'
      }
      // 有些小数 *100 之后会出现很长的位数,比如0.07*100=0.000000000001
      // 先处理成数组再截取 arr[1] 的前两个字符判断是否等于0,等于 0 返回 arr[0],不等于 0 则保留两位小数
      if(val >= 0.0001 && ((val * 100) + '').indexOf('.') > -1) {
        if((val * 100 + '').split('.')[1].slice(0,2) == 0){
          return (val * 100 + '').split('.')[0] + '%'
        }
        return (val * 100).toFixed(2) / 1 + '%'
      }
    }
    
    module.exports.time = time;
    module.exports.price = price;
    module.exports.percent = percent;
    

    子组件JSON

    {
      "component": true
    }
    

    子组件WXSS

    .container {
      overflow-x: scroll;
    }
    .table {
      border: 2rpx solid #ebeef5;
      border-bottom: 2rpx solid #ebeef5;
      border-radius: 0;
      box-sizing: border-box;
      background: #fff;
      font-size: 24rpx;
      color: #606266;
      overflow: hidden;
    }
    /* 表头 */
    .thead {
      display: flex;
    }
    .th {
      padding: 10rpx 20rpx;
      border-right: 2rpx solid #ebeef5;
      border-bottom: 2rpx solid #ebeef5;
      display: flex;
      align-items: center;
    }
    .th .txt {
      font-weight: bold;
      text-align: left;
    }
    .tr {
      display: flex;
    }
    .td {
      padding: 10rpx 20rpx;
      border-right: 2rpx solid #ebeef5;
      border-bottom: 2rpx solid #ebeef5;
      display: flex;
      align-items: center;
    }
    .td .txt {
      text-align: left;
      font-weight: normal;
    }
    .msg {
      width: 750rpx;
      height: 240rpx;
      line-height: 240rpx;
      font-size: 26rpx;
      text-align: center;
    }
    /* 隐藏表格滚动条 */
    ::-webkit-scrollbar {
      width: 0;
      height: 0;
      color: transparent;
    }
    

    父组件WXML

    <view class="container">
      <view class="table">
        <table tabData="{{tabData}}"
        	   columns="{{columns}}"
        	   setting="{{setting}}"
        	   bind:getCurrentValue="getCurrentValue">
         </table>
      </view>
    </view>
    

    父组件JS

    Page({
      data: {
        // 表格数据
        tabData: [
          { 
            id: 1,
            name: '上官婉儿',
            location: '法师 / 刺客',
            specialty: '爆发 / 突进',
            skill: '笔阵 / 篆法·疾势 / 飞白·藏锋 / 章草·横鳞',
            price: 13888,
            showUpRate: 0.001,
            shelveTime: 1545062400000
          },
          {
            id: 2,
            name: '王昭君',
            location: '法师',
            specialty: '控制 / 冰冻',
            skill: '冰封之心 / 凋零冰晶 / 禁锢寒霜 / 凛冬已至',
            price: 8888,
            showUpRate: 0.01,
            shelveTime: 1445270400000
          },
          { 
            id: 3,
            name: '老夫子',
            location: '战士',
            specialty: '突进',
            skill: '师道尊严 / 圣人训诫 / 举一反三 / 圣人之威',
            price: 8888,
            showUpRate: 0.0003,
            shelveTime: 1445270400000
          },
          { 
            id: 4,
            name: '狄仁杰',
            location: '射手',
            specialty: '',
            skill: '迅捷 / 六令追凶 / 逃脱 / 王朝密令',
            price: 8888,
            showUpRate: 0.06,
            shelveTime: 1445270400000
          },
          { 
            id: 5,
            name: '墨子',
            location: '法师 / 战士',
            specialty: '控制 / 护盾',
            skill: '兼爱非攻 / 和平漫步 / 机关重炮  /墨守成规',
            price: 8888,
            showUpRate: 0.005,
            shelveTime: 1445270400000
          },
          { 
            id: 6,
            name: '盘古',
            location: '战士',
            specialty: '突进 / 收割',
            skill: '盘古斧 / 狂怒突袭 / 压制之握 / 开天辟地 / 聚合为一',
            price: 13888,
            showUpRate: 0.00001,
            shelveTime: 1550764800000
          },
          { 
            id: 7,
            name: '猪八戒',
            location: '坦克',
            specialty: '团控 / 回复',
            skill: '毫发无伤 / 肉弹蹦床 / 倒打一耙 / 圈养时刻',
            price: 13888,
            showUpRate: 0.4,
            shelveTime: 1548777600000
          },
          { 
            id: 8,
            name: '伽罗',
            location: '射手',
            specialty: '远程消耗 / 团队',
            skill: '破魔之箭 / 渡灵之箭 / 静默之箭 / 纯净之域',
            price: 13888,
            showUpRate: 0.8,
            shelveTime: 1537977600000
          },
          {
            id: 9,
            name: '李信',
            location: '战士',
            specialty: '突进 / 团控',
            skill: '灰暗利刃 / 急速突进 / 强力斩击 / 力量觉醒·光 / 力量觉醒·暗',
            price: 13888,
            showUpRate: 0.07,
            shelveTime: 1542816000000
          },
          { 
            id: 10,
            name: '云中君',
            location: '刺客 / 战士',
            specialty: '突进 / 收割',
            skill: '云间游 / 天隙鸣 / 若英·华彩 / 风雷引',
            price: 13888,
            showUpRate: 0.006,
            shelveTime: 1557504000000
          },
          { 
            id: 11,
            name: '瑶',
            location: '辅助',
            specialty: '团队增益',
            skill: '山鬼·白鹿 / 若有人兮 / 风飒木萧 / 独立兮山之上',
            price: 13888,
            showUpRate: 0.9,
            shelveTime: 1555344000000
          },
          {
            id: 12,
            name: '米莱狄',
            location: '法师',
            specialty: '持续输出 / 推进',
            skill: '机械仆从 / 空中力量 / 强制入侵 / 浩劫磁场',
            price: 13888,
            showUpRate: 0.8,
            shelveTime: 1526313600000
          },
          { 
            id: 13,
            name: '狂铁',
            location: '战士',
            specialty: '突进 / 团控',
            skill: '无畏战车 / 碎裂之刃 / 强袭风暴 / 力场压制',
            price: 13888,
            showUpRate: 0.09,
            shelveTime: 1524153600000
          },
          { 
            id: 14,
            name: '斐擒虎',
            location: '刺客 / 战士',
            specialty: '远程消耗 / 收割',
            skill: '寸劲 / 冲拳式 / 气守式 / 虎啸风生',
            price: 13888,
            showUpRate: 0.007,
            shelveTime: 1519747200000
          },
          { 
            id: 15,
            name: '明世隐',
            location: '辅助',
            specialty: '团队增益',
            skill: '大吉大利 / 临卦·无忧 / 师卦·飞翼 / 泰卦·长生',
            price: 13888,
            showUpRate: 0.06,
            shelveTime: 1513094400000
          }
        ],
        // 表格标题列
        columns: [
          { label: '英雄名称', prop: 'name', onclick: true, fontSize: '',fontWeight: 600, textDecoration: 'underline', color: '#000'},
          { label: '英雄定位', prop: 'location'},
          { label: '英雄特长', prop: 'specialty'},
          { label: '英雄技能', prop: 'skill', width: 700, fontSize: '', fontWeight: 400, textDecoration: '', color: ''},
          { label: '英雄价格', prop: 'price', type: 'price'},
          { label: '出场率', prop: 'showUpRate', type: 'percent'},
          { label: '上架时间', prop: 'shelveTime', type: 'time', param: 'YY-MM-DD'}
        ],
        // 自定义样式配置项
        setting: {
          tableRadius: 0, // 表格圆角
          tableOutBorder: '', // 表格外边框
          tableInBorder: '', // 表格内边框
          tableInBorderLevel: 'true', // 表格内只显示水平边框
          theadHeight: 70, // 表头的高度
          theadAlign: '', // 表头的字体对齐方式
          theadColor: '', // 表头的字体颜色
          theadBgColor: '', // 表头的背景色
          theadFontSize: '', // 表头的字体大小
          theadFontWeight: '', // 表头的字体粗细
          tbodyHeight: '600',  // 表格 tbody 的高度, 用于垂直滚动
          tbodyAlign: '', // 表格行的的字体对齐方式
          tbodyColor: '', // 表格行的字体颜色
          tbodyBgColor: '', // 表格行的背景色
          tbodyFontSize: '', // 表格行的字体大小
          tbodyFontWeight: '', // 表格行的字体粗细
          trHeight: 70, // 表格行 tr 的高度
          stripe: '#fdf5e6' // #fafafa #f5f5f5 #fdf5e6 #fff8dc #f0f9eb
        }
      },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
    
      },
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
        
      },
      // 表格的自定义点击事件
      getCurrentValue(e) {
        const { name } = e.detail
        wx.showToast({
          title: name,
          icon: 'none',
          duration: 1500
        })
      }
    })
    

    父组件JSON

    {
      "navigationBarTitleText": "搜索",
      "usingComponents": {
        "table": "../../components/table/index"
      }
    }
    

    父组件WXSS

    page {
      background: #fff;
    }
    .container {
      width: 100%;
    }
    .table {
      width: 100%;
      margin: 0 auto 30rpx;
    }
    
    展开全文
  • 主要为大家详细介绍了微信小程序动态增加按钮组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 小程序开发表格demo,### wx:for在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item
  • 主要介绍了微信小程序实现的绘制table表格功能,涉及微信小程序数据读取及界面布局相关操作技巧,需要的朋友可以参考下
  • 开发微信小程序过程中不可避免的会使需要展示表单数据。 找遍了各大组件库没有合适的,分享一个的微信小程序Table组件。 Gitee:https://gitee.com/boriska/table-build.git GitHub:...
  • 微信小程序组件使用及属性参考

    千次阅读 多人点赞 2022-07-20 10:10:07
    小程序组件微信小程序的开发实际上也是前端开发的一种。我们想要开发一个前端程序,首先要做的就是创建美观的页面,然后处理好业务代码。在用户眼中首先会看到的是页面,而不会关心代码的实现,所以在学习前端开发时...
  • 因为小程序不支持table,没办法只能通过组件递归的方式实现多级表头的渲染 ** PS:这里需要注意的是table-view组件一定要注册在app.json里面** ---------------这是实现后的样式--------------
  • <table thead="{{thead}}" data="{{data}}" bind:getRowData="getRowData"> </table>
  • 微信小程序UI组件库推荐
  • 微信小程序组件 —— 树形表格

    千次阅读 2020-07-29 09:40:17
    如之前那篇树形选择下拉框文章所说,我终于完成了微信小程序树形数据表格组件,其实主要的思想还是树形结构的递归。我先放一下示例图: 因为现在只是说项目以后可能会用到这个组件,所以现在只是搭了个简单的样子,...
  • 将富文本转为微信小程序 rich-text 组件支持的 json 格式
  • 大家都知道微信小程序自身没有提供表格这个组件,但是今天的项目需求又出现了,所以只能模仿一个了。 效果图: 代码挺简单方便的: wxml: 日期 时间 伤害 <view class=tr wx:for={{1
  • vant-weapp组件库是有赞团队开发的 一款灵活简洁且美观的小程序UI组件库 ,此文将以这个组件库的用法为标准,下文提及的弹框组件均指的是此组件库中的弹框。 弹框分类 vant-weapp中弹框主要分为**两大类:弹出层...
  • 主要介绍了微信小程序实现动态获取元素宽高的方法,结合实例形式分析了微信小程序动态获取、设置元素宽高的相关操作技巧与注意事项,需要的朋友可以参考下
  • 代码】微信小程序自定义组件的计算属性功能。
  • 微信小程序常用表单组件

    千次阅读 多人点赞 2022-03-16 23:43:01
    微信小程序常用表单组件1、常用表单组件1.1 button1.2 checkbox1.3 input1.4 label1.5 form1.6 radio1.7 slider1.8 switch1.9 textarea2、实训小案例--问卷调查 1、常用表单组件 1.1 button   <button>为...
  • 微信小程序view组件

    千次阅读 2021-02-13 19:34:20
    这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、...
  • 微信小程序 table表格 PC版本

    千次阅读 2022-04-16 14:42:39
    所以要求可以通过小程序分享到微信,PC端登录微信,在微信浏览器窗口中打开看数据。。。不多说了那就开整吧~ 实现:表头固定、内容跨行、默认行高度、自适应窗口、触底加载下一页数据等等... 先上效果图 (mock...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,373
精华内容 2,549
关键字:

微信小程序表格组件