一秒学会微信小程序制作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 相关文章推荐
推荐一些非常不错的javascript学习资源站点
Aug 29 Javascript
复制本贴标题和地址的js代码
Jul 01 Javascript
JavaScript中的面向对象介绍
Jun 30 Javascript
jquery乱码与contentType属性设置问题解决方案
Jan 07 Javascript
图片翻转效果具体实现代码
Jan 09 Javascript
javascript实现数组中的内容随机输出
Aug 11 Javascript
javascript每日必学之运算符
Feb 16 Javascript
VUE使用vuex解决模块间传值问题的方法
Jun 01 Javascript
详解vue-cli 2.0配置文件(小结)
Jan 14 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 Javascript
vue 中的动态传参和query传参操作
Nov 09 Javascript
javascript中导出与导入实现模块化管理教程
Dec 03 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采用curl实现伪造IP来源的方法
2014/11/21 PHP
PHP调用其他文件中的类
2018/04/02 PHP
jQuery DIV弹出效果实现代码
2009/07/03 Javascript
js日期相关函数总结分享
2013/10/15 Javascript
js propertychange和oninput事件
2014/09/28 Javascript
AngularJS语法详解(续)
2015/01/23 Javascript
js的toLowerCase方法用法实例
2015/01/27 Javascript
javascript实现一个数值加法函数
2015/06/26 Javascript
JS之相等操作符详解
2016/09/13 Javascript
Vue响应式原理深入解析及注意事项
2017/12/11 Javascript
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
2019/03/13 Javascript
vue实现axios图片上传功能
2019/08/20 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
vue中监听返回键问题
2019/08/28 Javascript
Javascript文本框脚本实现方法解析
2020/10/30 Javascript
Python函数可变参数定义及其参数传递方式实例详解
2015/05/25 Python
在Django的模型中添加自定义方法的示例
2015/07/21 Python
Python字符串拼接、截取及替换方法总结分析
2016/04/13 Python
python批量修改文件编码格式的方法
2018/05/31 Python
python筛选出两个文件中重复行的方法
2018/05/31 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
基于Django统计博客文章阅读量
2019/10/29 Python
Python Django框架模板渲染功能示例
2019/11/08 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
美国设计师精美珠宝购物网:Netaya
2016/08/28 全球购物
介绍一下#error预处理
2015/09/25 面试题
瀑布模型都有哪些优缺点
2014/06/23 面试题
同学聚会欢迎辞
2014/01/14 职场文书
法律七进实施方案
2014/03/15 职场文书
竞选卫生委员演讲稿
2014/04/28 职场文书
护士2014年终工作总结
2014/11/11 职场文书
2014年司法所工作总结
2014/11/22 职场文书
驻村工作简报
2015/07/20 职场文书
课题研究阶段性总结
2015/08/13 职场文书
css position fixed 左右双定位的实现代码
2021/04/29 HTML / CSS