uniapp,小程序或APP的底部弹出的滚动选择组件picker,三级联动,选择地址。

简介: uniapp,小程序或APP的底部弹出的滚动选择组件picker,三级联动,选择地址。

这个元素直接就可以生成底部弹出效果看图:

image.png

这里说下最基础的用法,实现上图效果

/*@change是点击确认的回调,
range是绑定的数组对象,
range-key是指定对象中key值作为选择器显示内容
value是值表示选择了range中的第几个下标,
mode是选择的弹出层类型*/
<picker @change="bindPickerChange" :range="array" range-key="name" :value="value"mode="selector">
  这是内容区
</picker>
//data里的数据
array: [{
  name: '国家机关、党群组织、企业、事业单位负责人'
  }, {
  name: '专业技术人员'
  }, {
  name: '办事人员和有关人员'
  }],

image.png

更多操作用法请看官方文档

相关文章
|
5天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
78 7
|
5天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
59 1
|
5天前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
54 3
|
9天前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
50 1
|
10天前
|
存储 API 数据库
uniapp APP自动更新组件
uniapp APP自动更新组件
27 1
|
10天前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
111 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
5天前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
22 0
|
9天前
|
小程序 数据可视化 API
低代码可视化-uniapp商城首页小程序-代码生成器
低代码可视化-uniapp商城首页小程序-代码生成器
14 0
|
9天前
|
小程序
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
91 0
|
12天前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
28 0
微信小程序更新提醒uniapp