关于uni-app的Picker选择器默认选择的问题
在使用uni-app的Picker选择器时，有时选择器的默认选择是后台传递的参数进行决定，或者是上一个界面传递过来的参数进行默认展示，我们该怎么解决呢？
我这里展示上一个界面传递参数改变picker的默认选择
首先进行传参
一、界面1
盒子部分：
<view
class="carbox"
v-for="item in carList"
:key="item.type"
@click="getadd(item.type)"
>
数据部分：
data() {
return {
carList: [
{
flag: "事假",
tips: "按小时请假",
type: "01",
dotColor: "#F0AD00",
},
{
flag: "调休",
tips: "按小时请假",
type: "02",
dotColor: "#4C84FF",
},
{
flag: "病假",
tips: "按小时请假",
type: "03",
dotColor: "#FD5461",
},
{
flag: "年假",
tips: "按半天请假",
type: "04",
dotColor: "#29C293",
},
{
flag: "产假",
tips: "按天请假",
type: "05",
dotColor: "#F0AD00",
},
{
flag: "陪产假",
tips: "按天请假",
type: "06",
dotColor: "#4C84FF",
},
{
flag: "婚假",
tips: "按天请假",
type: "07",
dotColor: "#F0AD00",
},
{
flag: "例假",
tips: "按半天请假",
type: "08",
dotColor: "#29C293",
},
{
flag: "丧假",
tips: "按天请假",
type: "09",
dotColor: "#FD5461",
},
{
flag: "哺乳假",
tips: "按小时请假",
type: "10",
dotColor: "#F0AD00",
},
],
};
},
//进行传参
methods:{
getadd(type){
uni.navigateTo({
url:`./home?type=${type}`//目标路由
})
}
}
二、界面2
盒子部分：
<!-- 选择器 -->
<view class="type">
<picker @change="(e) => bindPickerChange(e,'leavetype')" :value="leaveindex" :range="listData"
:range-key="leavevalue">
<view class="picktxt">{{listData[leaveindex][leavevalue]}}</view>
</picker>
</view>
data数据部分：
data() {
return {
// 请假类型
leaveindex: 0,
leavevalue: "text",
//定义接收参数的值
typeid：""，
//picker数据列表
listData: [{
text: "事假",
type: "01"
},
{
text: "调休",
type: "02"
},
{
text: "病假",
type: "03"
},
{
text: "年假",
type: "04"
},
{
text: "产假",
type: "05"
},
{
text: "陪产假",
type: "06"
},
{
text: "婚假",
type: "07"
},
{
text: "例假",
type: "08"
},
{
text: "丧假",
type: "09"
},
{
text: "哺乳假",
type: "10"
},
],
}
}，
//接收参数
onLoad(e){
this.typeid = e.type
console.log(this.typeid)
},
mounted() {
this.leaveindex = this.listData.findIndex((item) => item.type === this.typeid);//根据findIndex方法查找对应下标进行匹配
},
methods: {
bindPickerChange(e, type) {
if (type == 'leavetype') {
this.leaveindex = e.target.value
}
},
}
关于uni-app的Picker选择器默认选择的问题相关推荐
- Picker 选择器
Picker 选择器 层级选择 使用Ant Design Mobile Ant Design Mobile 数据项 const province = [{label: "北京",v ...
- vant 验证手机号_【uni app】vant weapp的引入和部分详细调用（表单输入框、验证码、弹出层搭配选择器、地图）...
本次小程序的开发使用uni app+vant weapp,vant weapp如何引用和部分组件使用方法如下 引入 在github(https://github.com/youzan/vant-wea ...
- vue vant Popup 弹出层 与 Picker 选择器 的完美结合 实现多级列表选择
前言: 在写项目的时候,经常会碰到选择列表,为了更完美的实现效果,使用了vant里面的 Popup 弹出层 + Picker 选择器 效果图: 页面结构: van-field 是vant里面的输入框组 ...
- uniapp三级地区picker选择器
今天来介绍一个三级选地区的picker选择器.大概长这样. 地址的数据我是拿高德api获取的数据.获取的数据是这样. (1)首选我们获取高德api的秘钥.之后创建一个key秘钥. https://co ...
- 微信小程序-自定义picker选择器
github地址 为什么要自定义picker 原生小程序picker不支持自定义样式,无联动. 该自定组件 支持自定义数据 支持自定义样式 支持传入和返回对象或者基本类型 支持联动(改变父列,子列根据 ...
- 切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言 本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
- 小程序picker标题_微信小程序-自定义picker选择器
avatar 为什么要自定义picker 原生小程序picker不支持自定义样式,无联动. 该自定组件 支持自定义数据 支持自定义样式 支持传入和返回对象或者基本类型 支持联动(改变父列,子列根据关联 ...
- HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...
- MPX + Vant Weapp 在微信小程序中实现Picker选择器
目录 功能概述 实现步骤 在MPX项目中引入Vant Weapp Popup与Picker组件结合实现Picker选择器 代码 效果 实现单页面中的多个Picker选择器 代码 Picker选择器的多 ...
最新文章
- SpringInAction--自动化装配Bean（显示装配之xml配置）
- mysql开启yum search pt-mysql_Centos使用MySQL工具Percona Toolkit
- Python 小白从零开始 PyQt5 项目实战（4）基本控件
- 关于Calendar用法的一些总结
- C语言常用8种排序方法耗时测试
- 人工智能原理与方法作业1
- IDEA常用快捷键汇总
- 使用Simscape搭建车辆仿真模块
- 计算机用户目录是什么,c盘里面users是什么文件夹
- AWS硬盘扩容过程记录
- java+selenium——Navigate命令
- linux下自动更换壁纸软件,适用于Ubuntu 18.04的4款最佳壁纸自动切换软件
- WORD如何使得公式居中，公式编号右对齐？
- 考试系统主服务器进入 分机进不去,为什么驾校考试系统网址进不去
- 停止无效学习，4种高效学习方法，快速提升自己
- 免费AWS EC2实例
- C语言中的指数函数pow()问题
- 我的雷电游戏（重力感应控制）
- Linux下的cmt2300a驱动
- 让 new bing 使用 GPT-4 编写一个令人满意的程序全过程赏析