首页 > 小程序开发 > 正文

小程序开发--选择器多级联动

原创 2018-05-16 11:06:51 0 438
赞助会员专享特权
近段时间由于一直沉迷王者农药无法自拔,在这先自我检讨...
首先说下今天要做的需求:如下图,是前段时间给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 ? 'area-selected' : ''}}" bindtap="changeCurrent" data-current="0">{{areaName}}</text>
            <text class="viewpager-title {{current == 1 ? 'area-selected' : ''}}" bindtap="changeCurrent" data-current="1">{{shopName}}</text>
            <text class="viewpager-title {{current == 2 ? 'area-selected' : ''}}" 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文件

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(){
    // 页面关闭
  }
})

这方面的文章是第一次写,可能可读性较差0.0 有哪些不懂的可以私信我。

【相关推荐】

1. 微信小程序完整源码下载

2. 微信小程序游戏类demo挑选不同色块

3. 微信小程序demo:阳淘

以上就是小程序开发--选择器多级联动的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:小程序,选择器,多级联动
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • 微信小程序 简单DEMO布局,逻辑,样式的练习
  • 微信小程序 wx.request(接口调用方式)详解及实例
  • 微信小程序-详解微信登陆、微信支付、模板消息
  • 微信小程序(应用号)简单实例应用及实例详解
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    相关视频教程

  • javascript初级视频教程 javascript初级视频教程
  • jquery 基础视频教程 jquery 基础视频教程
  • javascript三级联动视频教程 javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程 独孤九贱(6)_jQuery视频教程
  • 相关视频章节