一、微信小程序 table
微信小程序table组件是用于展示表格数据的一种组件,通过设置表头和表格内容,可以方便地制作出简洁、美观的表格。
表格由 table 组件和thead、tbody、td等组成。
<table> <thead> <tr> <th>表头1</th> <th>表头2</th> </tr> </thead> <tbody> <tr> <td>内容1</td> <td>内容2</td> </tr> </tbody> </table>
其中,thead 表示表头,tr 表示表格行,th 表示表头单元格,tbody 表示表格主体,td 表示表格单元格。
二、微信小程序 table组件字体加粗
在 table 组件中,可以通过设置样式实现单元格内容加粗。使用 style 属性设置 font-weight: bold即可。
<td style="font-weight: bold">内容</td>
三、微信小程序image组件
在表格中,经常会出现需要在单元格中添加图片的情况。使用 image 组件可以方便地实现图片展示。
在 td 中添加 image 组件,设置 src 属性即可。如下所示:
<td> <image src="http://example.com/test.jpg" style="width: 50px; height: 50px;" /> </td>
四、微信小程序picker组件
在表格中,可能需要在单元格中添加下拉列表选择框,可以使用 picker 组件实现。
在 td 中添加 picker 组件,设置 range 和 value 属性即可。如下所示:
<td> <picker range="{{['选项1', '选项2', '选项3']}}" value="{{0}}" /> </td>
五、微信小程序ui组件库
微信小程序官方提供了一个 ui 组件库,其中包含了 table 组件,在使用之前需要先引入组件库。
在 app.json 文件中定义 usingComponents 属性,引入需要使用的组件。
{ "usingComponents": { "wux-table": "/static/wux/table/index", "wux-pagination": "/static/wux/pagination/index" } }
然后在页面中引入所需组件,即可使用。
<wux-table columns="{{columns}}" items="{{items}}" />
六、微信小程序下拉框组件
下拉框组件可以直接在表格中使用,需要在 td 中添加 picker-view 组件。
可以通过设置 range、value、indicator-style、mask-style、item-style 属性调整显示效果。如下所示:
<td> <picker-view value="{{active}}" indicator-style="height: 50px;" mask-style="opacity: 0.2;" item-style="height: 50px;" bindchange="onChange"> <picker-view-column> <view>选项1</view> <view>选项2</view> <view>选项3</view> </picker-view-column> </picker-view> </td>
七、微信小程序组件传值
在 table 组件中,可以通过 data 属性传递额外的数据。
在定义表格列时,可以定义需要传递的值。如下所示:
columns: [{ title: '标题', key: 'title', data: { id: '001', name: '名称', value: '测试' } }]
通过 data 属性传递的数据可以在事件回调中获取。
八、微信小程序组件下载
可以通过 Github、官方文档等渠道下载微信小程序组件。
下载后将组件文件复制至项目中对应的目录。
|- components |- wux |- table |- pagination
然后在 json 文件中定义 usingComponents 属性,就可以在项目中使用下载的组件了。
{ "usingComponents": { "wux-table": "/static/wux/table/index", "wux-pagination": "/static/wux/pagination/index" } }
九、微信小程序video组件
在表格中,还可以添加 video 组件,进行视频播放。
在 td 中添加 video 组件,设置 src 属性即可。如下所示:
<td> <video src="http://example.com/test.mp4" style="width: 100%; height: 100%;" /> </td>
需要注意的是,微信小程序 video 组件需要授权才能播放外部链接视频。
十、微信小程序video组件播放不了
在使用微信小程序 video 组件播放时,可能会出现播放不了的情况。
可能的原因有:
1、外链视频需要在线观看,不能下载观看
2、视频格式不支持,需要将视频格式转换为小程序支持的格式。
3、需要授权才能播放外部链接视频。
针对不同情况,可以通过不同方案解决。
如果是视频格式不支持,可以将视频格式转换为小程序支持的格式。如果是需要授权才能播放视频,需要在项目中实现用户授权。
如果是其他问题,可以搜索相关问题进行解决。