微信小程序 css样式自制表格

最新推荐文章于 2024-07-26 13:09:24 发布

薄荷琴糖

最新推荐文章于 2024-07-26 13:09:24 发布

阅读量1.3k

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/growb/article/details/125998304

版权

本文介绍如何在微信小程序中使用CSS实现一个自定义样式的表格，包括HTML结构、JavaScript交互和关键CSS样式的设计，旨在帮助开发者打造个性化的表格展示效果。

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

效果图

HTML部分

<view class="table">
        <view class="tr bg-w">
          <view class="th">头像</view>
          <view class="th">树名</view>
          <view class="th">植树时间</view>
          <view class="th">礼物数</view>
          <view class="th">总达成率</view>
        </view>
        <block v-for="(item, index) in listData" :key="index">
          <view class="tr bg-g" v-if="index % 2 == 0">
            <view class="td">{
  {item.txtp}}</view>
            <view class="td">{
  {item.treename}}</view>
            <view class="