微信小程序 u-picker 三级联动 uView

这篇具有很好参考价值的文章主要介绍了微信小程序 u-picker 三级联动 uView。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信小程序 u-picker 三级联动 uView

  • 场景

移动端微信小程序框架 uView 中的 u-picker 实现三级联动 数据是一级一级加载的
[12,1201,120101] 多列联动

微信小程序 u-picker 三级联动 uView

先了解属性参数
  • mode可以设置为:time、region、selector、multiSelector,区分时间、地区、单列,多列模式。
  • default-region :设置默认的地区如:[“13”, “1303”, “130304”]
  • params:province、city、area,默认都为true
  • default-selector:默认初始值:‘[0, 1, 3]’
  • range-key:组件内部知道您想把对象的哪个属性当做要显示的值
  • @confirm:确定的方法 回调参数:column表示第几列发生了变化(从0开始),index表示当前的下标值
  • @cancel:取消的方法 回调参数:column表示第几列发生了变化(从0开始),index表示当前的下标值
  • @columnchange:列发生改变时触发,只对mode = multiSelector时有效

以上就是关于区域的基本属性还有其他时间等属性可以去官网查看

代码

HTML

<view class="" @click="areaFun">{{form.area_name}}</view> // 点击展开弹窗
<u-picker :params="params" 
	:default-selector="defaultAddress" 
	ref="uPicker" v-model="areaShow"
	mode="multiSelector" 
	:range="codeList" range-key="name"
 	@columnchange="columnCode"	
 	@confirm="conserveCode">
 </u-picker>

JS
亿点小知识:vue2.0 复杂数据更新数据不会更新视图所以这里使用的强制更新 this.$forceUpdate()

async areaFun() {
				let data = await addressCode() // 接口获取省市区的方法 默认返回省的方法
				// 初始化数据
				this.codeList = [
					[], //省
					[], //市
					[] // 区
				]
				this.codeList[0] = data.data.map((item) => { // 赋值 省的数据
						return {
							code: item.code,
							name: item.name
						}
				})
				this.$forceUpdate()
				 // 赋值 市的数据
				let datc = await addressCode(this.codeList[0][0].code) // 这里默认展示第一个
				this.codeList[1] = datc.data.map((item) => {
					return {
						code: item.code,
						name: item.name
					}
				})
				this.$forceUpdate()
				 // 赋值 区的数据
				let dat = await addressCode(this.codeList[1][1].code)
				this.codeList[2] = dat.data.map((item) => {
					return {
						code: item.code,
						name: item.name
					}
				})
				this.$forceUpdate()
				this.areaShow = true // 显示弹框
},

@columnchange:列发生改变时触发时的代码

async columnCode(e) {
				if (e.column == 0) { // 滑动第一列 更改第二列的数据 
					let datc = await addressCode(this.codeList[0][e.index].code)
					this.codeList[1] = datc.data.map((item) => {
						return {
							code: item.code,
							name: item.name
						}
					})
					this.$forceUpdate()
					let dat = await addressCode(this.codeList[1][0].code)
					this.codeList[2] = dat.data.map((item) => {
						return {
							code: item.code,
							name: item.name
						}
					})
					this.$forceUpdate()
				}
				if (e.column == 1) { // 滑动第二列 更改第三列的数据 
					let dat = await addressCode(this.codeList[1][e.index].code)
					this.codeList[2] = dat.data.map((item) => {
						return {
							code: item.code,
							name: item.name
						}
					})
					this.$forceUpdate()
				}
			},

点击确定回显刚刚选中的地区

conserveCode(e) { // 确定
				this.form.area_name =
					`${this.codeList[0][e[0]].name}/${this.codeList[1][e[1]].name}/${this.codeList[2][e[2]].name}`
			}

微信小程序 u-picker 三级联动 uView
以上就是微信小程序 u-picker 三级联动 uView感谢大家的阅读
如碰到其他的问题 可以私下我 一起探讨学习
如果对你有所帮助还请 点赞 收藏谢谢~!
关注收藏博客 作者会持续更新…文章来源地址https://www.toymoban.com/news/detail-493418.html

到了这里,关于微信小程序 u-picker 三级联动 uView的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp用picker实现自定义三级联动(children)

    数据大概得结构: html: js:

    2024年02月04日
    浏览(35)
  • uniapp picker mode=“multiSelector“ 实现省市区三级联动

     使用的数据如下格式:  

    2024年02月11日
    浏览(78)
  • 【uniapp】picker mode=“region“ 最简单的省市区 三级联动

    省市区 picker

    2024年02月12日
    浏览(49)
  • 微信小程序引入Uview

    1.使用Hbuilder创建小程序项目,模板选空。 直接在uni-app插件市场通过uni_modules的形式进行安装,在uni-app插件市场右上角选择uni_modules版本下的使用HBuilderX导入插件,导入到对应的项目中即可 地址:Uview2.0下载地址 1.引入Uview 在项目根目录中的main.js中,引入并使用uView的JS库,注

    2023年04月12日
    浏览(134)
  • 【微信小程序】页面tab栏与页面内容联动_微信小程序实现tabs跟下面的内容联动

    先自我介绍一下,小编浙江大学毕业,去过华为、字节跳动等大厂,目前阿里P7 深知大多数程序员,想要提升技能,往往是自己摸索成长,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前! 因此收集整理了一份《2024年最新大数据全套学习资料》,

    2024年04月28日
    浏览(45)
  • 微信小程序使用uView组件库

    在公司做的一个项目是微信小程序,因为小程序的ui图样式很简单,所以一开始是打算自己写的,但是后面发现有一些功能实现起来很冗杂,所以最终选择了使用微信小程序的ui组件库。 一开始是使用的是VantUi,但是不知道为什么在我的小程序里面跑不起来,所以后来选择使

    2024年01月19日
    浏览(90)
  • 【微信小程序】选择器组件picker

    picker组件是一种从底部向上弹起的滚动选择器。 在官方文档中,有提供五种类型的picker组件,如普通选择器,多列选择器,时间选择器,日期选择器和省市区选择器。 (猜测是,这些选择器时不同的且常用的某种类型,于是就产生固定的模版)。 而在写法上是这么写滴,

    2024年01月18日
    浏览(58)
  • 【微信小程序】picker 滚动选择器

    参考:picker | 微信开放文档 刚开始使用的是vantweap的picker,但是居然有蒙版还无法自定义样式。 Picker 选择器 - Vant Weapp 苦恼ing。最后看到原生组件有自定义蒙版样式,豁然开朗~ 激活项的蒙版在文字上方   利用relative的层级z-index:-1展示在文字下方。

    2024年02月16日
    浏览(42)
  • 微信小程序picker多列选择器

    微信官方文档的的案例数据是写死,而且代码阅读性特别差 下面是我参考官方案例写的一个多列选择器,数据是都 动态获取 的 这是一个二列的选择器,如果需要三列的可以稍加修改一下 一、wxml 二、js 选择器中的数据都是 动态获取 的,只要将数据转成跟 data 中的数据格式

    2024年02月11日
    浏览(45)
  • 微信小程序 简单的实现左右内容联动

    scroll-view 的属性 scroll-into-view 可以实现类似于瞄点链接的效果,在绑定的属性修改时会触发,滑动到对应id的地方 注意: id不能以数字开头 设置两个变量 tabIndex 、 nowIndex 保存状态,如果只设置一个更新变量时会触发瞄点更新 通过 tabIndex 更新瞄点 通过 nowIndex 设置当前的分类

    2024年02月03日
    浏览(69)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包