小程序开发

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

iOS.gif

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

小程序.gif

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

所需文件.png

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

 view >.wxss
.section{
 background:white;
 margin:2px;
 padding:20rpx;
 display : flex;
 flex-direction : column;
.text{
 color: #393939;
 font-size: 32rpx;
 margin-top : 2px;
/*跳出的选择器*/
.modal-content {
 position: fixed;
 bottom: -285px;
 left: 0;
 width: 100%;
 height: 285px;
 /*box-shadow: 10rpx 0 30rpx rgba(0,0,0,.9);*/
 margin-top: 5px;
 background: #fff;
 z-index: 999;
/*遮罩层*/
.modal-mask {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: #000;
 opacity: .8;
 z-index: 99;
/*弹窗头部*/
.modal-header {
 margin: 2px 0;
 font-size: 16px;
 color: #666;
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 line-height: 30px;
/*所在地区字样*/
.modal-title {
 text-align: center;
 width: 100%;
/*关闭按钮*/
.modal-close {
 width: 20px;
.modal-body {
 font-size: 14px;
/*每级地区标题*/
.viewpager-title {
 padding: 0 10px;
 /*color: #f03118;*/
 line-height: 30px;
/*分隔线*/
.viewpager-pider {
 width: 100%;
 height: 1px;
 background: #ccc;
/*左右滑动控件*/
.swiper-area {
 height:220px;
/*地址列表ListView容器*/
.viewpager-listview {
 padding-top: 5px;
 height: 100%;
/*每行地址item项*/
.viewpager-listview view{
 line-height: 30px;
 padding: 0 10px;
/*高亮当前所选地区*/
.area-selected {
 color: red;
/*初始隐藏*/
.hidden {
 display: none;
/*运行时显示*/
.show {
 display: block;
}
.js文件
var UserInfo = require( ../../../js/bean/UserInfo.js 
var ApiUser = require( ../../../js/http/ApiUser.js 
var shopss = [];
var detailAddress_arr = [];
Page({
 data: {
 detailAddress_tempArr:[],//第三级的数据数组
 areaSelectedStr: #39;请选择门店 #39;,//area_arr[index]+shop_arr[index] 用来显示于wxml中
 maskVisual: #39;hidden #39;,
 areaName: #39;请选择 #39;,//显示于选择器上面部分的区域名
 detailAddress: #39;可在小票上查看门店 #39;,//用来显示于wxml
 source: #39; #39;
 onLoad:function(options){
 page = this;
 this.loadPreData();//加载选择器中的数据
 areaTapped: function(e) {
 // 标识当前点击第一级中的哪个区域，记录其名称与主键id都依赖它
 var index = e.currentTarget.dataset.index;
 // current为1，使得页面向左滑动一页至商场列表
 // areaIndex是商场数据的标识
 if(this.data.area_arr[index] == #39;未知门店 #39;){
 this.setData({
 areaName: this.data.area_arr[index],
 shopName: #39; #39;,
 shop_arr:[],
 detailAddress: #39;暂无详细地址 #39;,
 detailAddress_tempArr:[],
 areaSelectedStr: this.data.area_arr[index] + #39; #39;,
 this.cascadeDismiss();
 }else{
 this.setData({
 areaName: this.data.area_arr[index],
 shopName: #39; #39;,
 detailAddress: #39;选择门店后显示详细地址 #39;,
 areaIndex: index,
 shopIndex:-1
 var that = this;
 //todo 商场列表赋值
 var shop_arr = [],
 shop_id = [];
 shopss[index].forEach(function(e){ 
 shop_arr.push(e.shopName);
 shop_id.push(e.shopId);
 detailAddress_arr.push(e.address); 
 that.setData({
 shopName: #39;请选择 #39;,
 shop_arr:shop_arr,
 shop_id: shop_id,
 that.setData({
 current:1
//点击第二级的商场事件，同理上面点击第一级
 shopTapped: function (e) {
 var index = e.currentTarget.dataset.index;
 this.setData({
 shopIndex: index,
 shopName: this.data.shop_arr[index]
 var areaSelectedStr = this.data.areaName + + this.data.shopName ;
 this.setData({
 areaSelectedStr: areaSelectedStr,
 detailAddress:detailAddress_arr[index]
 var detailAddress_tempArr = [];
 detailAddress_tempArr.push(detailAddress_arr[index]);
 this.setData({
 current:2,
 detailAddress_tempArr:detailAddress_tempArr
//点击第三级的详细地址事件，并关闭选择器
 detailAddressTapped : function (e) {
 this.cascadeDismiss();
 currentChanged: function (e) {
 // swiper滚动使得current值被动变化，用于高亮标记
 var current = e.detail.current;
 this.setData({
 current: current
 changeCurrent: function (e) {
 // 记录点击的标题所在的区级级别
 var current = e.currentTarget.dataset.current;
 this.setData({
 current: current
 onReady:function(){
 // 页面渲染完成
 onShow:function(){
 // 页面显示
 onHide:function(){
 // 页面隐藏
 onUnload:function(){
 // 页面关闭
})
这方面的文章是第一次写，可能可读性较差0.0 有哪些不懂的可以私信我。

【相关推荐】
1. 微信小程序完整源码下载
2. 微信小程序游戏类demo挑选不同色块
3. 微信小程序demo：阳淘
以上就是小程序开发--选择器多级联动的详细内容，更多请关注php中文网其它相关文章！
 
  
 最佳 Windows 性能的顶级免费优化软件
 
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。