|
近段時間由于一直沉迷王者農(nóng)藥無法自拔，在這先自我檢討...
首先說下今天要做的需求：如下圖，是前段時間給APP中添加的客訴功能。
iOS.gif
能看到，里面涉及到了選擇器多級聯(lián)動（這里就兩級）。然而，上星期三的時候接手了公司的小程序，說是小程序，其實(shí)也就兩三個頁面，要我把APP上的功能加上去，其中包括這個“我要投訴”的頁面，綜合了下安卓的選擇器效果，下面看小程序上做出后的效果如下圖：
小程序.gi
先大致說下這個頁面的所需文件，
所需文件.png
是的，小程序的每個頁面都需要.js/.json/.wxml/.wxss文件，就像前端 "三劍客"一樣，這里是四劍客，但.json其實(shí)也是可有可無的，本質(zhì)上還是三劍客...關(guān)于小程序的話題不多說了，對小程序感興趣的可以私信我討論哈。
下面開始裝X。
先從布局UI開始，也就是 .wxml 和 .wxss（只給出多級聯(lián)動的部分）
先從布局UI開始，也就是 .wxml 和 .wxss（只給出多級聯(lián)動的部分）
.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}}
|
