微信小程序学习第三天（text组件，button组件，image组件，input组件）

组件

text组件

了解一下text组件的三个属性

第一个selectable属性默认是false 但是直接在标签内写上这个属性不赋值就代表true，decode也这样。

button组件

然后button组件的一些属性，size，type，plain，disabled，loading


最后想要自己设置点击按下去后的样式，可以这样

然后再


另外hover-stop-propagation 设置阻止冒泡事件（子有点击事件，父也有点击事件，子点击会触发父的点击）

image组件

三、image组件

然后下面实例一下如何获取到相册里面的照片用来展示 再方法点击方法内使用wx.chooseImage
首先再home.wxml里面

<button bindtap="handleChosseAlbum" >大傻逼</button>
<image src="{{pathImage}}"></image>  //这里使用

然后home.js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    pathImage:''
  },
  handleChosseAlbum(){
    wx.chooseImage({    //使用这个api调用相册
      success: (res) =>{   //这里是自己选择的照片
        const path = res.tempFilePa ths[0]
        this.setData({
          pathImage: path  //放到home全局变量里
        })
      },
    })
  }
})

如下图，还是上面的代码，这里加上监听图片加载完后的方法，还有图片懒加载，图片懒加载只有图片进入三个屏幕的范围（上面一个大小一样的屏幕，下面也一个，这样来算）才开始加载/。

wx.for={{10}} 会使上面那段代码，遍历10遍，只要进入
还有这个属性

直接加再标签那里，实现长按会弹出这个
然后下面介绍mode属性

input组件

四、input组件

type属性

confilm-type 属性

获取输入的值