小程序-基于vant的Picker组件实现省市区选择

这篇具有很好参考价值的文章主要介绍了小程序-基于vant的Picker组件实现省市区选择。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、原因

因@vant/area-data部分的市/区数据跟后台使用的高德/腾讯省市区有所出入,故须保持跟后台用同一份数据,所以考虑以下几个组件

1、Area
2、Cascader
3、Picker

因为使用的是高德地图的省市区json文件,用area的话修改结构代价太大,费时费力。接着尝试使用Cascader组件,但这个组件每列数据过多时会滑动、点击卡顿等等,故也排除,只剩最后的picker了

Cascader卡顿:

 二、使用

小程序-基于vant的Picker组件实现省市区选择,小程序,vant,picker省市区,小程序,vant,picker,省市区

刚开始看文档这个结构一时没有理解,有点懵,后面经过研究发现需要如下结构

高德gaode-area.json为例,点击就可以下载高德省市区数据(包含压缩和未压缩的)

因为想减少小程序的体积,故把文件丢到服务器上了

2.1、页面代码
 <van-field name="area" model:value="{{ area }}" label="地区选择" placeholder="请选择地区" clearable readonly is-link data-popups="showArea" bind:click-input="show_popup" />

<!-- 省市区 -->
<van-popup show="{{ showArea }}" position="bottom" round data-popups="showArea" bind:close="hide_popup">
    <van-picker columns="{{ addrs }}" show-toolbar title="地区选择" value-key="name" bind:change="onAreaChange" data-popups="showArea" bind:confirm="onAreaConfirm" bind:cancel="hide_popup" />
</van-popup>
2.2、js代码
// 主要js

getAreas() {
        let that = this
        wx.request({
            url: `${app.globalData.urls}/gaode-area.json`,
            header: {},
            success(res) {
                let result = res.data.districts[0].districts
                let arrs = [{
                    values: result
                }, {
                    values: result[0].districts,
                    defaultIndex: 0,
                }, {
                    values: result[0].districts[0].districts,
                    defaultIndex: 0,
                }]
                that.setData({
                    addrs: arrs
                })
            }
        })
    },


// 省市区变动
    onAreaChange(e) {
        const {
            picker,
            value,
            index
        } = e.detail;
        if (index === 0) {
            // 修改省
            picker.setColumnValues(1, value[0].districts);
            picker.setColumnValues(2, value[0].districts[0].districts);
        } else if (index === 1) {
            // 修改市
            picker.setColumnValues(2, value[1].districts);
        }
    },

    // 确认选择省市区
    onAreaConfirm(e) {
        let value = e.detail.value
        let addr_value = `${value[0].name}${value[1].name}${value[2].name}`;
        this.setData({
            province: value[0].name, // 省份
            city: value[1].name, // 城市
            district: value[2].name, // 区县
            province_adcode: value[0].adcode,
            city_adcode: value[1].adcode,
            district_adcode: value[2].adcode,
            area: addr_value,
            showArea: false,
        })
    },
2.3、效果

小程序-基于vant的Picker组件实现省市区选择,小程序,vant,picker省市区,小程序,vant,picker,省市区

 

三、 注意事项

在开发者工具上预览和使用会明显感觉到滑动,点击卡顿,但在真机,手机预览的时候不会出现卡顿问题,体验感不错,发布了之后用正式版测目前也没有发现问题文章来源地址https://www.toymoban.com/news/detail-660283.html

到了这里,关于小程序-基于vant的Picker组件实现省市区选择的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • element ui 下拉菜单组件 结合springboot 实现省市区简易三级联动 动态查询 并修改地点的省市区

    目录 前言: 一.数据库表结构:  二.下拉菜单组件 2.1 效果展示 2.2下拉菜单的组件代码: 本篇博客,通过官网的学习,实现下拉菜单动态数据的传递与点击事件,如果只是按部就班的按照官网来,官网下拉菜单模板所提供的事件只能传死数据,很多博主都是照虎画猫,传递

    2024年02月12日
    浏览(76)
  • vue实现省市区三级联动地址选择组件

    昨天收到一个新的需求,需要选择地址,因此就要做一个省市区三级联动的组件来使用,在网上找了一些资源,然后进行了尝试,没想到就这么成功了!要记录一下方便后续使用。 效果如下:  下面就记录一下代码叭! 后面因为需要动态绑定,以及处理回显问题,就需要进

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

    省市区 picker

    2024年02月12日
    浏览(48)
  • 前端Vue自定义简单通用省市区选择器picker地区选择器picker 收获地址界面模版

    随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随

    2024年02月10日
    浏览(65)
  • 【uniapp】省市区下拉列表组件

    2024年04月11日
    浏览(47)
  • Element UI 自定义省市区三级联动选择组件

    https://blog.csdn.net/qq_42690194/article/details/125669141

    2024年02月11日
    浏览(64)
  • 中国省市区地区选择组件(ElementPlus + Vue3 + TS )

    1.引用 2.用法 provinceAndCityData :省市数据(不带“全部”选项) regionData :省市区数据(不带“全部”选项) provinceAndCityDataPlus :省市区数据(带“全部”选项) regionDataPlus :省市区数据(带“全部”选项) CodeToText :例如:CodeToText[‘110000’]输出北京市 TextToCode :例如:

    2023年04月27日
    浏览(68)
  • uni-app封装省市区下拉组件(后台获取数据)

    一.后台数据格式  PROCINCE:[{itemName:\\\'\\\',itemValue:\\\'\\\'}] CITY:[{itemName:\\\'\\\',itemValue}] AREA:[{itemName:\\\'\\\',itemValue}] 前端将地址数据缓存在了pinia中 前端主要使用picker进行勾选 二.代码

    2024年02月12日
    浏览(54)
  • 支付宝实现省市区三级联动my.multiLevelSelect(附带省市区js数据)

    可以供用户选择所在位置、喜好位置。可用于根据用户所选位置给用户提供该位置的特色美食,附近的电影院,周边环境等。 视频 支付宝省市区三级联动 图片 点击按钮button,让其弹框。用户可在弹框中选择位置,选中后让其显示在第三个view标签里 select 。 provinceAndCity.js数

    2024年02月09日
    浏览(103)
  • Vue------实现省市区三级联动

    本篇将用,vue框架实现省市区三级联动 三个下拉框,分别代表省、市、区 下面的任务就是,分别绑定 省、市、区三个下拉框: 点击省会出现所有的省份 点击对应的省份,市下拉框会对应出现对应的市 点击市会出现所有的市 点击对应的市,区下拉框会对应出现对应的区。

    2023年04月24日
    浏览(72)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包