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


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 相关文章推荐
不同浏览器对回车提交表单的处理办法
Feb 13 Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
Nov 21 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
Apr 08 Javascript
js实现瀑布流的一种简单方法实例分享
Nov 04 Javascript
javascript实现类似java中getClass()得到对象类名的方法
Jul 27 Javascript
深入理解Ajax的get和post请求
Jun 02 Javascript
jQuery获取同级元素的简单代码
Jul 09 Javascript
AngularJS基础 ng-keyup 指令简单示例
Aug 02 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
Dec 30 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
Oct 23 Javascript
Mac下安装vue
Apr 11 Javascript
Webpack devServer中的 proxy 实现跨域的解决
Jun 15 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
一个好用的分页函数
2006/11/16 PHP
PHP读取txt文本文件并分页显示的方法
2015/03/11 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
什么是DOM(Document Object Model)文档对象模型
2012/03/05 Javascript
javascript在myeclipse中报错的解决方法
2013/10/29 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
2016/02/21 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
2016/05/03 Javascript
laydate.js日期时间选择插件
2017/01/04 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
2017/01/11 Javascript
BootStrap select2 动态改变值的方法
2017/02/10 Javascript
jquery拖动改变div大小
2017/07/04 jQuery
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
详解Vue源码之数据的代理访问
2018/12/11 Javascript
详解nodejs 开发企业微信第三方应用入门教程
2019/03/12 NodeJs
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
通过js给网页加上水印背景实例
2019/06/17 Javascript
node.js如何操作MySQL数据库
2020/10/29 Javascript
[00:57]辉夜杯战队访谈宣传片—VG
2015/12/25 DOTA
VSCode下好用的Python插件及配置
2018/04/06 Python
Python列表解析配合if else的方法
2018/06/23 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
python制作英语翻译小工具代码实例
2019/09/09 Python
python之pymysql模块简单应用示例代码
2019/12/16 Python
python 利用已有Ner模型进行数据清洗合并代码
2019/12/24 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
挪威户外活动服装和装备购物网站:Bergfreunde挪威
2016/10/20 全球购物
意大利比基尼品牌:MISS BIKINI
2019/11/02 全球购物
会计岗位职责模板
2014/03/12 职场文书
关于读书的演讲稿
2014/05/07 职场文书
优秀德育工作者事迹材料
2014/05/07 职场文书
雷锋精神演讲稿
2014/05/13 职场文书
销售顾问工作计划书
2014/08/15 职场文书
四风问题个人对照检查剖析材料
2014/09/27 职场文书
使用SQL实现车流量的计算的示例代码
2022/02/28 SQL Server
使用Python通过企业微信应用给企业成员发消息
2022/04/18 Python
怎么禁用Win11输入法 最新Win11输入法关闭教程
2022/08/05 数码科技