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