微信小程序如何实现全国机场索引列表
这篇文章主要介绍微信小程序如何实现全国机场索引列表,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联公司专注为客户提供全方位的互联网综合服务,包含不限于做网站、网站建设、新抚网络推广、小程序设计、新抚网络营销、新抚企业策划、新抚品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;创新互联公司为所有大学生创业者提供新抚建站搭建服务,24小时服务热线:028-86922220,官方网址:www.cdcxhl.com
效果展示图
实现的原理
‘当前选择机场'和右侧的导航栏采用的是固定定位;
左侧的展示窗口的滚动采用的是scroll-view组件;
选择中的字母提示是自己WXSS样式制作。
WXML
{{item.code}} {[code]} 当前选择机场:{{chooseCity}} {{item.code}} {{city}}
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}}",减少循环的消耗:
var index = e.target.dataset.index;
以上是“微信小程序如何实现全国机场索引列表”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
分享标题:微信小程序如何实现全国机场索引列表
浏览地址:http://pwwzsj.com/article/pcsgpp.html