這篇文章主要介紹微信小程序如何實現全國機場索引列表,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
創新互聯公司專注為客戶提供全方位的互聯網綜合服務,包含不限于做網站、網站建設、新撫網絡推廣、小程序設計、新撫網絡營銷、新撫企業策劃、新撫品牌公關、搜索引擎seo、人物專訪、企業宣傳片、企業代運營等,從售前售中售后,我們都將竭誠為您服務,您的肯定,是我們最大的嘉獎;創新互聯公司為所有大學生創業者提供新撫建站搭建服務,24小時服務熱線:028-86922220,官方網址:www.js-pz168.com
效果展示圖

實現的原理
‘當前選擇機場'和右側的導航欄采用的是固定定位;
左側的展示窗口的滾動采用的是scroll-view組件;
選擇中的字母提示是自己WXSS樣式制作。
WXML
<view class="right-nav">
<view bindtap="getCurrentCode" class="{{chooseIndex == index ? '.city-list-active' : ''}}" wx:for="{{cityList}}" data-code="{{item.code}}">
{{item.code}}
</view>
</view>
<view class="city-layer {{isShowLayer ? '' : 'layer-hide'}}">
{[code]}
</view>
<view class="current-choose-city">當前選擇機場:{{chooseCity}}</view>
<scroll-view class="city-scroll" scroll-y="true" bindscroll="scroll" scroll-top="{{scrollTop}}">
<view class="city-box" wx:for="{{cityList}}" wx:key="{{item.code}}">
<view class="city-code">{{item.code}}</view>
<view class="city-list" wx:for="{{item.cityList}}" wx:for-item="city" bindtap="getChooseCity" data-city="{{city}}">
{{city}}
</view>
</view>
</scroll-view>WXSS
.current-choose-city{
position: fixed;
width: 100%;
height: 50px;
line-height: 50px;
padding: 0 10px;
top: 0;
left: 0;
background-color: #fff;
z-index: 10;
}
.right-nav{
width: 30px;
color: #888;
text-align: center;
position: fixed;
bottom: 0;
right: 0;
background-color: rgb(200, 200, 200);
z-index: 9;
}
.city-scroll{padding-top: 50px;}
.city-code{
background-color: #f7f7f7;
}
.city-list,.city-code{
height: 39px;
line-height: 40px;
padding: 0 30px 0 10px;
overflow: hidden;
border-bottom: 1px solid #c8c7cc;
}
.city-list-active{color:#007aff;}
/*提示點擊的字母 */
.city-layer{
width: 70px;
height: 70px;
line-height: 70px;
text-align: center;
border-radius: 50%;
color: #fff;
background-color: rgba(0, 0, 0, .7);
position: fixed;
top: calc(50% - 35px);
left:calc(50% - 35px);
z-index: 11;
}
.layer-hide{display: none;}JS
var city_list = require('./city.js');
Page({
data: {
cityList: city_list.city,
chooseCity: '您還未選擇機場!',
isShowLayer: false,
chooseIndex: 0,
len: [],
code: null,
codeHeight: null,
cityHeight:null,
scrollTop: 0
},
onLoad (options) {
var windowHeight = wx.getSystemInfoSync().windowHeight;
var arr = [];
this.data.cityList.forEach(current => arr.push(current.cityList.length + 1));
this.setData({
codeHeight: (windowHeight - 50) / this.data.cityList.length,
cityHeight: windowHeight - 50,
len: arr
});
},
getCurrentCode(e){
var index = 0, sum = 0,self = this;
for (var i = 0; i < this.data.cityList.length;i++){
if (this.data.cityList[i].code === e.target.dataset.code){
index = i
break;
}
}
for (var j = 0; j < index; j++) {
sum += this.data.len[j];
}
this.setData({
code: e.target.dataset.code,
scrollTop: sum * 40,
chooseIndex: index,
isShowLayer: true
});
setTimeout(() => {
self.setData({ isShowLayer: false })
},500);
},
getChooseCity(e){
this.setData({ chooseCity: e.target.dataset.city });
}
})總結:
在onLoad函數中設置左側的展示高度和右側導航每一個字母所在盒子的高度;
getCurrentCode函數是獲取點擊字母的index,然后進行提示以及500ms后關閉提示;
getChooseCity函數是獲取選擇的機場,對chooseCity進行賦值。
代碼簡化:
var index = 0;
for (var i = 0; i < this.data.cityList.length;i++){
if (this.data.cityList[i].code === e.target.dataset.code){
index = i
break;
}
}簡化為:
添加data-index="{{index}}",減少循環的消耗:
<view bindtap="getCurrentCode" class="{{chooseIndex == index ? '.city-list-active' : ''}}" wx:for="{{cityList}}" data-code="{{item.code}}" data-index="{{index}}">
var index = e.target.dataset.index;
以上是“微信小程序如何實現全國機場索引列表”這篇文章的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注創新互聯行業資訊頻道!
新聞名稱:微信小程序如何實現全國機場索引列表
本文路徑:http://www.js-pz168.com/article38/pcsgpp.html
成都網站建設公司_創新互聯,為您提供搜索引擎優化、網站排名、響應式網站、品牌網站設計、建站公司、用戶體驗
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯