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


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 相关文章推荐
Javascript图像处理思路及实现代码
Dec 25 Javascript
js加强的经典分页实例
Mar 15 Javascript
JavaScript日期时间格式化函数分享
May 05 Javascript
javascript单引号和双引号的区别和处理
May 14 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
Apr 03 Javascript
jQuery实现右下角可缩放大小的层完整实例
Jun 20 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
Jul 25 Javascript
js的OOP继承实现(必看篇)
Feb 18 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
Sep 20 Javascript
vue better scroll 无法滚动的解决方法
Jun 07 Javascript
详解微信小程序调用支付接口支付
Apr 28 Javascript
原生js实现的观察者和订阅者模式简单示例
Apr 18 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 Ajax乱码
2008/04/09 PHP
php两点地理坐标距离的计算方法
2018/12/29 PHP
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
javascript Array.remove() 数组删除
2009/08/06 Javascript
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
javascript的数据类型、字面量、变量介绍
2012/05/23 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
2013/06/12 Javascript
三种检测iPhone/iPad设备方向的方法
2014/04/23 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
2014/06/09 Javascript
jQuery .tmpl() 用法示例介绍
2014/08/21 Javascript
Javascript中arguments和arguments.callee的区别浅析
2015/04/24 Javascript
javascript实现实时输出当前的时间
2015/04/27 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
JS日程管理插件FullCalendar中文说明文档
2017/02/06 Javascript
vue项目中使用百度地图的方法
2018/06/08 Javascript
解决layui的table插件无法多层级获取json数据的问题
2019/09/19 Javascript
解决elementui表格操作列自适应列宽
2020/12/28 Javascript
简单易懂的python环境安装教程
2017/07/13 Python
python验证码识别实例代码
2018/02/03 Python
Python中 传递值 和 传递引用 的区别解析
2018/02/22 Python
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
Python中的相关分析correlation analysis的实现
2019/08/29 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
Python用来做Web开发的优势有哪些
2020/08/05 Python
CSS3教程:background-clip和background-origin
2008/10/17 HTML / CSS
单身旅行者的单身假期:Just You
2018/04/08 全球购物
外贸主管求职简历的自我评价
2013/10/23 职场文书
数学专业毕业生自荐信
2013/11/10 职场文书
最受欢迎的自我评价
2013/12/22 职场文书
新郎父亲婚宴答谢词
2014/01/11 职场文书
借款协议书
2014/04/12 职场文书
个人求职信格式范文
2015/03/20 职场文书
使用Docker容器部署rocketmq单机的全过程
2022/04/03 Servers