小程序实战入门009---小程序表格实现，小程序table实现

2017-09-15 本文已影响2002人编程小石头666

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

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

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