1.WXML

       <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
<view class="picker">
{{multiArray[0][multiIndex[0]]}}{{multiArray[1][multiIndex[1]]}}{{multiArray[2][multiIndex[2]]}}
</view>
</picker>

2.JS

//res.data.data.arrayList是后台获得的数据,
数据传来的格式是见图

Page({
data: {
multiIndex: [0, 0, 0],
multiArray: [[],[],[]],
},
  onShow(){
res.data.data.arrayList.forEach(function (v,i) {
v.shopList.forEach(function (j, d) {
j.shopList.forEach(function (t, p) {
that.data.shopId = ret.data
if (t.sysUserId == ret.data) {
that.data.multiIndex[0] = i
that.data.multiArray[1] = []
that.data.multiArray[2] = []
that.setData({
multiIndex: that.data.multiIndex,
multiArray: that.data.multiArray
})
res.data.data.arrayList[that.data.multiIndex[0]].shopList.forEach(function (g, t) {
that.data.multiArray[1].push(g.cityName)
if (d == t) {
j.shopList.forEach(function (l) {
that.data.multiArray[2].push(l.districtName)
})
}
})
that.data.multiIndex[2] = p
that.data.multiIndex[1] = d
that.setData({
multiIndex: that.data.multiIndex,
multiArray: that.data.multiArray
})
}
})
})
})
}

微信小程序 自定义三列城市弹窗的更多相关文章

  1. 微信小程序自定义弹窗wcPop插件|仿微信弹窗样式

    微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗 平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改.这个时候首先想到的 ...

  2. 微信小程序自定义 tabbar

    一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tab ...

  3. 微信小程序-自定义底部导航

    代码地址如下:http://www.demodashi.com/demo/14258.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  4. 微信小程序——自定义导航栏

    微信头部导航栏可能通过json配置: 但是有时候我们项目需求可能需要自定义头部导航栏,如下图所示: 现在具体说一下实现步骤及方法: 步骤: 1.在 app.json 里面把 "navigat ...

  5. 微信小程序把玩(三)tabBar底部导航

    原文:微信小程序把玩(三)tabBar底部导航 tabBar相对而言用的还是比较多的,但是用起来并没有难,在app.json中配置下tabBar即可,注意tabBar至少需要两个最多五个Item选项 ...

  6. 微信小程序自定义tabbar的实现

    微信小程序自定义tabbar的实现 目的:当采用微信的自定义tabbar组件的时候,切换的时候会出现闪屏的效果:当使用微信默认的tabbar的时候,限制了tabbar的数量以及灵活配置. 方案:自己动 ...

  7. 微信小程序 自定义导航组件 nav头部 全面屏设计

    nav-dynamic 微信小程序自定义nav头部组件:适配全面屏设计: 实现功能 初始进入页面时,展示初始状态下的nav样式: 页面滚动时,监听页面滚动事件,展示滚动状态下的nav样式: 根据配置字 ...

  8. 微信小程序自定义组件,提示组件

    微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加“components”目录,然后像添加Page页面一样添加自定义组 ...

  9. 微信小程序自定义Tabber,附详细源码

    目录 1,前言 2,说明 3,核心代码 1,前言 分享一个完整的微信小程序自定义Tabber,tabber按钮可以设置为跳转页面,也可以设置为功能按钮.懒得看文字的可以直接去底部,博主分享了小程序代码 ...

随机推荐

  1. toolbar按钮添加图标

    需要toolbar关联imagelist组件,imagelist组件添加需要的图片,在toolbar新建按钮,按钮中选择相应图表.

  2. mysql插入数据会变中文

    db.url=jdbc:mysql://192.168.0.149:3306/pack_platform_dev?useUnicode=true&characterEncoding=utf-8 ...

  3. eclipse 中配置php的 XDebug调试

    1. 打开 eclipse for php IDE,window->preference->PHP->Debug 2. 配置phpserver 3. 我的已经增加好了,默认的应该有l ...

  4. 后台管理界面admin

    admin组件:展示数据表,快速的录入数据. 为了安全,可以在路由分发时修改下admin的名字.(一定要改) 1.不想使用英文,则在app里的settings修改一下(在最下面的位置) LANGUAG ...

  5. java中加与不加public

    加public表示全局类,该类可以import到任何类内.不加public默认为保留类,只能被同一个包内的其他类引用来源:https://blog.csdn.net/qq_15037231/artic ...

  6. HBuilder/Mui开发ios使用上拉刷新导致滚动条无法使用的解决方法

    HBuilder/Mui开发的APP使用上拉刷新,当滚动到底部是会触发上拉刷新,加载更多数据.但是ios上确是一个坑,导致滚动条无法滚动. 解决方法 放弃Mui的上拉刷新,自己使用JS实现. var ...

  7. 原生js实现分页效果(带实例)

    小小插件(静态分页) 效果图: 首先实现简单功能: <!DOCTYPE html> <html> <head> <meta http-equiv=" ...

  8. Go 初体验 - 死锁的几种情况

    go 语言里,channel 是一个重要的对象和概念,它是通信的基础实现 如何实例化: ch := make(chan int) 由 channel 通信引起的死锁共有3种: 第一种是因为给 ch 推 ...

  9. LEFT JOIN、RIGHT JOIN、INNER JOIN、FULL JOIN 使用

    select * from t_class_info as c; id   gradeid  classid  year        createtime                       ...

  10. Array 转 Set

    Array 转 Set: Set<String> oldCandidateNames = new HashSet<String>(Arrays.asList(candidate ...