Mini program development--selector multi-level linkage

Recently, I have been addicted to King Pesticide and I can’t extricate myself. Let me review myself first...
First of all, let’s talk about the needs to be done today: The picture below is the customer complaint function added to the APP some time ago.

##iOS.gif

As you can see, it involves multi-level linkage of the selector (just two levels here). However, last Wednesday I took over the company's mini program. It was said to be a mini program, but it was actually only two or three pages. I was asked to add the functions on the APP, including the "I want to complain" page. Android selector effect, look at the effect after making it on the mini program as shown below:

mini program.gif

Let’s briefly talk about the required files for this page.

Required files.png

Yes, every page of the mini program has .js/.json/.wxml/.wxss files are required, just like the front-end "Three Musketeers". Here are the Four Musketeers, but .json is actually dispensable. In essence, it is still the Three Musketeers... About the mini program I won’t go into too much about the topic. If you are interested in the mini program, you can send me a private message to discuss it.

Start installing X below.
Start with the layout of the UI, that is, .wxml and .wxss (only the multi-level linkage part is given)

.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>

.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 file

var UserInfo = require("../../../js/bean/UserInfo.js");
var ApiUser = require("../../../js/http/ApiUser.js");

var shopss = [];
var detailAddress_arr = [];
Page({
  data: {


   //购买门店
   current:0, //选择器第几页的标识，对应wxml中的current

   shopList:[],
   area_arr:[],//第一级的数据数组
   area_id:[],

   shop_arr:[],//第二级的数据数组
   shop_id:[],

   detailAddress_tempArr:[],//第三级的数据数组
   areaSelectedStr: '请选择门店',//area_arr[index]+shop_arr[index]  用来显示于wxml中
    maskVisual: 'hidden',
    areaName: '请选择',//显示于选择器上面部分的区域名
    detailAddress:'可在小票上查看门店',//用来显示于wxml
    source: ''

  },
  onLoad:function(options){
    page = this;
    this.loadPreData();//加载选择器中的数据


  },

//加载平台、门店、投诉类型
loadPreData:function(){
    var that = this;
    ApiUser.getpreData(function (resp) {  

       var userInfo = new UserInfo(resp);
       if(userInfo.isOK()){
         if (userInfo.isSuccess()){
       //平台
      //...


      //投诉类型
      //...

      // 购买门店

        var area_arr = [],
               area_id = [];

        userInfo.getData().shopsList.forEach(function(e){ 
                area_arr.push(e.area);
                area_id.push(e.areaId);
                shopss.push(e.shops);                
        })

          that.setData({

         //...


            shopList:userInfo.getData().shopsList,
            area_arr:area_arr,
            area_id:area_id

          })

         }else {
                    wx.showModal({
                        title: '提示',
                        content: userInfo.getMessage(),
                        success: function(res) {
                            if (res.confirm) {
                                console.log('用户点击确定')
                            }
                        }

                    })
                }
          }else {
                if(userInfo.is401()){
                    wx.showModal({
                            title: '提示',
                            content: '请先登录',
                            success: function(res) {
                                if (res.confirm) {
                                    console.log('用户点击确定')
                                }
                            }
                        })
                  }else if(userInfo.is404()){
                    wx.showModal({
                            title: '提示',
                            content: '页面找不到啦',
                            success: function(res) {
                                if (res.confirm) {
                                    console.log('用户点击确定')
                                }
                            }

                        })
                    }else if(userInfo.is500()){
                    wx.showModal({
                            title: '提示',
                            content: '服务器又开小差啦',
                            success: function(res) {
                                if (res.confirm) {
                                    console.log('用户点击确定')
                                }
                            }

                        })
                    }else{
                    wx.showModal({
                            title: '提示',
                            content: userInfo.getMessage(),
                            success: function(res) {
                                if (res.confirm) {
                                    console.log('用户点击确定')
                                }
                            }

                        })
                    }

                }
            } 
     ) 

},

  //...
  //点击选择门店弹出选择器
  cascadePopup: function() {
        var animation = wx.createAnimation({
            duration: 500,
            timingFunction: 'ease-in-out',
        });
        this.animation = animation;
        animation.translateY(-285).step();
        this.setData({
            animationData: this.animation.export(),
            maskVisual: 'show'
        });
    },
//关闭选择器
 cascadeDismiss: function () {
        this.animation.translateY(285).step();
        this.setData({
            animationData: this.animation.export(),
            maskVisual: 'hidden'
        });
    },


 //...



 //地址选择

 areaTapped: function(e) {
        // 标识当前点击第一级中的哪个区域，记录其名称与主键id都依赖它
        var index = e.currentTarget.dataset.index;
        // current为1，使得页面向左滑动一页至商场列表
        // areaIndex是商场数据的标识
        if(this.data.area_arr[index] == '未知门店'){
           this.setData({
            areaName: this.data.area_arr[index],
            shopName: '',
            shop_arr:[],
            detailAddress:'暂无详细地址',
            detailAddress_tempArr:[],
            areaSelectedStr: this.data.area_arr[index] +  '     ',
           });
         this.cascadeDismiss();

        }else{
            this.setData({
                areaName: this.data.area_arr[index],
                shopName: '',
                detailAddress:'选择门店后显示详细地址',
                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:'请选择',
                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(){
    // 页面关闭
  }
})

This is my first time writing an article in this area, so it may be less readable. 0.0 If you don’t understand anything, you can send me a private message.

【Related recommendations】

1.

Complete source code download of WeChat mini program

2.

WeChat mini program game demo Choose different color blocks

3.

WeChat mini program demo: Yangtao

The above is the detailed content of Mini program development--selector multi-level linkage. For more information, please follow other related articles on the PHP Chinese website!