微信小程序实现表格展示

开发中遇到商品详情页需要展示参数列表，App中我们可以使用table轻松实现列表功能，但是小程序却不支持这个元素，该怎么办呢？我们就用样式来实现：

思路：

先给整个大表格设置border-top；给大表格的直接子元素设置border-left、border-right、border-bottom；每行的参数名和参数值之间的竖线，我们通过给大表格的直接子元素设置伪元素实现；

代码：

  <!-- 商品参数 --><view wx:for="{{product.parameterValues}}" class='param'><!-- 参数标题 --><view class='param-text'>{{item.group}}</view><!-- 参数列表 --><view class='param-table'><view class='tb'><view class="tb-box" wx:for="{{item.entries}}"><view class='tL'>{{item.name}}</view><view class='tR'>{{item.value}}</view></view></view></view></view>

/*表格  */
.tb-box{border-bottom: 2rpx solid #f0f0f0;border-left: 2rpx solid #f0f0f0;border-right: 2rpx solid #f0f0f0;
}/* 伪元素 */
.tb-box::after{content: '';width:2rpx;height: 100%;background: #f0f0f0;position: absolute;left: 30%;top: 0;
}.tb {border-top: 2rpx solid #f0f0f0;position: relative;
}.tL, .tR {font-size: 25rpx;display: inline-block;box-sizing: border-box;padding: 17rpx 30rpx;vertical-align: top;
}.tL {width: 30%;color: #262626;
}.tR {width: 69%;color: #262626;
}

微信小程序实现表格展示相关推荐

微信小程序 table表格 PC版本
公司项目啊....其实小程序页面的商品列表也有宫格.列表.大图模式了,尽管描述得不那么详细,但是信息量也能看到个大概,但是领导或业务员比较喜欢看表格详细点,罗列得比较清晰. 所以要求可以通过小程序分享 ...
小程序微信统计表格_微信小程序制作表格的方法
本文实例为大家分享了微信小程序制作表格的具体代码. 微信小程序中没有专门的表格制作工具,不过使用列表渲染可以实现, 下面是我做的表格图片: 方法如下: 在XXX.wxml中填写下面的代码参数内容 ...
微信小程序获取并展示公众号推文
微信小程序获取并展示公众号推文获取公众号access_token(开发环境) IP白名单设置获取access_token 小程序前端展示素材导入云数据库云函数读取展示注:笔者是小程序菜鸟,代 ...
微信小程序 table表格固定表头和首列右侧表格可以左右滚动（多种表格演练）
最近在做公司的项目需要到表格展示数据,但是微信小程序是没有原生table标签的,于是就百度各种搜...发现结构有类似的就粘过来修改,要善于学习和借鉴别人的经验使其变成为自己的东西,学无止境~ 在这里做 ...
微信小程序官方组件展示之基础内容icon源码
以下将展示微信小程序之基础内容icon源码官方组件能力,组件样式仅供参考,开发者可根据自身需求定义组件样式,具体属性参数详见小程序开发文档. 功能描述: 图标组件. 属性说明: 属性类型默认值必 ...
微信小程序的表格table
今天开发微信小程序,在微信小程序的开发文档中,找组件,发现没有table组件.当时我的那个心情呀,各种不爽.于是,我打算自己写几个<text></text>来代替表格吧.然后就 ...
微信小程序原生表格组件
cv大法:先找个差不多实现基本功能的组件源代码:GitHub - zss823158062/senx-table: 微信小程序表格组件 lrjTable 然后在上面做优化: 1.优化了按钮点击bu ...
微信小程序菜品做法展示数据库设计_微信小程序结合后台数据管理实现商品数据的动态展示、维护...
微信小程序给我们提供了一个很好的开发平台,可以用于展现各种数据和实现丰富的功能,本篇随笔介绍微信小程序结合后台数据管理实现商品数据的动态展示.维护,介绍如何实现商品数据在后台管理系统中的维护管理,并通 ...
微信小程序用表格＜table＞＜/table＞查看数据
微信小程序不支持 table 标签,所以自己写了一个,记录一下方便以后可以直接复制使用图片,可以自己修改样式 index.js,也就是数据,这里写死,可以字自己对接口 ** [ ] index.wx ...

微信小程序实现表格展示

微信小程序实现表格展示相关推荐

最新文章

热门文章