点击下面网址进入系列教程

零基础入门小程序系列教程

小程序默认是不支持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.jsPage({  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（备注小程序）

原著是一个有趣的人,若有侵权,请通知删除