微信小程序实现的绘制table表格功能示例

2024-07-29 18:37:07

本文实例讲述了微信小程序实现的绘制table表格功能。分享给大家供大家参考，具体如下：

表格的绘制

Page({
data:{
infeed:['"", "1周", "2周", "3周", "总计"],
endwise1: "游泳",
tb1:"0",
tb2:"0",
tb3:"0",
tb4:"0",
endwise2: "跑步",
tc1:"0",
tc2:"0",
tc3:"0",
tc4:"0",
endwise3: "健身",
td1:"0",
td2:"0",
td3:"0",
td4:"0",
}
})

wxml

<view class="tle">
  <view class="ae by-c">
  <block wx:for="{{infeed}}" wx:key="*this">
   <view class="dd">{{item}}</view>
  </block>
  </view>
  <block >
  <view class="ae by-w " >
   <view class="wc a-y">{{endwise1}}</view>
   <view class="wc">{{tb1}}</view>
   <view class="wc">{{tb2}}</view>
   <view class="wc">{{tb3}}</view>
   <view class="wc">{{tb4}}</view>
  </view>
   <view class="ae by-w" >
   <view class="wc a-y">{{endwise2}}</view>
   <view class="wc">{{tc1}}</view>
   <view class="wc">{{tc2}}</view>
   <view class="wc">{{tc3}}</view>
   <view class="wc">{{tc4}}</view>
  </view>
   <view class="ae by-w" >
   <view class="wc a-yellow">{{endwise3}}</view>
   <view class="wc">{{td1}}</view>
   <view class="wc">{{td2}}</view>
   <view class="wc">{{td3}}</view>
   <view class="wc">{{td4}}</view>
  </view>
  </block>
</view>

wxss

.tle {
 border-top: 1px solid #ebc450;
 margin: 20rpx 0;
 border-left: 1px solid #c9c9c9;
}
.ae {
 display: flex;
 width: 100%;
 justify-content: center;
 align-items: center;
 text-align: center;
}
.wc {
 width: 40%;
 justify-content: center;
 text-align: center;
 height: 90rpx;
 line-height: 90rpx;
 border-bottom: 1px solid #c9c9c9;
 border-right: 1px solid #c9c9c9;
}
.by-c{
 background: snow;
}
.by-w {
 background: #e6f3f9;
}
.a-y {
 background: #ffecb5;
 border-bottom: 1px solid #edd079;
 border-right: 1px solid #edd079;
}
.dd {
 width: 40%;
 border-bottom: 1px solid #edd079;
 border-right: 1px solid #edd079;
 justify-content: center;
 background: #ffecb5;
 color: #333;
 display: flex;
 height: 90rpx;
 align-items: center;
}

希望本文所述对大家微信小程序开发有所帮助。

一秒学会微信小程序制作table表格

大家都知道微信小程序自身没有提供表格这个组件,但是今天的项目需求又出现了,所以只能模仿一个了. 效果图: 代码挺简单方便的: wxml: <view class='history-table-wrap'> <view class="table"> <view class="tr"> <view class="th th1">日期</view> <view class="t
JS绘制微信小程序画布时钟

微信小程序官方组件也提供了画布功能,下面分享一下如何创建微信小程序画布时钟. 总体思路是对pages中的一个小程序页面构建画布时钟逻辑程序,通过app.json公共设置来配置入口. 首先来看一下构建这样一个小程序所需要的目录结构从目录结构就可以看出来这个程序是简单的单层页面,画布渲染在pages下面的index页面上. 其中对程序有实际驱动作用的代码分别在index.js,index.wxml,index.wxss和app.json这几个文件中 Index.js文件里面存放着程序的逻辑层数据,
详解微信小程序-canvas绘制文字实现自动换行

在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者我们希望文本超出自动换行或者用省略号表示,光靠这个API是无法完成的.下面本人就讲下我在开发中是如何解决这个问题的. 1 wxml代码 <canvas canvas-id="myCanvas" style="border: 1px solid;"/> 2 w
微信小程序实现横向增长表格的方法

效果图如下所示: 下面给大家分享微信小程序横向增长表格的实例代码,代码如下所示: <view class='table'> <view class='tr'> <view class='td' wx:for='{{array}}'>{{item.day}}</view> </view> <view class='tr'> <view class='td' wx:for='{{array}}'>{{item.number}}
详解微信小程序canvas圆角矩形的绘制的方法

微信小程序允许对普通元素通过 border-radius 的设置来进行圆角的绘制,但有时候在使用 canvas 绘图的时候,也需要圆角,例如需要将页面上某块区域导出为图片下载到本地的时候,常用的解决方法就是使用 canvas 将这块区域绘制出来,最后导出 canvas 即可,但是 canvas 没有直接提供圆角的绘制 api ,所以需要曲线救国圆角矩形与一般矩形的区别在于,前者的四个角都是圆弧,所以只需要将一般矩形的四个角切掉,换成圆弧即可,如下图就是一个一般矩形被切掉了四个角的样子: 很明
微信小程序实现简单表格

本文实例为大家分享了微信小程序实现简单表格的具体代码,供大家参考,具体内容如下效果图: wxml <view class="table"> <view class="tr bg-w"> <view class="th">SPB</view> <view class="th">DPB</view> <view class="th "
微信小程序实现简易table表格

本文实例为大家分享了微信小程序实现简易表格的具体代码,供大家参考,具体内容如下由于需要开发小程序,前端又是自己弄,类似table的标签也没有,后来看到小程序文档中推荐使用flex布局,就把css中的flex布局学了一遍,效果还行,大家将就看一下 table.wxml <view class="table"> <view class="tr bg-w"> <view class="th">head1</v
微信小程序制作表格的方法

本文实例为大家分享了微信小程序制作表格的具体代码. 微信小程序中没有专门的表格制作工具,不过使用列表渲染可以实现, 下面是我做的表格图片: 方法如下: 在XXX.wxml中填写下面的代码 <view class="table"> <view class="tr bg-w"> <view class="th">参数</view> <view class="th-2">内
微信小程序实现的绘制table表格功能示例

本文实例讲述了微信小程序实现的绘制table表格功能.分享给大家供大家参考,具体如下: 表格的绘制 js Page({ data:{ infeed:['"", "1周", "2周", "3周", "总计"], endwise1: "游泳", tb1:"0", tb2:"0", tb3:"0", tb4:"0"
微信小程序实现的canvas合成图片功能示例

本文实例讲述了微信小程序实现的canvas合成图片功能.分享给大家供大家参考,具体如下: 先要获取图片的信息然后将需要合成的内容用canvas绘制出来,得到一个合成好的画布,接下来用 wx.canvasToTempFilePath 把当前画布指定区域的内容导出生成指定大小的图片,并返回文件路径.这个时候的路径是微信的临时路径,浏览器是访问不了的,因此需要请求服务器用 wx.uploadFile 将本地资源上传到开发者服务器. 在页面的wxml中加入canvas组件如下: <view c
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)

本文实例讲述了微信小程序MUI导航栏透明渐变功能.分享给大家供大家参考,具体如下: 导航栏透明渐变效果实现原理 1. 利用position:absolute在导航下定位一个view作为背景渐变使用; 2. 通过改变改view的opacity来实现透明渐变. WXML  <view style="height:100%;position:fixed;width:100%;"> <scroll-v
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)

本文实例讲述了微信小程序MUI导航栏透明渐变功能.分享给大家供大家参考,具体如下: 导航栏透明渐变效果实现原理 1. 给page-group设置的背景颜色采用rgba; 2. 通过改变rgba其中a的值来实现透明渐变. WXML <view style="height:100%;position:fixed;width:100%;"> <scroll-view scroll-y="false" bindscroll="scroll&qu
微信小程序实现简单input正则表达式验证功能示例

本文实例讲述了微信小程序实现简单input正则表达式验证功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <input placeholder="输入内容" bindinput="check"></input> <view>输入结果:{{result}}</view> index.js文件 Page({ data:{ result:'' }, check:function(e
微信小程序使用audio组件播放音乐功能示例【附源码下载】

本文实例讲述了微信小程序使用audio组件播放音乐功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml 复制代码代码如下: <audio src="{{audioSrc}}" poster="{{audioPoster}}" name="{{audioName}}" author="{{audioAuthor}}" controls></audio> ② ind
微信小程序使用video组件播放视频功能示例【附源码下载】

本文实例讲述了微信小程序使用video组件播放视频功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml 复制代码代码如下: <video src="../../pages/video/movie.mp4" binderror="videoErrorCallback"></video> ② index.js Page({ data:{ // text:"这是一个页面" }, vide
微信小程序实现的picker多级联动功能示例

本文实例讲述了微信小程序实现的picker多级联动功能.分享给大家供大家参考,具体如下: wxml部分: <picker mode="multiSelector" bindchange="bindjobcatchange" bindcolumnchange="bingjobcatcolumnchange" value="{{multiIndex}}" range="{{job_cat_list}}"
微信小程序实现的一键连接wifi功能示例

本文实例讲述了微信小程序实现的一键连接wifi功能.分享给大家供大家参考,具体如下: 在已知wifi账号和wifi密码的情况下,一般采用以下的流程来连接wifi Wi-Fi 接口调用: 1.Android: startWifi -> connectWifi -> onWifiConnected 2.iOS(仅iOS 11及以上版本支持): startWifi -> connectWifi -> onWifiConnected 操作步骤如下: 1.获取手机的型号: connectWi
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】

本文实例讲述了微信小程序实现上拉加载功能.分享给大家供大家参考,具体如下: 开发需求进入页面,加载初始数据,当向上拖动页面至底部,自动加载新的数据,即上拉加载更多数据. 演示 index.wxml  <view wx:for="{{listdata}}" wx:key="listdata" class='listitem'> <view class='title'>{{item.title}}</

微信小程序实现的绘制table表格功能示例

相关推荐

随机推荐