三级联动:js实现淘宝地址更改

在淘宝购物的时候,我们经常会遇到收获地址的选择,当省份发生改变时,城市,乡镇会随之发生改变。
这个三级联动的效果我们可以通过js来实现。
在写这个案例时,博主将地址的信息存储在了一个json对象中,并把json对象存在了一个js文件中,存储地址信息的js文件可以去博主的资源中下载哦~~

效果图:

这里写图片描述

html及css代码如下:

<!-- css代码-->
<style>
        *{
    margin: 0;padding:0;}
        .main{
    overflow: hidden;width:650px;margin: 100px auto;}
        select{
    display: inline-block;width:100px;height:
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
在Uniapp中实现地址三级联动,可以使用uni-simple-router插件结合van-picker组件来实现。以下是一个简单的示例: 1. 首先,安装uni-simple-router和van-picker插件: ```bash npm install uni-simple-router npm install vant ``` 2. 创建一个router.js文件,并配置路由: ```javascript import Vue from 'vue'; import Router from 'uni-simple-router'; Vue.use(Router); const router = new Router({ routes: [ // ...其他路由配置 { path: '/address', name: 'address', component: () => import('@/pages/Address.vue') } ] }); export default router; ``` 3. 在main.js文件中引入router.js,并注册路由: ```javascript import Vue from 'vue'; import App from './App'; import router from './router'; Vue.config.productionTip = false; App.mpType = 'app'; const app = new Vue({ ...App, router }); app.$mount(); ``` 4. 创建一个Address.vue组件,用于显示地址选择器: ```vue <template> <view> <van-picker title="选择地址" :columns="columns" @change="onChange" ></van-picker> </view> </template> <script> export default { data() { return { columns: [ // 省份数据 { values: ['北京', '上海', '广东'], defaultIndex: 0 }, // 城市数据 { values: ['北京市', '上海市', '广州市'], defaultIndex: 0 }, // 区域数据 { values: ['东城区', '徐汇区', '天河区'], defaultIndex: 0 } ] }; }, methods: { onChange(event) { console.log(event.detail); } } }; </script> ``` 在以上示例中,我们使用了van-picker组件来实现地址三级联动,通过columns属性来设置省份、城市和区域的数据。在onChange方法中,可以获取用户选择的地址信息。 通过以上步骤,你可以在Uniapp中实现地址三级联动的功能。当然,你可以根据实际需求进行修改和扩展。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值