小編給大家分享一下小程序如何實現(xiàn)選擇器多級聯(lián)動,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
創(chuàng)新互聯(lián)是一家集網(wǎng)站建設,梨樹企業(yè)網(wǎng)站建設,梨樹品牌網(wǎng)站建設,網(wǎng)站定制,梨樹網(wǎng)站建設報價,網(wǎng)絡營銷,網(wǎng)絡優(yōu)化,梨樹網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè),幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力??沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿,時刻以成就客戶成長自我,堅持不斷學習、思考、沉淀、凈化自己,讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。
首先說下今天要做的需求:如下圖,是前段時間給APP中添加的客訴功能。
iOS.gif
能看到,里面涉及到了選擇器多級聯(lián)動(這里就兩級)。然而,上星期三的時候接手了公司的小程序,說是小程序,其實也就兩三個頁面,要我把APP上的功能加上去,其中包括這個“我要投訴”的頁面,綜合了下安卓的選擇器效果,下面看小程序上做出后的效果如下圖:
小程序.gif
先大致說下這個頁面的所需文件,
所需文件.png
是的,小程序的每個頁面都需要.js/.json/.wxml/.wxss文件,就像前端 "三劍客"一樣,這里是四劍客,但.json其實也是可有可無的,本質(zhì)上還是三劍客...關(guān)于小程序的話題不多說了,對小程序感興趣的可以私信我討論哈。
下面開始裝X。
先從布局UI開始,也就是 .wxml 和 .wxss(只給出多級聯(lián)動的部分)
<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>
.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; } /*每級地區(qū)標題*/ .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; } /*高亮當前所選地區(qū)*/ .area-selected { color: red; } /*初始隱藏*/ .hidden { display: none; } /*運行時顯示*/ .show { display: block; }
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:[],//第一級的數(shù)據(jù)數(shù)組 area_id:[], shop_arr:[],//第二級的數(shù)據(jù)數(shù)組 shop_id:[], detailAddress_tempArr:[],//第三級的數(shù)據(jù)數(shù)組 areaSelectedStr: '請選擇門店',//area_arr[index]+shop_arr[index] 用來顯示于wxml中 maskVisual: 'hidden', areaName: '請選擇',//顯示于選擇器上面部分的區(qū)域名 detailAddress:'可在小票上查看門店',//用來顯示于wxml source: '' }, onLoad:function(options){ page = this; this.loadPreData();//加載選擇器中的數(shù)據(jù) }, //加載平臺、門店、投訴類型 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' }); }, //關(guān)閉選擇器 cascadeDismiss: function () { this.animation.translateY(285).step(); this.setData({ animationData: this.animation.export(), maskVisual: 'hidden' }); }, //... //地址選擇 areaTapped: function(e) { // 標識當前點擊第一級中的哪個區(qū)域,記錄其名稱與主鍵id都依賴它 var index = e.currentTarget.dataset.index; // current為1,使得頁面向左滑動一頁至商場列表 // areaIndex是商場數(shù)據(jù)的標識 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 }); }, //點擊第三級的詳細地址事件,并關(guān)閉選擇器 detailAddressTapped : function (e) { this.cascadeDismiss(); }, currentChanged: function (e) { // swiper滾動使得current值被動變化,用于高亮標記 var current = e.detail.current; this.setData({ current: current }); }, changeCurrent: function (e) { // 記錄點擊的標題所在的區(qū)級級別 var current = e.currentTarget.dataset.current; this.setData({ current: current }); }, onReady:function(){ // 頁面渲染完成 }, onShow:function(){ // 頁面顯示 }, onHide:function(){ // 頁面隱藏 }, onUnload:function(){ // 頁面關(guān)閉 } })
以上是“小程序如何實現(xiàn)選擇器多級聯(lián)動”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學習更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
本文題目:小程序如何實現(xiàn)選擇器多級聯(lián)動
瀏覽路徑:http://muchs.cn/article2/ghscic.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供外貿(mào)建站、手機網(wǎng)站建設、移動網(wǎng)站建設、營銷型網(wǎng)站建設、全網(wǎng)營銷推廣、網(wǎng)站營銷
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)