微信小程序三级联动（数据在我的资源里）

最新推荐文章于 2024-08-13 16:20:34 发布

yuhaiqi666

最新推荐文章于 2024-08-13 16:20:34 发布

阅读量2.3k

点赞数

分类专栏：新手学习文章标签：微信小程序

本文链接：https://blog.csdn.net/yuhaiqi666/article/details/78563907

版权

本文介绍了如何在微信小程序中创建三级联动的功能，通过详细步骤和示例代码，展示如何处理不同层级的数据交互，实现动态筛选的效果。

摘要由CSDN通过智能技术生成

在js中

 
  //index.js 
 
  //获取应用实例 
 
  const app = getApp() 
 
  var address= 
  require( 
  '../../../utils/regions.js') 
 
   Page({ 
 
   data: { 
 
   animationAddressMenu: {}, 
 
   addressMenuIsShow: 
  false, 
 
   value: [ 
  0, 
  0, 
  0], 
 
   provinces: [], 
 
   citys: [], 
 
   areas: [], 
 
   areaInfo: 
  '请选择 >' 
 
   }, 
 
  //事件处理函数 
 
   bindViewTap: 
  function() { 
 
   wx.navigateTo({ 
 
   url: 
  '../logs/logs' 
 
   }) 
 
   }, 
 
   onLoad: 
  function () { 
 
  var id = address.provinces[ 
  0].id 
 
  this.setData({ 
 
   provinces: address.provinces, 
 
   citys: address.citys[id], 
 
   areas: address.areas[address.citys[id][ 
  0].id], 
 
   }) 
 
   }, 
 
   pickTab: 
  function(e){ 
 
  var that = 
  this 
 
  if (that.data.addressMenuIsShow) { 
 
  return 
 
   } 
 
   that.startAddressAnimation( 
  true) 
 
   }, 
 
  // 点击所在地区弹出选择框 
 
   selectDistrict: 
  function (e) { 
 
  var that = 
  this 
 
  // 如果已经显示，不在执行显示动画 
 
  if (that.data.addressMenuIsShow) { 
 
  return 
 
   } 
 
  // 执行显示动画 
 
   that.startAddressAnimation( 
  true) 
 
   }, 
 
  // 执行动画 
 
   startAddressAnimation: 
  function (isShow) { 
 
   console.log(isShow) 
 
  var that = 
  this