近段時間由於一直沉迷王者農藥無法自拔，在這先自我檢討...
首先說下今天要做的需求：如下圖，是前段時間給APP中添加的客訴功能。
iOS.gif
#可以看到，裡面牽涉到選擇器多級連動（這裡就兩級）了。然而，上星期三的時候接手了公司的小程序，說是小程序，其實也就兩三個頁面，要我把APP上的功能加上去，其中包括這個“我要投訴”的頁面，綜合了下安卓的選擇器效果，下面看小程式上做出後的效果如下圖：
小程式.gif
#先大致說下這個頁面的所需文件，
所需文件.png
是的，小程式的每個頁面都需要.js/.json/.wxml/.wxss文件，就像前端"三劍客"一樣，這裡是四劍客，但.json其實也是可有可無的，本質上還是三劍客...關於小程序的話題不多說了，對小程式有興趣的可以私訊我討論哈。
下面開始裝X。
先從佈局UI開始，也就是.wxml 和.wxss（只給多級連動的部分）
<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>.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;
}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: '请选择',//显示于选择器上面部分的区域名
detailAddress:'可在小票上查看门店',//用来显示于wxml
source: ''
},
onLoad:function(options){
page = this;
this.loadPreData();//加载选择器中的数据
},
//加载平台、门店、投诉类型
loadPreData:function(){
var that = this;
ApiUser.getpreData(function (resp) {
var userInfo = new UserInfo(resp);
if(userInfo.isOK()){
if (userInfo.isSuccess()){
//平台
//...
//投诉类型
//...
// 购买门店
var area_arr = [],
area_id = [];
userInfo.getData().shopsList.forEach(function(e){
area_arr.push(e.area);
area_id.push(e.areaId);
shopss.push(e.shops);
})
that.setData({
//...
shopList:userInfo.getData().shopsList,
area_arr:area_arr,
area_id:area_id
})
}else {
wx.showModal({
title: '提示',
content: userInfo.getMessage(),
success: function(res) {
if (res.confirm) {
console.log('用户点击确定')
}
}
})
}
}else {
if(userInfo.is401()){
wx.showModal({
title: '提示',
content: '请先登录',
success: function(res) {
if (res.confirm) {
console.log('用户点击确定')
}
}
})
}else if(userInfo.is404()){
wx.showModal({
title: '提示',
content: '页面找不到啦',
success: function(res) {
if (res.confirm) {
console.log('用户点击确定')
}
}
})
}else if(userInfo.is500()){
wx.showModal({
title: '提示',
content: '服务器又开小差啦',
success: function(res) {
if (res.confirm) {
console.log('用户点击确定')
}
}
})
}else{
wx.showModal({
title: '提示',
content: userInfo.getMessage(),
success: function(res) {
if (res.confirm) {
console.log('用户点击确定')
}
}
})
}
}
}
)
},
//...
//点击选择门店弹出选择器
cascadePopup: function() {
var animation = wx.createAnimation({
duration: 500,
timingFunction: 'ease-in-out',
});
this.animation = animation;
animation.translateY(-285).step();
this.setData({
animationData: this.animation.export(),
maskVisual: 'show'
});
},
//关闭选择器
cascadeDismiss: function () {
this.animation.translateY(285).step();
this.setData({
animationData: this.animation.export(),
maskVisual: 'hidden'
});
},
//...
//地址选择
areaTapped: function(e) {
// 标识当前点击第一级中的哪个区域，记录其名称与主键id都依赖它
var index = e.currentTarget.dataset.index;
// current为1，使得页面向左滑动一页至商场列表
// areaIndex是商场数据的标识
if(this.data.area_arr[index] == '未知门店'){
this.setData({
areaName: this.data.area_arr[index],
shopName: '',
shop_arr:[],
detailAddress:'暂无详细地址',
detailAddress_tempArr:[],
areaSelectedStr: this.data.area_arr[index] + ' ',
});
this.cascadeDismiss();
}else{
this.setData({
areaName: this.data.area_arr[index],
shopName: '',
detailAddress:'选择门店后显示详细地址',
areaIndex: index,
shopIndex:-1
});
var that = this;
//todo 商场列表赋值
var shop_arr = [],
shop_id = [];
shopss[index].forEach(function(e){
shop_arr.push(e.shopName);
shop_id.push(e.shopId);
detailAddress_arr.push(e.address);
})
that.setData({
shopName:'请选择',
shop_arr:shop_arr,
shop_id: shop_id,
});
that.setData({
current:1
});
}
},
//点击第二级的商场事件，同理上面点击第一级
shopTapped: function (e) {
var index = e.currentTarget.dataset.index;
this.setData({
shopIndex: index,
shopName: this.data.shop_arr[index]
});
var areaSelectedStr = this.data.areaName +" "+ this.data.shopName ;
this.setData({
areaSelectedStr: areaSelectedStr,
detailAddress:detailAddress_arr[index]
});
var detailAddress_tempArr = [];
detailAddress_tempArr.push(detailAddress_arr[index]);
this.setData({
current:2,
detailAddress_tempArr:detailAddress_tempArr
});
},
//点击第三级的详细地址事件，并关闭选择器
detailAddressTapped : function (e) {
this.cascadeDismiss();
},
currentChanged: function (e) {
// swiper滚动使得current值被动变化，用于高亮标记
var current = e.detail.current;
this.setData({
current: current
});
},
changeCurrent: function (e) {
// 记录点击的标题所在的区级级别
var current = e.currentTarget.dataset.current;
this.setData({
current: current
});
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
}
})這方面的文章是第一次寫，可能可讀性較差0.0 有哪些不懂的可以私訊我。
【相關推薦】
1. 微信小程式完整原始碼下載
3. 微信小程式demo：陽淘
以上是小程式開發--選擇器多級聯動的詳細內容。更多資訊請關注PHP中文網其他相關文章！
