微信小程序之实现隔行变色表格

最新推荐文章于 2023-10-04 15:30:21 发布

盛夏温暖流年

最新推荐文章于 2023-10-04 15:30:21 发布

阅读量1.7k

点赞数

分类专栏：微信小程序文章标签：微信小程序表格变色

本文链接：https://blog.csdn.net/j1231230/article/details/111032917

版权

本文介绍如何在微信小程序中，由于缺乏table标签，通过调整样式来实现隔行变色的表格效果。提供了wxml、js和wxss的代码实现，并展示了最终效果。此外，还列举了其他相关的微信小程序开发教程。

摘要由CSDN通过智能技术生成

微信小程序没有table标签，但是又需要实现这样的效果，参考别人的调整了样式细节，共享一下。

最终效果如图所示：

在这里插入图片描述

代码实现：

wxml

<view class="table">
  <view class="tr bg-w">
    <view class="th index-width">排名</view>
    <view class="th enterprise-name-width">名称</view>
    <view class="th count-width">数量</view>
  </view>
  <block wx:for="{
    {listData}}" wx:key="{
    {code}}