微信小程序实现全国机场索引列表
本文为大家分享了微信小程序实现MUI索引列表的具体代码,供大家参考,具体内容如下 效果展示图实现的原理
WXML <view class="city-layer {{isShowLayer ? '' : 'layer-hide'}}"> <view class="current-choose-city">当前选择机场:{{chooseCity}} WXSS /提示点击的字母 /
.city-layer{ width: 70px; height: 70px; line-height: 70px; text-align: center; border-radius: 50%; color: #fff; background-color: rgba(0,.7); position: fixed; top: calc(50% - 35px); left:calc(50% - 35px); z-index: 11; } .layer-hide{display: none;} 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)); for (var i = 0; i < this.data.cityList.length;i++){ this.setData({ setTimeout(() => { 总结:在onLoad函数中设置左侧的展示高度和右侧导航每一个字母所在盒子的高度; getCurrentCode函数是获取点击字母的index,然后进行提示以及500ms后关闭提示; getChooseCity函数是获取选择的机场,对chooseCity进行赋值。 代码简化: 简化为: 添加data-index="{{index}}",减少循环的消耗:
DEMO 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |