[移动开发]微信小程序踩坑之实现计算功能并在Input组件中显示

话不多说，直接上干货。

首先借助微信自带的weui.wxss实现input组件左右显示，实现类似下图的界面。这不是本文的重点，需要的同学可自行搜素。

1. wxml代码段如下：

<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<view class="weui-cell_hd">
<view class="weui-label labelCss">
<text class="textCss" style="font-weight: bold;font-size: 20px">建筑物层数</text>
</view>
</view>
<view class="weui-cell_bd">
<input class="weui-input inputCss" style="font-weight: bold;font-size: 20px;color: darkorange;" placeholder-class="place-holder" placeholder="请输入层数" type="number" bindinput="cengshu"/>
</view>
</view>

<view class="weui-cell weui-cell_input">
<view class="weui-cell_hd">
<view class="weui-label labelCss">
<text class="textCss" style="font-weight: bold;font-size: 20px">建筑物层高/m</text>
</view>
</view>
<view class="weui-cell_bd">
<input class="weui-input inputCss" style="font-weight: bold;font-size: 20px;color: darkorange;" placeholder-class="place-holder" placeholder="请输入层高" bindinput="cenghigh"/>
</view>
</view>


 <!--按钮-->
 <view class="JisuanBthView"> 
  <button class="JisuanBtn" type="primary" size="{{primarySize}}" loading="{{loading}}" disabled="{{disabled}}" bindtap="Jisuan">计 算</button> 
 </view> 


<view class="weui-cells weui-cells_after-title" style="margin-top: 10px;">
<view class="weui-cell weui-cell_input">
<view class="weui-cell_hd">
<view class="weui-label labelCss">
<text class="textCss" style="color: #AAAAAA;margin: auto;">总高/m</text>
</view>
</view>
<view class="weui-cell_bd">
<input class="weui-input inputCss" placeholder-class="place-holder" style="font-weight: bold;font-size: 20px;" disabled="{{isDisabled}}" placeholder="{{Zg}}"/>
</view>
</view>


</view>

2. JS代码段如下：

const app = getApp()
var Cs = null;//变量，用于存放建筑物层数
var Cg = null;//变量，用于存放建筑物层高

Page({

  /**
   * 页面的初始数据
   */
  data: {
    isDisabled:true,
    Zg:"",//总高
   },

  //建筑物层数
    cengshu:function(e) {
    Cs=e.detail.value;
    Cs=parseInt(Cs);
    },
   //建筑物层高
   cenghigh:function(e) {
     Cg=e.detail.value;
     Cg=parseInt(Cg);
   },


      Jisuan(){
 
          this.setData({
            isDisabled:false,
            Zg:Cs*Cg,
          });
        this.setData({
          isDisabled:true,
        })

    },

})

重点来了，有以下几个点要关注：

(1) 一定要有? =parseInt()，因为输入的是字符，需要转化为整型才能计算；

(2)WXML界面的disabled="{{isDisabled}}"，与JS界面的? data: {isDisabled:true}呼应,是为了实现计算结束后，input失效以保证运行后，结果不能被更改。

(3)WXML采用placeholder="{{Zg}}"，是同时实现显示，为后续计算提供方面。

谢谢大家，我是疯狂的豆包，请关注我，带你体验疯狂的编程乐趣。