全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[台州seo顾问公司]小程序开发--选择器多级联动

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

  


 

  

iOS.gif

  能看到,里面涉及到了选择器多级联动(这里就两级)。然而,上星期三的时候接手了公司的小程序■▪,[台州seo顾问公司]说是小程序,其实也就两三个页面,要我把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值被动变化,[惠州市seo网络推广公司]微信小程序实现实时圆形进度条的方法,用于高亮标记
 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:阳淘

  以上就是小程序开发--选择器多级联动的详细内容,更多请关注久澳传媒编程栏目其它相关文章!

[台州seo顾问公司]小程序开发--选择器多级联动

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。