二、vant-ui

一、vant-ui

1 .1进入官网下载源码

https://github.com/youzan/vant-weapp

1.2 解码文件,将dist目录拷贝到自己的项目中

1.3 使用

https://vant-contrib.gitee.io/vant-weapp/#/intro
3-1  需要在json文件中导入组件
{
  "usingComponents": {
    "van-button":"../../vant/dist/button/index"
  }
}
3-2  使用
<van-button  type="danger">按钮</van-button>

二、 vant-ui组件的介绍

2.1 icon

<van-icon name="like-o" color="#ff2d51" info="9" size="30px" />

2.2 checkbox

Tips：原生的组件是没有bind:change这个事件

<van-checkbox value="{{isChecked}}" bind:change="onChange"></van-checkbox>
<checkbox value="你"  bindtap="handleChange"   checked="{{isChecked}}"></checkbox>
Page({
  data: {
    isChecked:true
  },
  onChange(event){
    this.setData({
      isChecked:event.detail
    })
  },
  handleChange(){
    this.setData({
      isChecked:!this.data.isChecked
    })
  }
})

2.3 search

<van-search
  value="你"
  shape="round"
  background="#ff2d51"
  placeholder="请输入搜索关键词"
  bind:change="onChange"
  bind:search="onSearch"
/>
<input type="text" 
bindinput="onChange" bindconfirm="onSearch"
></input>
onChange -->输入内容改变的时候触发   -->bindinput
onSearch -->点击回车按钮的时候触发   -->bindconfirm

2.4 reduce求和

Tips:当数组中是复杂数据类型时,失效