小程序如何實(shí)現(xiàn)選擇器多級(jí)聯(lián)動(dòng)
小編給大家分享一下小程序如何實(shí)現(xiàn)選擇器多級(jí)聯(lián)動(dòng)，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),梨樹企業(yè)網(wǎng)站建設(shè),梨樹品牌網(wǎng)站建設(shè),網(wǎng)站定制,梨樹網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,梨樹網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
首先說下今天要做的需求：如下圖，是前段時(shí)間給APP中添加的客訴功能。
iOS.gif
能看到，里面涉及到了選擇器多級(jí)聯(lián)動(dòng)（這里就兩級(jí)）。然而，上星期三的時(shí)候接手了公司的小程序，說是小程序，其實(shí)也就兩三個(gè)頁面，要我把APP上的功能加上去，其中包括這個(gè)“我要投訴”的頁面，綜合了下安卓的選擇器效果，下面看小程序上做出后的效果如下圖：
小程序.gif
先大致說下這個(gè)頁面的所需文件，
所需文件.png
是的，小程序的每個(gè)頁面都需要.js/.json/.wxml/.wxss文件，就像前端 "三劍客"一樣，這里是四劍客，但.json其實(shí)也是可有可無的，本質(zhì)上還是三劍客...關(guān)于小程序的話題不多說了，對(duì)小程序感興趣的可以私信我討論哈。
下面開始裝X。
先從布局UI開始，也就是 .wxml 和 .wxss（只給出多級(jí)聯(lián)動(dòng)的部分）
.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">請(qǐng)選擇門店</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;
}
/*所在地區(qū)字樣*/
.modal-title {
text-align: center;
width: 100%;
}
/*關(guān)閉按鈕*/
.modal-close {
width: 20px;
}
.modal-body {
font-size: 14px;
}
/*每級(jí)地區(qū)標(biāo)題*/
.viewpager-title {
padding: 0 10px;
/*color: #f03118;*/
line-height: 30px;
}
/*分隔線*/
.viewpager-pider {
width: 100%;
height: 1px;
background: #ccc;
}
/*左右滑動(dòng)控件*/
.swiper-area {
height:220px;
}
/*地址列表ListView容器*/
.viewpager-listview {
padding-top: 5px;
height: 100%;
}
/*每行地址item項(xiàng)*/
.viewpager-listview view{
line-height: 30px;
padding: 0 10px;
}
/*高亮當(dāng)前所選地區(qū)*/
.area-selected {
color: red;
}
/*初始隱藏*/
.hidden {
display: none;
}
/*運(yùn)行時(shí)顯示*/
.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, //選擇器第幾頁的標(biāo)識(shí)，對(duì)應(yīng)wxml中的current
shopList:[],
area_arr:[],//第一級(jí)的數(shù)據(jù)數(shù)組
area_id:[],
shop_arr:[],//第二級(jí)的數(shù)據(jù)數(shù)組
shop_id:[],
detailAddress_tempArr:[],//第三級(jí)的數(shù)據(jù)數(shù)組
areaSelectedStr: '請(qǐng)選擇門店',//area_arr[index]+shop_arr[index] 用來顯示于wxml中
maskVisual: 'hidden',
areaName: '請(qǐng)選擇',//顯示于選擇器上面部分的區(qū)域名
detailAddress:'可在小票上查看門店',//用來顯示于wxml
source: ''
},
onLoad:function(options){
page = this;
this.loadPreData();//加載選擇器中的數(shù)據(jù)
},
//加載平臺(tái)、門店、投訴類型
loadPreData:function(){
var that = this;
ApiUser.getpreData(function (resp) {
var userInfo = new UserInfo(resp);
if(userInfo.isOK()){
if (userInfo.isSuccess()){
//平臺(tái)
//...
//投訴類型
//...
// 購買門店
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('用戶點(diǎn)擊確定')
}
}
})
}
}else {
if(userInfo.is401()){
wx.showModal({
title: '提示',
content: '請(qǐng)先登錄',
success: function(res) {
if (res.confirm) {
console.log('用戶點(diǎn)擊確定')
}
}
})
}else if(userInfo.is404()){
wx.showModal({
title: '提示',
content: '頁面找不到啦',
success: function(res) {
if (res.confirm) {
console.log('用戶點(diǎn)擊確定')
}
}
})
}else if(userInfo.is500()){
wx.showModal({
title: '提示',
content: '服務(wù)器又開小差啦',
success: function(res) {
if (res.confirm) {
console.log('用戶點(diǎn)擊確定')
}
}
})
}else{
wx.showModal({
title: '提示',
content: userInfo.getMessage(),
success: function(res) {
if (res.confirm) {
console.log('用戶點(diǎn)擊確定')
}
}
})
}
}
}
)
},
//...
//點(diǎn)擊選擇門店彈出選擇器
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'
});
},
//關(guān)閉選擇器
cascadeDismiss: function () {
this.animation.translateY(285).step();
this.setData({
animationData: this.animation.export(),
maskVisual: 'hidden'
});
},
//...
//地址選擇
areaTapped: function(e) {
// 標(biāo)識(shí)當(dāng)前點(diǎn)擊第一級(jí)中的哪個(gè)區(qū)域，記錄其名稱與主鍵id都依賴它
var index = e.currentTarget.dataset.index;
// current為1，使得頁面向左滑動(dòng)一頁至商場列表
// areaIndex是商場數(shù)據(jù)的標(biāo)識(shí)
if(this.data.area_arr[index] == '未知門店'){
this.setData({
areaName: this.data.area_arr[index],
shopName: '',
shop_arr:[],
detailAddress:'暫無詳細(xì)地址',
detailAddress_tempArr:[],
areaSelectedStr: this.data.area_arr[index] + ' ',
});
this.cascadeDismiss();
}else{
this.setData({
areaName: this.data.area_arr[index],
shopName: '',
detailAddress:'選擇門店后顯示詳細(xì)地址',
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:'請(qǐng)選擇',
shop_arr:shop_arr,
shop_id: shop_id,
});
that.setData({
current:1
});
}
},
//點(diǎn)擊第二級(jí)的商場事件，同理上面點(diǎn)擊第一級(jí)
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
});
},
//點(diǎn)擊第三級(jí)的詳細(xì)地址事件，并關(guān)閉選擇器
detailAddressTapped : function (e) {
this.cascadeDismiss();
},
currentChanged: function (e) {
// swiper滾動(dòng)使得current值被動(dòng)變化，用于高亮標(biāo)記
var current = e.detail.current;
this.setData({
current: current
});
},
changeCurrent: function (e) {
// 記錄點(diǎn)擊的標(biāo)題所在的區(qū)級(jí)級(jí)別
var current = e.currentTarget.dataset.current;
this.setData({
current: current
});
},
onReady:function(){
// 頁面渲染完成
},
onShow:function(){
// 頁面顯示
},
onHide:function(){
// 頁面隱藏
},
onUnload:function(){
// 頁面關(guān)閉
}
})以上是“小程序如何實(shí)現(xiàn)選擇器多級(jí)聯(lián)動(dòng)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
本文題目：小程序如何實(shí)現(xiàn)選擇器多級(jí)聯(lián)動(dòng)
瀏覽路徑：http://sd-ha.com/article2/ghscic.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、手機(jī)網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)、全網(wǎng)營銷推廣、網(wǎng)站營銷
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
- 網(wǎng)站內(nèi)鏈的常見展現(xiàn)方式 2022-05-26
- 網(wǎng)站內(nèi)鏈要如何優(yōu)化才能提升網(wǎng)站排名 2023-04-11
- 網(wǎng)站內(nèi)鏈在SEO優(yōu)化中起到一個(gè)什么樣的作用？ 2023-04-16
- 營銷型網(wǎng)站內(nèi)鏈該如何設(shè)置符合SEO優(yōu)化? 2023-04-13
- 成都網(wǎng)站內(nèi)鏈優(yōu)化有哪些重要方式? 2023-04-24
- 西安seo老手總結(jié)靠譜網(wǎng)站內(nèi)鏈SEO整站優(yōu)化方法 2023-04-08
- 濟(jì)寧信息推廣菏澤網(wǎng)站推廣網(wǎng)站內(nèi)鏈的設(shè)置對(duì)網(wǎng)站優(yōu)化排名的影響有哪些？ 2023-02-04
- 企業(yè)網(wǎng)站內(nèi)鏈優(yōu)化的方法和注意事項(xiàng)? 2023-04-16
- 網(wǎng)站內(nèi)鏈的作用千萬別忽視 2022-08-21
- 網(wǎng)站內(nèi)鏈的5個(gè)小技巧 排名迅速提升 2021-05-01
- 網(wǎng)站內(nèi)鏈整站營銷建設(shè)有什么意義？ 2022-05-17
- 成都網(wǎng)站優(yōu)化技巧之如何做好網(wǎng)站內(nèi)鏈優(yōu)化 2016-11-09