点击下面网址进入系列教程
零基础入门小程序系列教程
小程序默认是不支持table表格的，如果我们想实现小程序表格效果，就得自己拼凑。实现方案有很多，不过个人感觉通过form和input标签来实现是比较好的方式。
Paste_Image.png
下面来看下实现思路
一，首先看index.wxml文件
- 这里用form实现整个表格，然后input实现表格内的单元格。布局其实很简单，主要是布局完成后通过css来实现表格样式
- 这里有几点要说明的
1,input可以通过设置disabled来不让用户输入，这样就可以作为纯文本展示。比如上图的文本
2,表格的间隔先需要自己用wxss来拼凑
<!--index.wxml -->
<view class="root">
<form bindsubmit="formSubmit">
<text>求和表格</text>
<view class='table'>
<view class="section-top">
<input type="text" placeholder="数据" class="input-top " disabled />
<input type="text" placeholder="A" class="input-top " disabled />
<input type="text" placeholder="B" class="input-top " disabled />
<input type="text" placeholder="计算结果" class="input-top end " disabled />
</view>
<view class="section2">
<input type="text" placeholder="加法" class="input2 " disabled />
<input type="digit" class="input2" placeholder="" maxlength='11' name="massA1" />
<input type="digit" class="input2" placeholder="" maxlength='11' name="massB1" />
<input type="text" class="input2 end2" disabled name="massSum1" value='{{massSum1}}' />
</view>
<view class="section3">
<input type="text" placeholder="除法" class="input3 " disabled />
<input type="digit" class="input3" placeholder="" maxlength='11' name="massA2" />
<input type="digit" class="input3" placeholder="" maxlength='11' name="massB2" />
<input type="text" class="input3 end3" disabled name="massSum2" value='{{massSum2}}'/>
</view>
</view>
<view class='buttonAll'>
<button class="submitone" formType="submit" size="mini" hover-class='button-hover-class' type='primary'>计算</button>
<button class="submittwo" formType="reset" size="mini" hover-class='button-hover-class' type='warn'>清零</button>
</view>
</form>
<view class='title'>
小程序不支持table标签，这里我们自己通过form和input来实现表格。有问题加
<text class="wechat">微信2501902996</text>
</view>
</view>
二，再来看index.wxss文件
- 这里我不多说了，代码里都有注释
/*index.wxss */
/*实现子控件居中显示 */
.root {
display: flex;
flex-direction: column;
align-items: center;
}
/*顶部标题 */
.title {
font-size: 34rpx;
margin: 40rpx;
}
.wechat {
font-size: 44rpx;
color: red;
}
/*表格布局 */
.table{
border: 1px solid gray;
width: 600rpx;
}
/*第一行样式 */
.section-top {
display: flex;
width: 600rpx;
flex-direction: row;
}
.input-top {
border-right: 1px solid gray;
height: 50rpx;
width: 150rpx;
color: #000;
font-weight: 800;
font-size: 14px;
}
.end{
border-right: 0px;
}
/*第二行样式 */
.section2 {
display: flex;
width: 600rpx;
border-top: 1px solid gray;
flex-direction: row;
}
.input2 {
border-right: 1px solid gray;
height: 50rpx;
width: 150rpx;
color: #000;
font-weight: 800;
font-size: 14px;
}
.end2{
border-right: 0px;
}
/*第三行样式 */
.section3 {
display: flex;
width: 600rpx;
border-top: 1px solid gray;
flex-direction: row;
}
.input3 {
border-right: 1px solid gray;
height: 50rpx;
width: 150rpx;
color: #000;
font-weight: 800;
font-size: 14px;
}
.end3{
border-right: 0px;
}
.section {
display: flex;
width: 700rpx;
flex-direction: row;
}
/*表格最左列名称 */
.input-left1 {
border: 1px solid gray;
height: 50rpx;
width: 170rpx;
color: #000;
font-weight: 800;
font-size: 14px;
}
.input-text {
border: 1px solid gray;
height: 30px;
width: 20px;
color: #000;
font-weight: 800;
font-size: 14px;
}
.inputtwo {
margin-top: 2%;
}
.buttonAll {
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 35rpx;
margin-bottom: 50rpx;
}
.submitone {
vertical-align: middle;
display: table-cell;
}
.submittwo {
vertical-align: middle;
display: table-cell;
}
/* 按钮提交颜色 */
.button-hover-class {
background-color: red;
}
.resTitle {
font-size: 35rpx;
}
到这里我们就可以实现小程序表格效果了
- 既然上图提到了简单的加法和除法了，这里就相关的js算法也给大家来讲解下
- 老规矩还是先看效果图
009GIF.gif
简单说明下
- 这里实现了简单的加法和除法，同时还有表格的清零重置操作。下面直接给大家看下实现代码。代码里也有相关注释。大家应该能直接看懂
// index.js
Page({
data: {
},
// 检测是否为零
check0: function () {
wx.showModal({
title: "被除数不能为零!",
showCancel: "ture",
confirmText: "重新输入",
confirmcolor: "#ccc",
})
},
// 表单计算
formSubmit: function (e) {
var that=this;
//获取输入值
var massA1 = e.detail.value.massA1;
var massB1 = e.detail.value.massB1;
var massA2 = e.detail.value.massA2;
var massB2 = e.detail.value.massB2;
var massSum1 = 0.0;//求和
var massSum2 = 0.0;//除法的结果
if (massB2 == 0) {
this.check0();
return false;
}
massSum1 = parseInt(massA1) + parseInt( massB1);
massSum2 = parseInt(massA2) / parseInt(massB2);
console.log("massSum1:" + massSum1);
console.log("massSum2:" + massSum2);
// 给结果列赋值
this.setData({
massSum1: massSum1+"",
massSum2: massSum2+""
});
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
结语
- 其实小程序学起来很容易，你只需要会基本的css样式和js就可以直接上手写小程序。并且小程序封装的一些组件，比如首页轮播图只需要用小程序的swiper 组件就能很好的实现自动轮播，循环轮播，定时轮播。传送门：http://blog.csdn.net/qiushi_1990/article/details/77922876
系列教程
- 由于之前都是在csdn上写的零基础自学小程序前8章教程，感兴趣的可以移步过去看下，有图有源码：http://blog.csdn.net/qiushi_1990/article/category/6536726
关于源码
- 其实文章里贴出的就是完整的源码了，如果你想要整个项目源码可以移步到：https://github.com/qiushi123/xiaochengxu_demos
如果你有关于微信小程序的问题。
你也可以关注我的个人微信号，每天定期推送小程序最新开发技术，优秀源码，各种干货，我也会定期的更新我的小程序实战入门系列课程的源码
20161125154110368.jpg
关注上面微号回复1可以加小程序学习微信群，群里和大家交流学习，一起进步
有问题加我微信：2501902696（备注小程序）
网友评论