微信小程序自定义省市县联动组件

呀,markdown不会用啊…

微信小程序自带picker,当mode = region时,就是使用自带的省市县选择器.
但是有一个缺点,就是省市县的名称有时会特别长,特别是选到一些少数民族地区时,导致展示出来的区域不好布局.
这里自己简单封装了一个省市县的组件.把一些很长的名字给简化了.
使用很简单.把组件region-picker放在小程序项目下,在.json文件中声明下,然后页面直接引用就可以了.
比如,需要在index页面引入该组件

index.json需要如下配置:(后面的具体路径,改动下即可.)

{"usingComponents": {"region-picker": "/components/region-picker/region-picker"}
}

然后index.wxml直接使用:

<region-picker bind:change="addressChange"></region-picker>

最后在index.js中定义addressChange响应事件即可

  addressChange : function(event){console.log(event.detail);}

打印出来的结果:

其中indexArr指选中的省市县分别在对应列下的索引.不过这个值没什么用.
regionArr就是需要的结果.其中id是对应的主键,省市县的记录均保存在数据库里.这样就可以和后端交互了.

需要的小伙伴直接 git clone,里面也有省市县的SQL语句

git clone git@github.com:DarylHC/region-picker.git

微信小程序自定义省市县联动组件相关推荐

微信小程序自定义picker弹框组件
要有遥不可及的梦想,也要有脚踏实地的本事.----------- Grapefruit.Banuit Gang(香柚帮) 柚子写项目遇到了一个问题,就是微信小程序官方文档上面的弹框组件picker,它 ...
微信小程序自定义弹出框组件，模拟wx.showModal
微信小程序开发交流qq群 173683895 效果图: 代码 wxml <view wx:if='{{showModal}}'><view class='mask_layer' ...
微信小程序 - 自定义头部导航栏组件（详解） + iphoneX以上遮挡小黑条适配问题
1. 导航栏计算: 导航栏总高度=状态栏高度+胶囊高度+(胶囊距顶距离-胶囊高度)*2 navHeight = statusBarHeight + menuButtonObject.height + ...
原生微信小程序自定义省市县三级联动(picker)
wxml:  <view><view class="section__title"> ...
微信小程序自定义状态栏navigationBar样式组件，适配所有机型
一.在app.json设置navigationStyle自定义 "window": {"navigationStyle": "custom" ...
微信小程序自定义图片上传组件
实现功能: 点击上传按钮可上传图片,并且可定义最多可上传的图片数量.限制图片的大小.类型和来源. 点击图片可预览图片. 点击删除按钮可删除图片. <!-- image-upload.wxml - ...
微信小程序自定义组件方案
前言:小程序已于11月初开放了小程序组件功能,但事件方面还不是很完善,有的组件暂时可能还是要用其他方式来实现,这里简单记录下开发小程序自定义组件的要点. 在小程序官方开发组件开发功能之前,自定义组件的 ...
微信小程序自定义组件，提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加"components"目录,然后像添加Page ...
微信小程序自定义组件(二)
微信小程序自定义组件 ps 由于作业部落貌似出了点问题,耽误了点时间,找了一个stackedit.io准备写.无奈,这是要自己建编辑器的节奏啊.没有一个能靠的注为何存在组件组件间的关系使用rel ...
微信小程序下拉框插件_微信小程序自定义select下拉选项框组件的实现代码_清玖_前端开发者...
知识点:组件,animation,获取当前点击元素的索引与内容微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件, ...

微信小程序自定义省市县联动组件

微信小程序自定义省市县联动组件

微信小程序自定义省市县联动组件相关推荐

最新文章

热门文章