欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 财经 > 金融 > 原生微信小程序画表格

原生微信小程序画表格

2024/11/29 20:42:11 来源:https://blog.csdn.net/weixin_69903461/article/details/144026646  浏览:    关键词:原生微信小程序画表格

wxml部分:

<view class="table__scroll__view"><view class="table__header"><view class="table__header__item" wx:for="{{TableHeadtitle}}" wx:key="index">{{item.title}}</view></view><view class="table__content"><view class="table__content__line"><view class="table__content__line__item">{{0}}</view><view class="table__content__line__item">{{1}}</view><view class="table__content__line__item">{{2}}</view><view class="table__content__line__item">{{3}}</view><view class="table__content__line__item">{{4}}</view></view></view>
</view>

js部分:

TableHeadtitle: [{ title: "" },{ title: "待审核" },{ title: "已通过" },{ title: "退回" },{ title: "总数" },
],

scss部分:

 .table__scroll__view{margin-top: 10px;.table__header {width: 100%;position: sticky;top: 0;z-index: 1;display: flex;/* display: grid; 网格布局 *//* grid-auto-flow 属性控制自动放置的项目如何插入网格中 *//* column	通过填充每一列来放置项目 */grid-auto-flow: column;font-size: 26rpx;font-weight: bold;color: #333333;background: #F4F6FF;.table__header__item {display: flex;align-items: center;justify-content: center;text-align: center;box-sizing: border-box;background: #F4F6FF;width: 55%;height: 60rpx;position: relative;z-index: 888;border: 1rpx solid #E4E4E4;border-left: 0;border-top: 0;.timeicon {padding-left: 10rpx;color: #07b3f5;font-weight: bold;font-size: 35rpx;}}.table__header__item:nth-child(n) {width: 250rpx;position: sticky;left: 0;z-index: 999;}}.table__content {background-color: #fff;/* 这是兼容 iPhone x */padding-bottom: 10rpx;margin-bottom: constant(safe-area-inset-bottom);margin-bottom: env(safe-area-inset-bottom);.table__content__line {width: 100%;display: flex;grid-auto-flow: column;position: relative;}.table__content__line__item {display: flex;align-items: center;justify-content: center;text-align: center;box-sizing: border-box;background-color: #fff;height: 80rpx;border: 1rpx solid #E4E4E4;border-left: 0;border-top: 0;font-size: 26rpx;}.table__content__line__item:nth-child(n) {width: 250rpx;position: sticky;left: 0;}.table__content__line__item:nth-child(1) {color: rgb(25, 215, 240);}.table__content__line__item:nth-child(3) {font-weight: bold;color: rgb(78, 142, 182);}}}

效果:

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com