微信小程序中没有table组件，那么怎么实现呢？

其实使用多个view组件就可以实现，接下来就直接看代码吧

<!--index.wxml--><view class="container"><view class="table"><view class="tr"><view class="th">标题1</view><view class="th">标题2</view><view class="th">标题3</view><view class="th">标题4</view><view class="th">标题5</view></view><view class="tr" wx:for="{{text5}}"><view class="td">{{item}}</view><view class="td">{{item}}</view><view class="td">{{item}}</view><view class="td">{{item}}</view><view class="td">{{item}}</view></view></view></view>

/*.css*/
page {font-size: 14px;color: #333;
}.table {border: 1px solid #dadada;border-right: 0;border-bottom: 0;width: 98%;
}.tr {width: 100%;display: flex;justify-content: space-between;
}.th, .td {font-size: 16px;padding: 10px;border-bottom: 1px solid #dadada;border-right: 1px solid #dadada;text-align: center;width: 100%;
}.th {font-weight: 40;background-color: #dadada;
}

源码下载：https://download.csdn.net/download/ber_bai/10571357

微信小程序入门四：实现table效果相关推荐

微信小程序入门四详情页面
前三章基本完成文章列表页面的UI界面和数据加载,这章介绍内容详情页面的加载和布局.有了之前的知识储蓄,这章就容易多了.废话不多说. 首先是服务端代码,通过id查询数据:接口 https://www.i ...
微信小程序入门四: 导航栏样式、tabBar导航栏
实例内容导航栏样式设置 tabBar导航栏实例一:导航栏样式设置小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: {&q ...
天河微信小程序入门《四》：融会贯通，form表单提交数据库
天河在阔别了十几天之后终于又回来了.其实这篇文章里的demo是接着(天河微信小程序入门<三>)后面就做了的,但是因为最近在做别的项目,所以就偷懒没有发出来.放到今天来看,从前台提交数据到数 ...
微信小程序入门---01
目录微信小程序入门一.小程序简介二.第一个小程序二.小程序代码的构成三.WXML模块四.WXSS 样式五.JS 逻辑交互六.组件七.API 八.WXML 模板语法 - 数据绑定九. ...
微信小程序入门-音乐播放器
萌新,随便做做,只是了解一下微信小程序,希望可以给看到的胖友一点参考. 之前在网上看到这个人入门四天做完一个,我五天做完了,比他好看,突然有一点自信然后发现自己特别不乐意重新看自己的代码,总觉得写的 ...
A095_day01_微信小程序入门与组件
目录微信小程序入门与组件 - Day01 1.内容介绍 2.微信小程序简介(了解) 2.1.什么是小程序 2.2.微信小程序与app的区别 2.3.小程序在入口 2.4.微信小程序的工作原理 2.5 ...
【微信小程序】微信小程序入门与实战-个人笔记
微信小程序入门与实战文章目录微信小程序入门与实战 1 初识微信小程序 1-1 2020版重录说明 1-2 下载小程序开发工具 1-3 新建小程序项目 1-4 小程序appid的注册 1-5 新版小 ...
【微信小程序开发小白零基础入门】微信小程序入门【建议收藏】
微信小程序入门文章目录微信小程序入门前言一.小程序的概述 1.小程序简介 2.小程序诞生 3.小程序功能 4.小程序创建步骤二.小程序的准备工作 1.注册开发者账号 2.小程序信息完善 3. ...
做一个微信小程序给TA——程序猿小白的情人节礼物（微信小程序入门——一文学会小程序开发到发布小程序的全过程）
# 情人节可送给女朋友的礼物,或者作为两人的纪念 # 效果展示:微信搜索 "王美美与曾小帅" 小程序即可查看效果 # 微信小程序入门--使用免费后端云(Bmod)搭建留言板 ...

微信小程序入门四：实现table效果

源码下载：https://download.csdn.net/download/ber_bai/10571357

微信小程序入门四：实现table效果相关推荐

最新文章

热门文章