小程序开发

小程序开发
近段时间由于一直沉迷王者农药无法自拔，在这先自我检讨...首先说下今天要做的需求：如下图，是前段时间给APP中添加的客诉功能。 能看到，里面涉及到了选择器多级联动（这里就两级）。然而，上星期三的时候接手了公司的小程序，说是小程序，其实也就两三个页面，要我把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 ? &#39;area-selected&#39; : &#39;&#39;}}" bindtap="changeCurrent" data-current="0">{{areaName}}</text> <text class="viewpager-title {{current == 1 ? &#39;area-selected&#39; : &#39;&#39;}}" bindtap="changeCurrent" data-current="1">{{shopName}}</text> <text class="viewpager-title {{current == 2 ? &#39;area-selected&#39; : &#39;&#39;}}" 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>