微信小程序：如何将input框输入的值用按钮控制添加到变量中？

问题描述：

本人小白一个，没有学过任何编程语言，最近有下面这个需求，不知道如何去实现。代码都是东拼西凑来的。大多都不知道什么作用。

wss:

.ys{
     width: 100%;
     height: 100%;
     position: fixed;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-top: 200px;
  }

text{
   font-size: 3em;
   width: 100%;
   height: 100%;
   position: fixed;
   display: flex;
   align-items: center;
   justify-content: center;
   color: hsl(313, 75%, 68%);
 }

page{
  height: 100%;
  }

.byy{
    display: flex;
    position: absolute;
    color: #9c9a9a;
    align-items: center;
    justify-content: center;
  }

xml:

<!--名字都是随便起的，可以看需求修改-->

<text style="">{{text1}}</text>
<view>
  <view class="ys">
    <button bindtap="kaishi">开始</button>
    <button bindtap="jiesu">结束</button>
    <button class="byy"  style="margin-top: -100px" bindtap="tianjia"> 添加菜单</button>
   </view>
</view>

js:

//使用随机数
var time = -1
var arr = ["饼干","酸奶","生菜","酸菜","奥灶面","荔枝","黄皮子","芒果","旺仔牛奶","冷面"]
Page({
  data(){
    text1: "" ;
    },
  kaishi:function() {
    if(time==-1){
    console.log("开始");
    var that=this;
     time = setInterval(function(){
      var index = Math.ceil(Math.random()*(arr.length));
        that.setData({
          text1:arr[index], 
        })
        console.log(arr[index])
    },50)}
  },
  jiesu:function (){
    console.log("结束")
    clearInterval(time);
    time=-1
  },
})

//**

现在想实现：点击 “添加菜单” 按钮后将一个输入的文本添加到 “ arr ” 中。

（需要用到 input 还是 text 还是其他的，小白不懂这个）

希望各位大佬指点一下，能有代码更好，谢谢！！！

**//

答

//wxml

<view>
  <input style="border:1px solid black;width:100px;" type="text" bindblur="iptBurl" />
  <view>
    <view class="ys">
      <button bindtap="kaishi">开始</button>
      <button bindtap="jiesu">结束</button>
      <button class="byy"  bindtap="tianjia"> 添加菜单</button>
    </view>
  </view>
</view>


//js

//使用随机数
var time = -1
var arr = ["饼干","酸奶","生菜","酸菜","奥灶面","荔枝","黄皮子","芒果","旺仔牛奶","冷面"]
Page({
  data: {
    text1: "",
  },
  kaishi:function() {
    if(time==-1){
    console.log("开始");
    var that=this;
     time = setInterval(function(){
      var index = Math.ceil(Math.random()*(arr.length));
        that.setData({
          text1:arr[index], 
        })
        console.log(arr[index])
    },50)}
  },
  jiesu:function (){
    console.log("结束")
    clearInterval(time);
    time=-1
  },
  iptBurl:function(e){
    this.setData({
      text1:e.detail.value
    })
  },
  tianjia:function(){
    arr.push(this.data.text1);
    console.log(arr)
  }
})

data是存放数据的，后面不要写()，写括号的是需要调用的方法。

答

//wxml
<view>
  <view>
    <view class="ys">
      <button bindtap="kaishi">开始</button>
      <button bindtap="jiesu">结束</button>
      <button class="byy"  bindtap="showinput">显示</button>
      <view wx:if="{{show}}">
          <input style="border:1px solid black;width:100px;" type="text" bindblur="iptBurl" />
          <button bindtap="tianjia">添加</button>
      </view>
    </view>
  </view>
</view>
 
//js
//使用随机数
var time = -1
var arr = ["饼干","酸奶","生菜","酸菜","奥灶面","荔枝","黄皮子","芒果","旺仔牛奶","冷面"]
Page({
  data: {
    text1: "",
    show:false,
  },
  kaishi:function() {
    if(time==-1){
    console.log("开始");
    var that=this;
     time = setInterval(function(){
      var index = Math.ceil(Math.random()*(arr.length));
        that.setData({
          text1:arr[index], 
        })
        console.log(arr[index])
    },50)}
  },
  jiesu:function (){
    console.log("结束")
    clearInterval(time);
    time=-1
  },
  iptBurl:function(e){
    this.setData({
      text1:e.detail.value
    })
  },
  tianjia:function(){
    arr.push(this.data.text1);
    console.log(arr)
  },
  showinput(){
    this.setData({
        show:true
    })
  }
})

微信小程序：如何将input框输入的值用按钮控制添加到变量中？

相关推荐