匿名通过本文主要向大家介绍了小程序，选择器，多级联动等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
近段时间由于一直沉迷王者农药无法自拔，在这先自我检讨...
首先说下今天要做的需求：如下图，是前段时间给APP中添加的客诉功能。
首先说下今天要做的需求：如下图，是前段时间给APP中添加的客诉功能。
iOS.gif
能看到，里面涉及到了选择器多级联动（这里就两级）。然而，上星期三的时候接手了公司的小程序，说是小程序，其实也就两三个页面，要我把APP上的功能加上去，其中包括这个“我要投诉”的页面，综合了下安卓的选择器效果，下面看小程序上做出后的效果如下图：
小程序.gif
先大致说下这个页面的所需文件，
所需文件.png
是的，小程序的每个页面都需要.js/.json/.wxml/.wxss文件，就像前端 "三剑客"一样，这里是四剑客，但.json其实也是可有可无的，本质上还是三剑客...关于小程序的话题不多说了，对小程序感兴趣的可以私信我讨论哈。
下面开始装X。
先从布局UI开始，也就是 .wxml 和 .wxss（只给出多级联动的部分）
.wxml
<view class="section" >
<view style=" display : flex;flex-direction : row;">
<text class=" text">选择购买门店:</text><text bindtap="cascadePopup" style= " color: #393939;font-size: 32rpx;margin-top : 2px; margin-left:8px;">{{areaSelectedStr}}></text>
</view>
<text style= " color: #393939;font-size: 32rpx;margin-top : 4px;margin-left:114px;">{{detailAddress}}</text>
</view>
//选择器
<view class="modal">
<view class="modal-mask {{maskVisual}}" bindtap="cascadeDismiss"></view>
<view animation="{{animationData}}" class="modal-content">
<view class="modal-header">
<text class="modal-title">请选择门店</text>
<text class="modal-close" bindtap="cascadeDismiss">X</text>
</view>
<view class="modal-body">
<text class="viewpager-title {{current == 0 ? 'area-selected' : ''}}" bindtap="changeCurrent" data-current="0">{{areaName}}</text>
<text class="viewpager-title {{current == 1 ? 'area-selected' : ''}}" bindtap="changeCurrent" data-current="1">{{shopName}}</text>
<text class="viewpager-title {{current == 2 ? 'area-selected' : ''}}" bindtap="changeCurrent" data-current="2">{{detailAddress}}</text>
<view class="viewpager-pider"></view>
<swiper class="swiper-area" current="{{current}}" bindchange="currentChanged">
<block wx:if="{{area_arr.length > 0}}">
<swiper-item>
<scroll-view scroll-y="true" class="viewpager-listview">
<view wx:for="{{area_arr}}" wx:key="index" data-index="{{index}}" bindtap="areaTapped">
<text wx:if="{{index == areaIndex}}" class="area-selected">{{item}}</text>
<text wx:else>{{item}}</text>
</view>
</scroll-view>
</swiper-item>
</block>
<block wx:if="{{shop_arr.length > 0}}">
<swiper-item>
<scroll-view scroll-y="true" class="viewpager-listview">
<view wx:for="{{shop_arr}}" wx:key="index" data-index="{{index}}" bindtap="shopTapped">
<text wx:if="{{index == shopIndex}}" class="area-selected">{{item}}</text>
<text wx:else>{{item}}</text>
</view>
</scroll-view>
</swiper-item>
</block>
<block wx:if="{{detailAddress_tempArr.length > 0}}">
<swiper-item>
<scroll-view scroll-y="true" class="viewpager-listview">
<view wx:for="{{detailAddress_tempArr}}" wx:key="index" data-index="{{index}}" bindtap="detailAddressTapped">
<text wx:if="{{index == detailIndex}}" class="area-selected">{{item}}</text>
<text wx:else>{{item}}</text>
</view>
</scroll-view>
</swiper-item>
</block>
</swiper>
</view>
</view>
</view>.wxss
.section{
background:white;
margin:2px;
padding:20rpx;
display : flex;
flex-direction : column;
}
.text{
color: #393939;
font-size: 32rpx;
margin-top : 2px;
}
/*跳出的选择器*/
.modal-content {
position: fixed;
bottom: -285px;
left: 0;
width: 100%;
height: 285px;
/*box-shadow: 10rpx 0 30rpx rgba(0,0,0,.9);*/
margin-top: 5px;
background: #fff;
z-index: 999;
}
/*遮罩层*/
.modal-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: .8;
z-index: 99;
}
/*弹窗头部*/
.modal-header {
margin: 2px 0;
font-size: 16px;
color: #666;
display: flex;
flex-direction: row;
justify-content: space-between;
line-height: 30px;
}
/*所在地区字样*/
.modal-title {
text-align: center;
width: 100%;
}
/*关闭按钮*/
.modal-close {
width: 20px;
}
.modal-body {
font-size: 14px;
}
/*每级地区标题*/
.viewpager-title {
padding: 0 10px;
/*color: #f03118;*/
line-height: 30px;
}
/*分隔线*/
.viewpager-pider {
width: 100%;
height: 1px;
background: #ccc;
}
/*左右滑动控件*/
.swiper-area {
height:220px;
}
/*地址列表ListView容器*/
.viewpager-listview {
padding-top: 5px;
height: 100%;
}
/*每行地址item项*/
.viewpager-listview view{
line-height: 30px;
padding: 0 10px;
}
/*高亮当前所选地区*/
.area-selected {
color: red;
}
/*初始隐藏*/
.hidden {
display: none;
}
/*运行时显示*/
.show {
display: block;
}.js文件
var UserInfo = require("../../../js/bean/UserInfo.js");
var ApiUser = require("../../../js/http/ApiUser.js");
var shopss = [];
var detailAddress_arr = [];
Page({
data: {
//购买门店
current:0, //选择器第几页的标识，对应wxml中的current
shopList:[],
area_arr:[],//第一级的数据数组
area_id:[],
shop_arr:[],//第二级的数据数组
shop_id:[],
detailAddress_tempArr:[],//第三级的数据数组
areaSelectedStr: '请选择门店',//area_arr[index]+shop_arr[index] 用来显示于wxml中
maskVisual: 'hidden',
areaName: '请选择&#