分类：picker

2021
03-24

移动端Vue2.x Picker的全局调用实现

什么是Picker组件对标PC端的Select标签,移动端的选择框一般是在viewPort底部弹出Picker组件存在的问题Picker通常以fixed布局，但是我们在写Picker组件时有遇到过该组件无法在viewport的底部弹出，而是在组件内部弹出，导致样式混淆，不符合C端审美，造成以上问题的原因是因为[层叠上下文]的原因，fixed布局并不是基于viewport为底板，而是当前的层叠上下文Picker若是放置在根组件下的话会造成数据流流向出现混淆，嵌套过深层... 继续阅读 >

2020
11-13

Vant Weapp组件踩坑:picker的初始赋值解决

在使用vant的picker组件时，我希望有在页面加载时向数据库获取值来设置picker的默认值。开始我使用官方文档中的default-index属性，并在onLoad方法中进行this.setData()。但是这样做picker的默认索引还是0。于是我又将setData放入onShow()、onReady()方法，均不奏效。（我真的不知道为什么，新建一个空白页面测试也是这样）继而我查看官方文档，发现picker有实例方法setIndexes()，于是尝试。然而我在onLoad()、onReady()方法中通... 继续阅读 >

2020
11-04

vant picker+popup 自定义三级联动案例

picker选择器的数据由columns属性控制，columns中有几个元素就代表该选择器有多少级，通过change方法来给对应列赋值。columns=[{values:column1,//对应列的值defaultIndex:0,//默认选中项索引className:'class1'//对应列的类名},{values:[],defaultIndex:0,className:'class2'},{values:[],defaultIndex:0,className:'class3'}];demo<template><divclass="form"... 继续阅读 >

2020
11-03

Vant picker 多级联动操作

官网地址：链接官网文档可能不是很完善，但仔细看文档，方法，类型其实都讲到的。度娘也没有找到，花了大半天爬坑试错。搭配弹出层使用<van-fieldreadonlyclickableplaceholder="选择城市":value="station"@click="showPicker=true"/><van-popupv-model="showPicker"position="bottom"><van-pickershow-toolbar:columns="columns"@cancel="showPicker=false"@confirm="onConfirm"@change="onChange"/></van-popu... 继续阅读 >