uniapp , uview1.0 , picker选择器

最新推荐文章于 2024-07-25 08:54:13 发布
最新推荐文章于 2024-07-25 08:54:13 发布
阅读量328 收藏
点赞数
文章标签： uni-app 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_75166666/article/details/129967369
版权

需求：点击确认把选中的值保存到页面相应的位置

1.单列选择器思路：点击确定时会有一个成功的回调函数，confirm，打印confirm内的参数得到相关的值，再用这个值进行三元判断即可。

 代码：

小水今天学习了没
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uview u-select单列使用
LO520_1314的博客
11-01 815
uview u-select单列使用
uniapp uView u-picker组件三级联动Demo
02-12
- 1、分2个入口：一个添加，一个编辑（编辑涉及到数据回显） - 2、添加的时候，展示的数据是默认的，是上一列第一行数据的详情（所有的年级（第一列），一年级...- 7、选择数据之后把数据赋值给`input`框显示 并关闭框
使用uview1.0 ，uview picker组件时，mode=“time“ 时间类型，日期不允许选择当前日期之后的日期（例如出生年月）实现方法
m0_55074611的博客
08-03 939
使用uview1.0中的picker组件，实现日期最大可选值功能，官方文档不支持处理最大月，日值，通过修改源码的方式来实现次功能。具体操作步骤有以下几点： 1、在使用u-picker 组件的页面组件上 新增传参:timeEnd="endTime" 2、在onShow 函数中给endTime中的值进行赋值 3、修改源码，新增函数 timeHandle，在该函数中处理年月日的最大显示 4、修改 timeHandle 中所调用的函数，加传参，使用原本的uview 防撞好的逻辑 5、在初始化函数中，watch中调用
uView的组件u-picker 选择器
努力、拼搏、奋进
10-18 1844
uView的组件u-picker 选择器
uniapp-微信小程序自定义picker选择器（仅限单项选择）
qq_28257105的博客
12-28 2184
uniapp 微信小程序自定义picker选择器（仅限单项选择）
uview组件库 u-picker组件选项滑动选中延时、单列选择器默认选中
weixin_55648290的博客
03-18 6700
uview组件库 u-picker组件选项滑动选中延时、单列选择器默认选中
uniapp关于uview-ui中u-picker（picker-view）快速滚动点击确定错误
weixin_45930427的博客
08-25 756
首先我们要知道，uview-ui中的u-picker底层也是使用。中集成的picker-view。
uView1.0.zip
11-22
《uView1.0：构建高效Vue项目的利器》 在当今快速发展的前端开发领域，Vue.js作为一款轻量级、高性能的MVVM框架，已经深受开发者喜爱。而uView UI框架，作为Vue生态中的重要组件库，更是为开发者提供了丰富的UI组件...
uview2.0实现picker省市区选择以及默认选择
08-25
uview2.0实现picker省市区选择以及默认选择
uniapp使用uview组件实现省市区三级联动
06-29
在本文中，我们将深入探讨如何在uni...通过合理组织数据和使用uView提供的选择器组件，可以构建出高效、易用的界面，大大简化了开发过程。在实际开发过程中，还要注意代码的可维护性和适应性，以满足不同场景下的需求。
uview2.0uview2.0
04-22
uView2.0是对uView1.0的升级版本，带来了更多的特性、优化和改进，以满足现代Web开发的需求。 在uView2.0中，我们能看到一系列精心设计的组件，如按钮、输入框、表格、导航栏、底部导航、滑动选择器、时间日期选择...
【Uni-App】用 uView 组件库中的u-picker 实现地区的 省-市-区 三级联动&确认&回显
Write less，do more
01-10 6939
uniapp 用 uView 组件库中的u-picker 实现地区的 省-市-区 三级联动
uniapp的picker日期选择器使用
lindeliang的博客
03-14 1967
日期选择默认在App端和H5端（PC版Chrome以及PC版FireFox)调用的是os的原生日期选择控件，在不同平台有不同的ui表现，当配置fields参数后使用统一的展示方式。支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。官方文档：https://uniapp.dcloud.net.cn/component/picker.html。注意fields的使用，不同的值选显示不同的选择器粒度。示例代码如下：​​​​​​​。
【uview2.x u-picker省市区三级联动】
阿鹏的博客
11-28 1564
uView2.x Picker 选择器 多列模式与多列联动
小程序-picker组件的使用、数据回显
weixin_44138723的博客
09-17 6353
picker组件的使用 通过点击picker选择器，触发bingchange绑定的事件函数。 在picker组件自定义data-i=“{{I}}”,在事件函数中通过e.target.dataset.i获取到data-i里的值。(这里的i代表数组中对象的下标值) 获取事件对象e获取到‘选择器中选中元素’的下标，即(e.detail.value) 一对一：即 对象数组[i].属性 = 选择器元素所在数组[e.detail.value].属性 打印对象事件e picker数据回显 ！！设置index
uniapp怎么定制实现一个选择器
qq_52845451的博客
09-17 381
uniapp怎么定制实现一个选择器
uniapp uview1.0x 下拉选择fs-select，日期下拉选择u-picker 组件简单分装
weixin_46211267的博客
11-30 6081
uview组件 下拉 和 日期简单分装 u-select封装 <!-- 点击弹窗下拉选择 可 单/多 列--> <template> <view> <u-input input-align="right" :placeholder="`请选择 ${placeholder}`" v-model="valueLable" type="select" :select-open="show" @click="show = true" :border="border"
uniapp时间戳转时间
最新发布
weixin_59527403的博客
07-25 328
【代码】uniapp时间戳转时间。
uniapp Uview picker怎么实现五级选择器
05-29
要实现五级选择器，可以使用uView组件库中的Picker组件，并在其内部嵌套多个Picker组件。下面是一个五级选择器的示例代码： ```html <template> <view class="picker"> <picker :range="provinceList" @change="provinceChange"></picker> <picker :range="cityList" @change="cityChange"></picker> <picker :range="districtList" @change="districtChange"></picker> <picker :range="streetList" @change="streetChange"></picker> <picker :range="villageList" @change="villageChange"></picker> </view> </template> <script> export default { data() { return { provinceList: ['省份1', '省份2', '省份3'], cityList: ['城市1', '城市2', '城市3'], districtList: ['区县1', '区县2', '区县3'], streetList: ['街道1', '街道2', '街道3'], villageList: ['村庄1', '村庄2', '村庄3'] } }, methods: { provinceChange(e) { // 省份变化时更新城市列表 const index = e.detail.value this.cityList = this.getCityList(index) }, cityChange(e) { // 城市变化时更新区县列表 const index = e.detail.value this.districtList = this.getDistrictList(index) }, districtChange(e) { // 区县变化时更新街道列表 const index = e.detail.value this.streetList = this.getStreetList(index) }, streetChange(e) { // 街道变化时更新村庄列表 const index = e.detail.value this.villageList = this.getVillageList(index) }, villageChange(e) { // 村庄变化时输出最终结果 const index = e.detail.value const province = this.provinceList[index[0]] const city = this.cityList[index[1]] const district = this.districtList[index[2]] const street = this.streetList[index[3]] const village = this.villageList[index[4]] console.log(`${province}-${city}-${district}-${street}-${village}`) }, getCityList(provinceIndex) { // 根据省份获取城市列表 // TODO: 根据实际需求替换为异步请求或本地数据 return ['城市1', '城市2', '城市3'] }, getDistrictList(cityIndex) { // 根据城市获取区县列表 // TODO: 根据实际需求替换为异步请求或本地数据 return ['区县1', '区县2', '区县3'] }, getStreetList(districtIndex) { // 根据区县获取街道列表 // TODO: 根据实际需求替换为异步请求或本地数据 return ['街道1', '街道2', '街道3'] }, getVillageList(streetIndex) { // 根据街道获取村庄列表 // TODO: 根据实际需求替换为异步请求或本地数据 return ['村庄1', '村庄2', '村庄3'] } } } </script> <style> .picker { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } </style> ``` 在上面的代码中，我们使用了五个Picker组件，分别对应省份、城市、区县、街道、村庄五个级别。每当用户选择某个级别的选项时，我们会根据该级别的值更新下一个级别的选项列表。当用户选择最后一个级别时，我们会输出最终的选择结果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值