微信小程序picker组件–省市二级联动及其回显

dz88i8

已于 2024-12-03 19:04:43 修改

阅读量2.1k

点赞数 3

文章标签：微信小程序小程序

于 2023-07-07 10:36:50 首次发布

本文链接：https://blog.csdn.net/weixin_57714644/article/details/131591676

版权

本文介绍了如何在微信小程序中使用picker组件实现省市二级联动的效果，并详细讲解了如何在用户加载页面时获取已选择的省市区信息，并将这些信息正确地回显到picker组件中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 在wxml文件中添加picker组件

 

   
  
    
    
    
     {{region[0]}} {{region[1]}} {{region[2]}}

2. 在js文件中定义region变量，并在onLoad函数中初始化

 
Page({ 
  data: { 
    region: ['北京市', '北京市', '东城区'] 
  }, 
  onLoad: function () { 
    // 初始化region变量 
    this.setData({ 
      region: ['北京市', '北京市', '东城区'] 
    }) 
  }, 
  bindRegionChange: function (e) { 
    console.log('picker发送选择改变，携带值为', e.detail.value) 
    this.setData({ 
      region: e.detail.value 
    }) 
  } 
})

3. 在onLoad函数中获取用户已选择的省市区信息，并将其赋值给region变量

 
Page({ 
  data: { 
    region: [] 
  }, 
  onLoad: function () { 
    // 获取用户已选择的省市区信息 
    wx.getStorage({ 
      key: 'region', 
      success: (res) => { 
        console.log(res.data) 
        this.setData({ 
          region: res.data 
        }) 
      } 
    }) 
  }, 
  bindRegionChange: function (e) { 
    console.log('picker发送选择改变，携带值为', e.detail.value) 
    this.setData({ 
      region: e.detail.value 
    }) 
    // 将用户选择的省市区信息保存到本地 
    wx.setStorage({ 
      key: 'region', 
      data: e.detail.value 
    }) 
  } 
})

)