小程序云开发-添加记录页面实现

1.view层,设置两个input,一个button,需要注意微信小程序与HTML中input不同。

<view>
输入商品名称:
<input bindinput="getName" value="{{name}}"></input>
输入商品价格:
<input  bindinput="getPrice" value='{{price}}'></input>
<button bindtap="addGood" type="primary">添加商品</button>
</view>

绑定了键盘输入事件:getName getPrice,捕获键盘输入内容。value值得增加是为了后面增加完成记录后,清除input里面内容。

button中绑定事件addGood,实现记录添加。

2.三个事件的处理代码

(1)先将存储数据name,price定义到data中,(原视频中将这两个变量定义为公共变量)这样便于后面数据清理。

data: {
    list:[],
    name:'',
    price:0
  },

(2)通过键盘事件e.detail.value读取input中输入的值,并赋予 页面data中,name 和price,price为数值型数据,通过Numver()强制转换

 /**
   * 获取输入商品名称
   */
  getName(e){
     this.name=e.detail.value
     },
  /**
   * 获取输入商品价格
   */
  getPrice(e){
    this.price = Number(e.detail.value)
    },

(3)添加记录事件addGood中,先验证数据,后通过add添加数据。清空输入框,并刷新列表

addGood(){
    if (this.name==''){//验证姓名是否为空
      wx.showToast({
        title:'姓名为空',
        icon:'none'
      })
    } else if(this.price==0){//验证价格是否为空
      wx.showToast({
        title:'价格为空!',
        icon:'none'
      })
    }else{//向库goods添加商品名称和价格
      wx.cloud.database().collection('goods')
      .add(
        {
          data:{
            name:this.name,//商品名称
            price:this.price//商品价格
          }
        }
      )
      .then(res=>{
        console.log('添加数据成功!',res)
        
      })
      .catch(err=>{
        console.log('添加数据失败',err)
      })
     //刷新页面列表
     this.clearInput()//清空输入框数据
     this.getlist()
    }

(4)清空输入框内容用setData使得他们值为空

 * 清空输入框内容
   */  
  clearInput(){
   this.setData({
    name:'',
    price:0
   })
  },

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值