微信小程序自定义输入框个数

一、使用到的知识点

1、微信小程序Number()和parseInt()
2、colorui的var组件
3、wx.setStorageSync保存至本地缓存

二、关键源码

  <view class="action">
    <button class="cu-btn bg-blue shadow" bindtap="numSteps" style="width:180rpx;">下一步</button>
  </view>

    <view class="cu-item {
     {index>num?'':'text-blue'}}" wx:for="{
     {numList}}" wx:key>
      <text class="num {
     {index==2?'err':''}}" data-index="{
     {index + 1}}"></text>
       {
     {
     item.name}}
      </view>

数字将对应有几个步骤

 <view class="cu-bar bg-white solid-bottom">
          <view class="action">
              <text class="cuIcon-titles text-orange"></text> 详情
          </view>
        </view>
          <view  wx:for="{
     {processnum}}" bindtap="tabSelect" data-id="{
     {index}}">
            <view class="cu-form-group">
              <text class="input">第{
     {
     index+1}}个步骤 </text>
            </view>
             ...

        <view class="cu-bar tabbar margin-bottom-xl bg-white">
          <view class="action text-gray add-action">
             <button class="cu-btn cuIcon-add bg-blue shadow" bindtap="add"></button>
                发布
           </view>
        </view>
    </view>

步骤数用本地存储
processnum：

wx.setStorageSync('processnum', e.detail.value)

所用到样式基本来源colourUI
但是还会遇到一个问题，这样本地保存下来的会出现按位判断步骤数，所以我们还需要将输入框内字符串转化为整体数字进行判断。

```cpp
numSteps() {
     
    this.setData({
     
      //num: this.data.num == this.data.numList.length - 1 ? 0 : this.data.num + 1,
      processnum : parseInt(wx.getStorageSync('processnum'))
    })
    console.log("processnum：",this.data.processnum)
  
  },

Number():可以用于任何数据类型转换成数值；

parseInt()、parseFloat():专门用于把字符串转换成数值；