精华内容
下载资源
问答
  • 主要为大家详细介绍了微信小程序制作表格的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 微信小程序 通过webpack打包构建成一个纯JavaScript文件,需要开发者自己写打包脚本,非常灵活。 通过IDE打包,打包路径是一个黑盒,不需要开发者写打包脚本,必须按照它的规则书写入口以及业务代码。 代码包无限制...
  • 微信小程序创建表格

    千次阅读 2019-10-21 18:26:58
    微信小程序创建表格 今天小编遇到了这样一个需求,用户想要列表信息,找了好多地方,才发现微信没有H5中的table标签,所以自己画了一个表格。发现效果还不错,分享给大家。以下是我的效果图(内容仅为参考): ...

    微信小程序创建表格

    今天小编遇到了这样一个需求,用户想要列表信息,找了好多地方,才发现微信没有H5中的table标签,所以自己画了一个表格。发现效果还不错,分享给大家。以下是我的效果图(内容仅为参考):

    以下是这个样式的wxml代码:

    <view class="table" >
    
        <view class="tab_th">
    
            <view class="th_td1 th_text"><text>序号</text></view>
    
            <view class="th_td2 th_text"><text>姓名</text></view>
    
            <view class="th_td3 th_text"><text>性别</text></view>
    
            <view class="th_td4 th_text"><text>备注</text></view>
    
        </view>
    
        <block >
    
        <view class="tab_tr">
    
            <view class="tr_td1 text"><text>1</text></view>
    
            <view class="tr_td2 text"><text>张飞</text></view>
    
            <view class="tr_td3 text"><text>男</text></view>
    
            <view class="tr_td4 text"><text>已婚</text></view>
    
        </view>
    
        <view class="tab_tr">
    
            <view class="tr_td1 text"><text>2</text></view>
    
            <view class="tr_td2 text"><text>关羽</text></view>
    
            <view class="tr_td3 text"><text>男</text></view>
        
            <view class="tr_td4 text"><text>已婚</text></view>
    
        </view>
    
        <view class="tab_tr">
    
            <view class="tr_td1 text"><text>3</text></view>
    
            <view class="tr_td2 text"><text>刘备</text></view>
    
            <view class="tr_td3 text"><text>男</text></view>
    
            <view class="tr_td4 text"><text>已婚</text></view>
    
        </view>
        
        <view class="tab_tr">
    
            <view class="tr_td1 text"><text>4</text></view>
    
            <view class="tr_td2 text"><text>赵云</text></view>
    
            <view class="tr_td3 text"><text>男</text></view>
    
            <view class="tr_td4 text"><text>已婚</text></view>
    
        </view>
    
    </block>
    
    </view>

     

    下面是wxss代码:

    .table{
    
        width: 98%;
    
        border-top: #E8E8E8 solid 1px;
    
        border-bottom: #E8E8E8 solid 1px;
    
        position: relative;
    
        left: 1%;
    
        color: #333333;
    
    }
    
    .tab_th{
    
        width: 100%;
    
        position: relative;
    
        height: 70rpx;
    
        border-top: #E8E8E8 solid 1px;
    
        border-bottom: #E8E8E8 solid 1px;
    
        background-color: #FAFAFA;
    
        display: flex;
    
        align-items: center;
        
        justify-content: center;
    
    }
    
    .th_td1{
    
        width: 15%;
    
        height: 70rpx;
    
        border-top: #E8E8E8 solid 1px;
    
        border-bottom: #E8E8E8 solid 1px;
    
        background-color: #FAFAFA;
    
        display: flex;
    
        align-items: center;
    
        justify-content: center;
    
    }
    
    .th_td2{
    
        width: 40%;
    
        height: 70rpx;
    
        border: 1px solid #E8E8E8;
    
        background-color: #FAFAFA;
    
        display: flex;
    
        align-items: center;
    
        justify-content: center;
    
    }
    
    .th_td3{
        
        width: 25%;
    
        height: 70rpx;
    
        border: 1px solid #E8E8E8;
    
        background-color: #FAFAFA;
    
        display: flex;
    
        align-items: center;
    
        justify-content: center;
    
    }
    
    .th_td4{
    
        width: 20%;
    
        height: 70rpx;
    
        border-top: #E8E8E8 solid 1px;
    
        border-bottom: #E8E8E8 solid 1px;
    
        background-color: #FAFAFA;
    
        display: flex;
    
        align-items: center;
    
        justify-content: center;
    
    }
    
    .tab_tr{
    
        width: 100%;
    
        position: relative;
    
        height: 70rpx;
    
        border-top: #E8E8E8 solid 1px;
    
        border-bottom: #E8E8E8 solid 1px;
    
        background-color: #FFFFFF;
    
        display: flex;
    
        align-items: center;
    
        justify-content: center;
    
    }
    
    .tr_td1{
    
        width: 15%;
    
        height: 70rpx;
    
        border-top: #E8E8E8 solid 1px;
    
        border-bottom: #E8E8E8 solid 1px;
    
        background-color: #FFFFFF;
    
        display: flex;
    
        align-items: center;
    
        justify-content: center;
    
    }
    
    .tr_td2{
    
        width: 40%;
    
        height: 70rpx;
    
        border: 1px solid #E8E8E8;
    
        background-color:#FFFFFF;
    
        display: flex;
    
        align-items: center;
        
        justify-content: center;
    
    }
    
    .tr_td3{
    
        width: 25%;
    
        height: 70rpx;
    
        border: 1px solid#E8E8E8;
    
        background-color: #FFFFFF;
    
        display: flex;
    
        align-items: center;
    
        justify-content: center;
    
    }
    
    .tr_td4{
    
        width: 20%;
    
        height: 70rpx;
    
        border-top: #E8E8E8 solid 1px;
    
        border-bottom: #E8E8E8 solid 1px;
    
        background-color: #FFFFFF;
    
        display: flex;
    
        align-items: center;
    
        justify-content: center;
    
    }
    
    .text{
    
        font-size:12px;
    
        font-family:PingFangHK-Regular,PingFangHK;
        
        font-weight:400;
    
        color:rgba(51,51,51,1);
    
        line-height:17px;
    
    }
    
    .th_text{
    
        font-size:16px;
    
        font-family:PingFangSC-Regular,PingFang SC;
    
        font-weight:400;
    
        color:rgba(51,51,51,1);
    
        line-height:22px;
    
    }

     

    希望可以帮助到大家,样式仅为参考,大家其实可以自己动手画一个表格,说不定更好!

    展开全文
  • 使用微信小程序设计表格

    千次阅读 2019-01-24 17:25:38
    微信小程序开发时,组件中没有表格,需要根据具体的元素和样式形成表格。可以利用‘&lt;view&gt;&lt;/view&gt;’和样式控制生成表格 第一步:设计wxml ,包含四种class名称 第二步:设计wxss,...

    在微信小程序开发时,组件中没有表格,需要根据具体的元素和样式形成表格。可以利用‘<view></view>’和样式控制生成表格
    第一步:设计wxml ,包含四种class名称
    在这里插入图片描述
    第二步:设计wxss,添加样式
    在这里插入图片描述
    最后根据自己的需求调整样式

    展开全文
  • 小程序开发表格demo,### wx:for在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item
  • 微信小程序制作表格代码

    万次阅读 2017-07-24 22:40:42
    微信小程序中没有专门的表格制作工具,不过使用列表渲染可以实现, 下面是我表格图片: 方法如下: 在XXX.wxml中填写下面的代码 参数 内容 {{item.code}} {{item.text}} {{item.type}}

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

    下面是我做的表格图片:



    方法如下:

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

    小程序体验:扫下面的二维码
     



    完整代码下载:


    技术交流群:

          

    展开全文
  • 微信小程序自定义表格样式

    千次阅读 2019-08-13 13:08:38
    微信小程序中没有关于table组件的内容,所以如果在小程序中需要用到列表样式时,就可以通过flex布局利用view设置样式模仿table的样式 wxml: <view class="table"> <view class="tr">//标题行,设置了一个...

    微信小程序中没有关于table组件的内容,所以如果在小程序中需要用到列表样式时,就可以通过flex布局利用view设置样式模仿table的样式

    wxml:

       <view class="table">
          <view class="tr">//标题行,设置了一个的背景样式
            <view class="th ">1</view>
            <view class="th ">2</view>
            <view class="th ">3</view>
            <view class="th ">4</view>
          </view>
          <block wx:for="" wx:key="">
            <view class="tr {{index % 2 ==0 ?'bg-w':'bg-g'}}">//内容行,判断若行下标为单数,则设置一个背景颜色,若为双数,则设置另一个颜色
              <view class="td">1</view>
              <view class="td">2</view>
              <view class="td">3</view>
              <view class="td">4</view>
          </block>
        </view>
    

    wxss:

    .table {
      border: 0px solid darkgray;//根据需求设置,可有可无
    }
    
    .tr {
      width: 100%;
      display: flex;//设置弹性容器
      align-items: center;//内容垂直居中
      border-bottom: 1rpx solid #f7f8fb;//可有可无
    }
    
    .th {
      width: 25%;//注意列单位个数,因为我写的例子是四个单位,所以每个单位宽度设置为25%
      height: 3rem;//高度按需求设置
      display: flex;//设置弹性容器
      justify-content: center;//内容居中显示
      align-items: center;//内容垂直居中
      background: #dbb97a;//设置背景颜色
      color: #fff;//字体颜色
      font-size: 26rpx;//字体大小
    }
    
    .td {
      width: 25%;//同上
      display: flex;//设置弹性容器
      justify-content: center;//内容居中显示
      text-align: center;//文字居中
      font-size: 26rpx;//设置字体大小
      color: #dbb97a;//字体颜色
      padding: 0.5rem 0 0.5rem 0;//设置上下padding
    }
    
    .bg-w {
      background: #ccc;
    }
    
    .bg-g {
      background: #f7f8fb;
    }
    
    

    最后:

    以上就是关于微信小程序简单的自定义模仿table的全部内容啦。
    再说几句,
    1.th 是表示每行单元格个数的单位,可根据需求任意添加个数,对应的需要添加同样个数的 td 对齐。
    2.没有贴出 js 数据模板,但是在 block 模块里留下了 wx:forwx:key的位置,可根据需求,自定义数据,循环获取数据,或者进行其他的操作。
    3.条条大路通罗马,没有最好的方案,只有更好的方法。该模板很简单很通俗,或许会在将来有一定的帮助,本人只是为了做一个记录和参考,若有不足的地方,还望各路大佬指出。

    展开全文
  • 微信小程序 表格自定义列与列宽自适应 wxml: <scroll-view scroll-x="true" > <view class="flex"> <block wx:for="{{head}}"> <view class="column" style="min-width:calc({{sizeList...
  • 微信小程序制作表格

    千次阅读 2018-09-18 15:41:06
    一.页面wxml设计代码:   &lt;view class="container" bindtouchstart='containerTap1'&gt; &lt;view class="table" &gt; &lt;view class="...XiuX
  • 微信小程序做Table表格

    千次阅读 2019-08-30 10:49:08
    实现效果:表格头部固定,表格内容数据可以滚动 这只是一个最基本的表格框架。 头部 <view class="table"> <view class="tr"> <view class="td">序号</view> <view class="td">...
  • 微信小程序表格table

    万次阅读 2018-06-01 16:57:26
    今天开发微信小程序,在微信小程序的开发文档中,找组件,发现没有table组件。当时我的那个心情呀,各种不爽。于是,我打算自己写几个&lt;text&gt;&lt;/text&gt;来代替表格吧。然后就不小心看到了...
  • mini-program-table 微信小程序 表格 实现功能: �固定表头 固定表格中首列 内容可滚动 列宽自适应
  • 微信小程序table表格自定义组件实现

    千次阅读 多人点赞 2020-10-22 17:16:22
    效果 属性 属性 类型 默认值 必填 说明 tabData Array ...表格标题 ...表格中需要展示的数据列 onclick Boolean false 否 为某一列设置点击事件,若同时为多列设置了点击事件,则只有第一个生效
  • 主要介绍了微信小程序实现简单表格,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 只是当时这个系统的时候,由于需要使用java语言作为后端实现与微信小程序界面数据交互,看遍网上很多的案例基本后台都是php语言用于编写接口,几乎没找到过java作为后台语言的案例。写这篇博客只是为了帮助需要...
  • 微信小程序实现表格展示

    千次阅读 2019-10-14 10:35:54
    开发中遇到商品详情页需要展示参数列表,App中我们可以使用table轻松实现列表功能,但是小程序却不支持这个元素,该怎么办呢?我们就用样式来实现: 思路: 先给整个大表格设置border-top;给大表格的直接子元素...
  • 微信小程序绘制表格

    千次阅读 2018-05-09 11:18:03
    表格的绘制jsPage({data:{ infeed:['"", "1周", "2周", "3周", "总计"],endwise1: "游泳",tb1:"0",tb2:"0",tb3:"0",...
  • 微信小程序 表格实现

    千次阅读 2018-11-30 12:08:55
    微信小程序表格实现 最近要实现微信小程序的表格样式,楼主最开始想着用rich-text来实现table标签,试过很多次都不大如意,=-=,目测还是楼主实力不加,于是我想到了另一个方法实现,按比例把每个格子分好,效果就是...
  • 主要教大家一秒学会微信小程序制作table表格,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 销量 同比增长 环比增长 {{item.name}} {{item.size}} {{item.height}} {{item.width}} {{item.name}} {{item.size}} {{item.height}} {{item.width}} 上拉加载更多 就是使用block 循环,wx:if 判断 奇数偶数 ...
  • 点击表格,就会选中所在的行和列。选择上方的日期,下方的表格整体也会变化
  • 微信小程序没有现成的table标签,该怎么布局呢? <view class="my-grids"> <block wx:for="{{grids}}" wx:key="*this"> <view url="" class="my-grid" hover-class="my-grid_active"> .....
  • 主要为大家详细介绍了微信小程序实现简易table表格,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 微信小程序自定义组件-表组件-支持第三方npm包使用 使用此组件需要依赖小程序基础库2.2.2版本,同时依赖开发者工具的npm构建。具体细节可查阅 。 表组件 实现了table的以下功能: 1.基础表格 2.带斑马纹表格 3.带...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,812
精华内容 5,924
关键字:

微信小程序做表格

微信小程序 订阅