小程序模板网

半天就能上手的小程序——选择器多级联动

近段时间由于一直沉迷王者农药无法自拔,在这先自我检讨...
首先说下今天要做的需求:如下图,是前段时间给APP中添加的客诉功能。


能看到,里面涉及到了选择器多级联动(这里就两级)。然而,上星期三的时候接手了公司的小程序,说是小程序,其实也就两三个页面,要我把APP上的功能加上去,其中包括这个“我要投诉”的页面,综合了下安卓的选择器效果,下面看小程序上做出后的效果如下图:


先大致说下这个页面的所需文件,


是的,小程序的每个页面都需要.js/.json/.wxml/.wxss文件,就像前端 "三剑客"一样,这里是四剑客,但.json其实也是可有可无的,本质上还是三剑客...关于小程序的话题不多说了,对小程序感兴趣的可以私信我讨论哈。
下面开始装X。
先从布局UI开始,也就是 .wxml 和 .wxss(只给出多级联动的部分)

先从布局UI开始,也就是 .wxml 和 .wxss(只给出多级联动的部分)

 

.wxml

 

				
  1. class="section" >
  2. style=" display : flex;flex-direction : row;">
  3. class=" text">选择购买门店: bindtap="cascadePopup" style= " color: #393939;font-size: 32rpx;margin-top : 2px; margin-left:8px;">{{areaSelectedStr}}>
  4.  
  5. style= " color: #393939;font-size: 32rpx;margin-top : 4px;margin-left:114px;">{{detailAddress}}
  6.  
  7.  
  8.  
  9. //选择器
  10. class="modal">
  11. class="modal-mask {{maskVisual}}" bindtap="cascadeDismiss">
  12. animation="{{animationData}}" class="modal-content">
  13. class="modal-header">
  14. class="modal-title">请选择门店
  15. class="modal-close" bindtap="cascadeDismiss">X
  16.  
  17. class="modal-body">
  18.  
  19. class="viewpager-title {{current == 0 ? 'area-selected' : ''}}" bindtap="changeCurrent" data-current="0">{{areaName}}
  20. class="viewpager-title {{current == 1 ? 'area-selected' : ''}}" bindtap="changeCurrent" data-current="1">{{shopName}}
  21. class="viewpager-title {{current == 2 ? 'area-selected' : ''}}" bindtap="changeCurrent" data-current="2">{{detailAddress}}
  22.  
  23. class="viewpager-divider">
  24. class="swiper-area" current="{{current}}" bindchange="currentChanged">
  25.  
  26. wx:if="{{area_arr.length > 0}}">
  27. scroll-y="true" class="viewpager-listview">
  28. wx:for="{{area_arr}}" wx:key="index" data-index="{{index}}" bindtap="areaTapped">
  29. wx:if="{{index == areaIndex}}" class="area-selected">{{item}}
  30. wx:else>{{item}}


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23705.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询