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


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操纵Cookie实现购物车程序
Nov 23 Javascript
javascript实现二分查找法实现代码
Nov 12 Javascript
javascript 类定义的4种方法
Sep 12 Javascript
onbeforeunload与onunload事件异同点总结
Jun 24 Javascript
jQuery遍历json中多个map的方法
Feb 12 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
Sep 04 Javascript
JavaScript判断变量是否为数组的方法(Array)
Feb 24 Javascript
AngularJS 整理一些优化的小技巧
Aug 18 Javascript
Bootstrap实现可折叠分组侧边导航菜单
Mar 07 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
Mar 27 Javascript
webpack打包html里面img后src为“[object Module]”问题
Dec 22 Javascript
js动态添加带圆圈序号列表的实例代码
Feb 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中file_get_contents高?用法实例
2014/09/24 PHP
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
在javascript将NodeList作为Array数组处理的方法
2010/07/09 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
jquery查找tr td 示例模拟
2014/05/08 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
JS实现图片局部放大或缩小的方法
2016/08/20 Javascript
node.js学习之交互式解释器REPL详解
2016/12/08 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
2017/01/18 Javascript
vue中页面跳转拦截器的实现方法
2017/08/23 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
2018/06/29 Javascript
基于vue实现一个禅道主页拖拽效果
2019/05/27 Javascript
20多个小事例带你重温ES10新特性(小结)
2019/09/29 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
2020/06/03 Javascript
python网络编程之文件下载实例分析
2015/05/20 Python
解决PyCharm的Python.exe已经停止工作的问题
2018/11/29 Python
python实现图片压缩代码实例
2019/08/12 Python
python模拟实现分发扑克牌
2020/04/22 Python
python 通过文件夹导入包的操作
2020/06/01 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
阿迪达斯奥地利官方商城:adidas.at
2016/10/16 全球购物
美国网上眼镜供应商:LEOTONY(眼镜、RX太阳镜和太阳镜)
2017/10/31 全球购物
Spartoo荷兰:鞋子、包包和服装
2018/07/12 全球购物
村委会主任先进事迹
2014/01/15 职场文书
美发店5.1活动方案
2014/01/24 职场文书
旅游与酒店管理专业求职信
2014/07/21 职场文书
2014年扶贫工作总结
2014/11/18 职场文书
公司股份转让协议书范本
2015/01/28 职场文书
2015年12.4全国法制宣传日活动总结
2015/03/24 职场文书
房租涨价通知
2015/04/23 职场文书
交流会主持词
2015/07/02 职场文书
奖学金主要事迹范文
2015/11/04 职场文书
解读Vue组件注册方式
2021/05/15 Vue.js