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. axios实现拦截器

    项目中通常使用token进行用户权限认证,需要在请求的header中添加token信息进行验证,拦截返回的状态码进行跳转或重新登陆,在全局配置这些不妥,所以新建一个axios实例进行项目的配置. // ...

  2. docker安装和基础操作

    docker安装 yum install docker 配置镜像下载加速器 curl -sSL https://get.daocloud.io/daotools/set_mirror.sh | sh ...

  3. DAX/PowerBI系列 - 参数表(Parameter Table) 度量值模板

    DAX/PowerBI系列 - 参数表(Parameter Table) 度量值模板 难度: ★★☆☆☆(2星) 适用范围: ★★★☆☆(3星) 概况: 当你有多个度量值都需要计算YTD,MoM,而又 ...

  4. Centos配置tomcat服务并且开机自启动

    把要配置成服务的tomcat文件夹中的catalina.sh脚本文件拷一份到/etc/init.d目录,并且改文件名称为tomcat6 cp /usr/web/tomcat/tomcat-/bin/c ...

  5. metasploit安装,按官网说明

    mkdir -p $HOME/git cd $HOME/git git clone git@github.com:YOUR_USERNAME_FOR_GITHUB/metasploit-framewo ...

  6. 开发流程(Vue)

    1.当你拿到一个需求时,先不要着急完成静态页面 2.重点观察数据结构,进行数据的分析,包括前端所需要的数据类型从而进行数据类型定义(如果是前后端分离的情况下,建议不要考虑前端数据和数据库的数据类型对应 ...

  7. HDU 2586 How far away(LCA+邻接表)

    How far away &题解: 和上篇是一样的题,这用的是lca方法做的, 不知道为什么,把数组开到80000 就a了 >_< 哈 我现在知道为什么了,因为我的rmq数组没有乘 ...

  8. MySQL Workbench在archlinux中出现 Could not store password: The name org.freedesktop.secrets was not provided by any .service files的错误

    MySQL Workbench在archlinux中出现 Could not store password: The name org.freedesktop.secrets was not prov ...

  9. angularjs 绑定多个属性到下拉框

    绑定下拉框 angularjs  代码: //活动下拉切换 $scope.activityChange = function () { var cards = new Array(); var url ...

  10. PHP日历的算法

    <?php if (function_exists('date_default_timezone_set')) { date_default_timezone_set('Asia/Chongqi ...