|
近段时间由于一直沉迷王者农药无法自拔，在这先自我检讨...
首先说下今天要做的需求：如下图，是前段时间给APP中添加的客诉功能。
iOS.gif
能看到，里面涉及到了选择器多级联动（这里就两级）。然而，上星期三的时候接手了公司的小程序，说是小程序，其实也就两三个页面，要我把APP上的功能加上去，其中包括这个“我要投诉”的页面，综合了下安卓的选择器效果，下面看小程序上做出后的效果如下图：
小程序.gi
先大致说下这个页面的所需文件，
所需文件.png
是的，小程序的每个页面都需要.js/.json/.wxml/.wxss文件，就像前端 "三剑客"一样，这里是四剑客，但.json其实也是可有可无的，本质上还是三剑客...关于小程序的话题不多说了，对小程序感兴趣的可以私信我讨论哈。
下面开始装X。
先从布局UI开始，也就是 .wxml 和 .wxss（只给出多级联动的部分）
先从布局UI开始，也就是 .wxml 和 .wxss（只给出多级联动的部分）
.wxml
-
class="section" >
-
style=" display : flex;flex-direction : row;">
-
class=" text">选择购买门店: bindtap="cascadePopup" style= " color: #393939;font-size: 32rpx;margin-top : 2px; margin-left:8px;">{{areaSelectedStr}}>
-
-
style= " color: #393939;font-size: 32rpx;margin-top : 4px;margin-left:114px;">{{detailAddress}}
-
-
-
-
//选择器
-
class="modal">
-
class="modal-mask {{maskVisual}}" bindtap="cascadeDismiss">
-
animation="{{animationData}}" class="modal-content">
-
class="modal-header">
-
class="modal-title">请选择门店
-
class="modal-close" bindtap="cascadeDismiss">X
-
-
class="modal-body">
-
-
class="viewpager-title {{current == 0 ? 'area-selected' : ''}}" bindtap="changeCurrent" data-current="0">{{areaName}}
-
class="viewpager-title {{current == 1 ? 'area-selected' : ''}}" bindtap="changeCurrent" data-current="1">{{shopName}}
-
class="viewpager-title {{current == 2 ? 'area-selected' : ''}}" bindtap="changeCurrent" data-current="2">{{detailAddress}}
-
-
class="viewpager-divider">
-
class="swiper-area" current="{{current}}" bindchange="currentChanged">
-
-
wx:if="{{area_arr.length > 0}}">
-
-
scroll-y="true" class="viewpager-listview">
-
wx:for="{{area_arr}}" wx:key="index" data-index="{{index}}" bindtap="areaTapped">
-
wx:if="{{index == areaIndex}}" class="area-selected">{{item}}
-
wx:else>{{item}}
|
