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


Posted in Javascript onFebruary 14, 2019

大家都知道微信小程序自身没有提供表格这个组件,但是今天的项目需求又出现了,所以只能模仿一个了。

效果图:

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

代码挺简单方便的:

wxml:

<view class='history-table-wrap'>
  <view class="table">
   <view class="tr">
     <view class="th th1">日期</view>
     <view class="th th2">时间</view>
     <view class="th th3">伤害</view>
   </view>
   <view class="tr" wx:for="{{15}}">
     <view class="td td1">2018/02/12</view>
     <view class="td td2">11:30</view>
     <view class="td td3">本次对海煞造成了100000点伤害</view>
   </view>
  </view>
 </view>

wxss:

.history-table-wrap{
 position: absolute;
 width: 668rpx;
 height: 578rpx;
 left: 50%;
 margin-left: -334rpx;
 top: 70rpx;
 overflow-y: scroll;
 overflow-x: hidden;
}
/* 表格代码  */
.table{
 border:1px solid #dadada;
 border-right:0;
 border-bottom: 0;
 width: 98%;
 margin-left: 1%;
}
.tr{
 width:100%;
 display: flex;
 justify-content: space-between;
}
.th,.td{
 padding: 10px;
 border-bottom: 1px solid #dadada;
 border-right: 1px solid #dadada;
 text-align: center;
 width: 100%;
}
.th1,.th2,.td1,.td2{
 width: 40%;
}
.th{
 font-weight: 800;
 background-color: #b66242;
 font-size: 28rpx;
 color: #330e0e;
}
.td{
 font-size: 20rpx;
 color: #ec9480;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Locate a File Using a File Open Dialog Box
Jun 18 Javascript
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 Javascript
javascript中字符串拼接需注意的问题
Jul 13 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
Feb 10 Javascript
Javascript alert消息换行的方法
Aug 07 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
Sep 23 Javascript
js本地图片预览实现代码
Oct 09 Javascript
详解jQuery中ajax.load()方法
Jan 25 Javascript
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
详解js中的原型,原型对象,原型链
Jul 16 Javascript
JS+css3实现幻灯片轮播图
Aug 14 Javascript
React通过redux-persist持久化数据存储的方法示例
Feb 14 #Javascript
微信小程序实现简易table表格
Jun 19 #Javascript
微信小程序制作表格的方法
Feb 14 #Javascript
手把手带你封装一个vue component第三方库
Feb 14 #Javascript
微信小程序实现简单表格
Feb 14 #Javascript
手挽手带你学React之React-router4.x的使用
Feb 14 #Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 #jQuery
You might like
php的常量和变量实例详解
2017/06/27 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
Tinymce+jQuery.Validation使用产生的BUG
2010/03/29 Javascript
js下关于onmouseout、事件冒泡的问题经验小结
2010/12/09 Javascript
JQuery学习笔记 nt-child的使用
2011/01/17 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
2013/12/22 Javascript
高性能JavaScript模板引擎实现原理详解
2015/02/05 Javascript
基于Css3和JQuery实现打字机效果
2015/08/11 Javascript
jquery实现图片列表鼠标移入微动
2016/12/01 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
JS实现简易换图时钟功能分析
2018/01/04 Javascript
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
vue中$set的使用(结合在实际应用中遇到的坑)
2018/07/10 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
2018/09/21 Javascript
JQuery实现折叠式菜单的详细代码
2020/06/03 jQuery
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
vue+element table表格实现动态列筛选的示例代码
2021/01/14 Vue.js
[47:26]完美世界DOTA2联赛 LBZS vs Forest 第二场 11.07
2020/11/09 DOTA
Python中生成器和yield语句的用法详解
2015/04/17 Python
Python 编码Basic Auth使用方法简单实例
2017/05/25 Python
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
详解python 注释、变量、类型
2018/08/10 Python
Pytorch中accuracy和loss的计算知识点总结
2019/09/10 Python
python+Django实现防止SQL注入的办法
2019/10/31 Python
在CentOS7下安装Python3教程解析
2020/07/09 Python
Python 日期与时间转换的方法
2020/08/01 Python
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
旅游网创业计划书
2014/01/31 职场文书
冰淇淋店的创业计划书
2014/02/07 职场文书
法定代表人授权委托书
2014/04/04 职场文书
环保专项行动方案
2014/05/12 职场文书
2014年教育实习工作总结
2014/11/22 职场文书
幼儿园中秋节活动总结
2015/03/23 职场文书
《巨人的花园》教学反思
2016/02/19 职场文书
幼儿园2016年感恩节活动总结
2016/04/01 职场文书