如何使用微信小程序设计和设置表格并展示数据

在微信小程序开发时,组件中没有表格,需要根据具体的元素和样式形成表格。可以利用<view></view>和样式控制生成表格。下面利用一个实例说明,操作如下:

操作方法

  • 01

    第一步,双击打开微信小程序开发工具,新建一个对应的界面,然后插入多个view元素,并添加class属性,如下图所示:

  • 02

    第二步,没有给这些view样式,然后保存代码并预览效果,结果出现从上到下排列,如下图所示:

  • 03

    第三步,在对应的wxss文件中,设置表格的表头和表体的样式,如下图所示:

  • 04

    第四步,再次保存代码并在模拟器中预览效果,发现形成了表格,如下图所示:

  • 05

    第五步,在th td添加一个border-bottom属性,设置底部边框属性,如下图所示:

  • 06

    第六步,结果发现最后一行的底部边框展示的有点粗,是因为table和td设置了边框,加粗了,如下图所示:

(0)

相关推荐

  • 微信小程序怎么设置启动页面?

    微信小程序可以设置到启动页面上,这样就不用每次都去发现标签下再进入小程序,一步步的这样麻烦的操作了.跟着小编一起做,学会设置微信小程序的启动页面.这样可以避免每次重复去找常用的小程序. 1.开始我们先 ...

  • 微信小程序设计指南 微信小程序ui设计规范汇总

    微信小程序ui设计规范汇总: 微信小程序是一种全新的应用形态,微信小程序平台不需要下载安装即可使用应用的平台,微信小程序实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用. 也体现了“用完 ...

  • 如何使用微信小程序设计出一个弹出窗口

    在微信小程序中,有一个组件弹窗,有很多种的形式,如提示窗.警告窗.信息窗等.其中,弹出一个窗口,可以设置录入信息或修改输入的信息等.下面利用一个实例说明弹窗的用法,操作如下: 操作方法 01 第一步, ...

  • 微信朋友圈怎么设置三天展示权限

    用户在使用微信的时候,可以在设置中设置朋友圈只能查看三天展示的权限,下面教你设置方法. 操作方法 01 进入微信主界面,在下方选择"我" 02 进入个人信息界面,选择"设 ...

  • 微信小程序正式开放公测:具有不是APP胜似APP的效果

    9月22日,微信公众平台对外放出200个小程序内测邀请名额,小程序也就是外界广为流传的微信“应用号”,具有不是APP胜似APP的效果. 11月3日晚间,微信团队宣布:微信小程序正式开放公测. 据微信团 ...

  • 微信小程序火了,自学小程序最好用的4个方法

    随着微信小程序发布公测,关于它的讨论就没有停歇过,这几天来,我每次参加的聚会,开场总离不开小程序的话题. 前天馒头商学院的BD小粉童鞋和我聊天,谈到微信小程序的到来会对互联网运营和产品经理带来什么影响 ...

  • 微信小程序如何获取和存储openid与php数据互通

    复杂的微信小程序需要调用数据库里面的数据,这样会减轻小程序端的压力.获取和存储openid可以准确定位每个用户,实现商城中一系列复杂的功能. (一)获取openid 01 打开"微信web开 ...

  • 微信朋友圈小视频怎么设置仅WiFi自动下载播放

    朋友圈小视频仅WiFi下自动播放设置步骤 1.在微信主界面点击"我",再点击"设置". 2.点击"通用". 3.点击"朋友圈小视频 ...

  • 怎么设置微信小程序收款通知?微信小程序收款通知设置方法

    微信小程序收款通知可以进行设置了,这个功能最新上线,不少小伙伴们不清楚怎么设置的,就让小编给大家详细的讲讲设置方法,想知道的就一起来看看吧. 微信小程序收款通知设置方法介绍 微信共上线了微信支付公众号 ...