微信小程序实现全国机场索引列表


Posted in Javascript onJanuary 31, 2018

本文为大家分享了微信小程序实现MUI索引列表的具体代码,供大家参考,具体内容如下

效果展示图

微信小程序实现全国机场索引列表

实现的原理

  • ‘当前选择机场'和右侧的导航栏采用的是固定定位;
  • 左侧的展示窗口的滚动采用的是scroll-view组件;
  • 选择中的字母提示是自己WXSS样式制作。

WXML

<view class="right-nav">
 <view bindtap="getCurrentCode" class="{{chooseIndex == index ? '.city-list-active' : ''}}" wx:for="{{cityList}}" style="height:{{codeHeight}}px" 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" style="height:{{cityHeight}}px" 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}}" style="height:{{codeHeight}}px" data-code="{{item.code}}" data-index="{{index}}">
var index = e.target.dataset.index;

DEMO下载

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js DOM的学习笔记
Dec 22 Javascript
JavaScript中的null和undefined解析
Apr 14 Javascript
js自动生成对象的属性示例代码
Oct 28 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
Dec 26 Javascript
原生js实现弹出层效果
Jan 20 Javascript
JS排序之选择排序详解
Apr 08 Javascript
vue实现todolist单页面应用
Apr 11 Javascript
Vue Router去掉url中默认的锚点#
Aug 01 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
Mar 21 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
Mar 24 Javascript
Ant Design的可编辑Tree的实现操作
Oct 31 Javascript
如何通过简单的代码描述Angular父组件、子组件传值
Apr 07 Javascript
微信小程序radio组件使用详解
Jan 31 #Javascript
微信小程序checkbox组件使用详解
Jan 31 #Javascript
原生JS实现多个小球碰撞反弹效果示例
Jan 31 #Javascript
浅析Angular19 自定义表单控件
Jan 31 #Javascript
JavaScript实现计算多边形质心的方法示例
Jan 31 #Javascript
微信小程序switch开关选择器使用详解
Jan 31 #Javascript
详解Angular调试技巧之报错404(not found)
Jan 31 #Javascript
You might like
最令PHP初学者头痛的十四个问题
2006/07/12 PHP
用Socket发送电子邮件(利用需要验证的SMTP服务器)
2006/10/09 PHP
php中批量删除Mysql中相同前缀的数据表的代码
2011/07/01 PHP
PHP下打开phpMyAdmin出现403错误的问题解决方法
2013/05/23 PHP
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
比较常见的javascript中定义函数的区别
2015/11/09 Javascript
Dojo获取下拉框的文本和值实例代码
2016/05/27 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
2016/06/20 Javascript
AngularJS实现按钮提示与点击变色效果
2016/09/07 Javascript
JS获取html元素的标记名实现方法
2016/10/08 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
2017/02/14 Javascript
js实现仿购物车加减效果
2017/03/01 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
2019/02/28 Javascript
nodejs检测因特网是否断开的解决方案
2019/04/17 NodeJs
nodejs使用socket5进行代理请求的实现
2020/02/21 NodeJs
微信小程序中的列表切换功能实例代码详解
2020/06/09 Javascript
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
python读取oracle函数返回值
2016/07/18 Python
python实现Floyd算法
2018/01/03 Python
python3之模块psutil系统性能信息使用
2018/05/30 Python
python中reader的next用法
2018/07/24 Python
Python 实现「食行生鲜」签到领积分功能
2018/09/26 Python
在python中获取div的文本内容并和想定结果进行对比详解
2019/01/02 Python
通过python改变图片特定区域的颜色详解
2019/07/15 Python
美国第二大团购网站:LivingSocial
2016/07/24 全球购物
夏威夷航空官网:Hawaiian Airlines
2016/09/11 全球购物
英国图书音像网站:Hive.co.uk(图书、电子书、DVD、蓝光、音乐CD等)
2017/10/16 全球购物
销售员态度差检讨书
2014/10/26 职场文书
巾帼文明岗事迹材料
2014/12/24 职场文书
写给妈妈的感谢信
2015/01/22 职场文书
员工聘用合同范本
2015/09/21 职场文书
如何自己动手写SQL执行引擎
2021/06/02 MySQL
PHP中strval()函数实例用法
2021/06/07 PHP
spring cloud 配置中心native配置方式
2021/09/25 Java/Android