微信小程序实现一个表格table

1、wxml

<view class="table"><view class="tr thead"><view class="td">名字</view><view class="td">名字</view><view class="td ">名字</view><view class="td">名字</view><view class="td">名字</view><view class="td ">名字</view><view class="td">名字</view></view><block wx:for="{{list}}"><view class="tr"><view class="td">{{item.str}}</view><view class="td">{{item.text}}</view><view class="td">{{item.name}}</view><view class="td">{{item.str}}</view><view class="td">{{item.text}}</view><view class="td">{{item.name}}</view><view class="td">{{item.str}}</view></view></block></view>

2、wxss


.table {border: 1px solid #ccc;font-size: 28rpx;background: #fff;border-right: none;
}.tr{display: flex;justify-content: space-between;
}.td {text-align: center;border: 1px solid #ccc;display: inline-block;border-left: none;border-bottom: none;padding: 10rpx 1%;width: 12%;
}.thead .td{border-top: none;height: 140rpx;line-height: 50rpx;
}

3、js

Page({/*** 页面的初始数据*/data: {list: [{ "str": "A", "text": "text1", "name": "name1" },{ "str": "B", "text": "text2", "name": "name2" },{ "str": "C", "text": "text3", "name": "name3" },{ "str": "D", "text": "text4", "name": "name4" },{ "str": "E", "text": "text5", "name": "name5" },{ "str": "F", "text": "text6", "name": "name6" },{ "str": "G", "text": "text7", "name": "name7" }]},})

微信小程序实现一个表格table相关推荐

android商品数量加减,微信小程序实现一个简单的商品数量加减案例
简介这是一个用微信小程序原生代码实现的数量加减demo,主要是用于商品购物车或者商品详情修改数量使用,很简单哦~~~. 核心js方法说明addCount(增加数量) delCount (减少数量) ...
3元购买微信小程序解决方案一个月
3元购买微信小程序解决方案一个月参考文章: (1)3元购买微信小程序解决方案一个月 (2)https://www.cnblogs.com/wqcheng/p/7458808.html 备忘一下.
微信小程序开发一个小型商城（八、个人页面）
上一篇文章:微信小程序开发一个小型商城(七.支付页面) 在上方还是使用wx:if进行判断是否有登录的数据,有的话将数据当中的图片和名字渲染到页面当中,不存在的话使用一个登录按钮表示需要用户登录.往下分 ...
微信小程序，一个有局限的类似 React Native 轮子
微信小程序就是一个类似RN的轮子,可以快速开发,有一定的适用场景,但是也有其局限性.(结论是基于微信小程序的示例代码做的解读,可能存在谬误. 文末有好奇心日报小程序的二维码,欢迎围观. 2016年11 ...
微信小程序，一个有局限的类似 React Native 轮子！
微信小程序就是一个类似RN的轮子,可以快速开发,有一定的适用场景,但是也有其局限性.(结论是基于微信小程序的示例代码做的解读,可能存在谬误. 文末有好奇心日报小程序的二维码,欢迎围观. 2016年11 ...
PHP进度条小程序,用微信小程序实现一个圆形的进度条
随着小程序的热度下降,更多的人已经开始静下心来开发微信小程序了,最近在开发一款微信小程序的过程中遇到了一个问题:如何用微信小程序实现一个圆形的进度条?整理一番后,记录下来与大家共享. 代码实现的思路原 ...
微信小程序实现一个文件管理器
微信小程序实现一个文件管理器虽然标题说是实现一个文件管理器,但我是用来管理预加载小程序可能用的网络资源的,尤其是要是用音效资源时. 小程序的包体即便是分包也是每个分包的资源大小是2m,像音频资源,使 ...
微信小程序开发一个小型商城（四、商品列表）
上一篇文章,微信小程序开发一个小型商城(三.商品分类设计) 在从上一个界面跳转过来,会看到商品列表这个界面:如下图所示: 页面分析:从上到下:分别是一个已经定义好的自定义组件,下面的综合,销量,也是一 ...
微信小程序开发一个小型商城（五、商品详情）
上一篇文章:微信小程序开发一个小型商城(四.商品列表) 在从上一个界面跳转过来,会看到商品详情这个界面goods_detail :如下图所示: 页面分析:从上到下:一个轮播图+一个view标签存储商品 ...

微信小程序实现一个表格table

微信小程序实现一个表格table相关推荐

最新文章

热门文章