vantlist小程序（小程序vant ui中文文档）

今天给各位分享vantlist小程序的知识，其中也会对小程序vant ui中文文档进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

微信号：cloud7591
如需了解更多，欢迎添加客服微信咨询。
复制微信号

本文目录一览：

• 1、微信小程序 vant日历自定义文案
• 2、微信小程序，引用vant-weapp库，上传组件uploader，支持多选
• 3、小程序教程——Vant
• 4、微信小程序使用Vant

微信小程序 vant日历自定义文案

van-calendar

      poppable="{{ false }}"

      show-confirm="{{ false }}"

      formatter="{{ formatter }}"

      class="calendar"

      show-title="{{ false }}"

      show-subtitle="{{ false }}"

    /van-calendar

onLoad(options){

    this.CalendarShow();

}

CalendarShow() {

    let _this=this;

    var data = {};

    data.formatter = this.dayFormatter;

      // 渲染日历

    this.setData({formatter: function (day) {

        let month = day.date.getMonth() + 1;

        let date = day.date.getDate();

        for(let i of list){

          if(month ===i.month){

            if (date === i.day) {

              day.bottomInfo = '余票'+i.stock+'张';

            }

          }

        };

        return day;

      } })

  },

微信小程序，引用vant-weapp库，上传组件uploader，支持多选

wxml部分

van-uploader file-list="{{ picture_list }}" preview-full-image="{{false}}" max-size="2048000" max-count="9" multiple="{{true}}" bind:after-read="afterRead" bind:delete="deleteImg" /

js部分

afterRead:function(event) {

const { file } = event.detail;

    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式

    var obj={}

obj.path=file;

    this.uploadimg(obj);

},

uploadimg:function(data) {

wx.showLoading({

title:'上传中...',

        mask:true,

    })

var that =this,

        i = data.i ? data.i :0,

        success = data.success ? data.success :0,

        fail = data.fail ? data.fail :0;

    let userInfo=wx.getStorageSync('userInfo');

    let peopleId=userInfo.peopleId;

    var picture_list = that.data.picture_list;

    wx.uploadFile({

url: baseUrl +'impl/uploadImg',

        filePath: data.path[i].path,

        name:'file',

        formData: {

'type':1,

            'peopleId':peopleId,

        },

        success: (res) = {

wx.hideLoading();

            success++;

            let obj =  JSON.parse(res.data).data;

            if(obj.hasOwnProperty('url')){

picture_list.push({

url:obj.url,

                    id:obj.id

                });

                that.setData({

picture_list

})

}

},

        fail: (err) = {

wx.hideLoading();

            wx.showToast({

title:'上传失败!',

                icon:'none'

            })

fail++;

        },

        complete: () = {

i++;

            if (i == data.path.length) {//当图片传完时，停止调用

            }else {//若图片还没有传完，则继续调用函数

                data.i = i;

                data.success = success;

                data.fail = fail;

                that.uploadimg(data);//递归，回调自己

            }

}

});

},

deleteImg(e) {

let index=e.detail.index;

    console.log(index);

    let {picture_list}=this.data;

    let that=this;

    wx.showModal({

content:'确定删除？',

        success: (res) = {

if (res.confirm) {

picture_list.splice(index,1);

                that.setData({

picture_list

                })

console.log(that.data.picture_list);

            }else if (res.cancel) {

console.log('用户点击取消')

}

},

    })

},

小程序教程——Vant

1st.注意，小程序的包名不能是中文，所以当文件名是中文时不能使用-y 需要使用npm init 回车后自己手动输入包名

通过 npm 安装npm i @vant/weapp -S --production

通过 yarn 安装yarn add @vant/weapp --production

安装 0.x 版本npm i vant-weapp -S --production

将 app.json 中的 "style": "v2" 去除，小程序的 新版基础组件 强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

删除app.json 中的 "style": "v2"

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

"packNpmManually": true,

        "packNpmRelationList": [

            {

                "packageJsonPath": "./package.json",

                "miniprogramNpmDistDir": "./"

              }

        ],

修改project.config.json

注意： 由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为’./'即可

打开微信开发者工具，点击 工具 - 构建 npm ，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。

勾选 使用 npm 模块t

    当以上项目都完成之后，只需在.json文件中加入的"usingComponents"对象中注册需要使用的模块，即可在页面中使用

usingComponents中注册模块

附：Vant Weapp官网

介绍 - Vant Weapp (gitee.io)

微信小程序使用Vant

将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

打开微信开发者工具，点击  工具 - 构建 npm ，并勾选  使用 npm 模块  选项，构建完成后，

到 全局配置 app.json 中注册引入组件，详见 快速上手 。

支持default、primary、info、warning、danger五种类型，默认为default。  格式：

通过plain属性将按钮设置为朴素按钮

设置hairline属性可以开启 0.5px 边框，基于伪类实现。

通过disabled属性来禁用按钮，此时按钮的bind:click事件不会触发。

通过loading属性来设置加载按钮   loading-type="spinner"   loading-text="加载中..."

通过icon属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL。

label     输入框左侧文本

type    可设置为任意原生类型, 如 number   idcard    textarea    digit

readonly  是否只读

custom-style    自定义样式

autosize    是否自适应内容高度，只对 textarea 有效，可传入对象,如 { maxHeight: 100, minHeight: 50 }，单位为px

show :是否显示 

onClose 点击其他位置，关闭弹出层

position            可以设置为top、bottom、left、right。

Picker 选择器 需要配合弹出层使用

van-picker columns="{{ columns }}" bind:change="onChange" /

columns 对象数组，配置每一列显示的数据

onChange（e）    有默认参数 e 

value-key    选项对象中，文字对应的 key 通常用于对象数组

show-toolbar    是否显示顶部栏

defaultIndex     初始选中项的索引，默认为 0  不是双向绑定 需要自己改变defaultIndex  的值  需要渲染两次

关于vantlist小程序和小程序vant ui中文文档的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。