微信小程序开发学习笔记——3.7&3.8表单组件button和input

>>跟着b站up主“咸虾米_”学习微信小程序开发中，把学习记录存到这方便后续查找。

课程连接：https://www.bilibili.com/video/BV19G4y1K74d?p=21&vd_source=9b149469177ab5fdc47515e14cf3cf74

一、button

https://developers.weixin.qq.com/miniprogram/dev/component/input.html

 

注：名称前是否带 loading 图标，是，则什么都不用写，即loading；若为否，则需用花括号括住false，即loading="{{false}}"，loading="false"是不对的。

event.wxml文件中加入以下代码：

<button
size="default"
type="primary"
loading
>
  按钮
</button>

二、input

1、属性

 https://developers.weixin.qq.com/miniprogram/dev/component/input.html

bindinput：监听输入框的事件，返回值中的detail中的value就是输入的内容。

2、代码例子

event.js中的代码修改如下部分

Page({
  data: {
    name:"咸虾米",
    age:18,
    num:0,
    color:"pink",
    size:300,
    title:"",
  },

  onInput(e){
    console.log(e);
    let value=e.detail.value
    this.setData({
      title:value
    })
  },
  onFocus(e){
    console.log(e);
  },
})

event.wxml中的代码如下

<view class="out">
  <input 
  class="ipt" 
  type="text"
  placeholder="请输入用户名"
  confirm-type="search"
  bindinput="onInput"
  bindfocus="onFocus"
  bindblur="onBlur"
  />
  <view>
    输入的内容是：{{title}}
  </view>
  <button
  size="default"
  type="primary"
  disabled="{{!title.length}}"
  >
  按钮
  </button>
</view>

event.wxss中的代码如下

.out{
  padding: 30rpx;
  border: 1px solid #ccc;
}
.out .ipt{
  background: #eee;
  margin-bottom:20rpx;
  padding:20rpx; /*输入框的高度*/
}

3、说明

disabled="{{!title.length}}" ：输入框内没有输入时，按钮无法点击。

4、结果