微信小程序实现按字母排列选择城市功能


Posted in Javascript onNovember 25, 2019

实现效果预览

微信小程序实现按字母排列选择城市功能

实现思想

利用小程序腾讯地图将所有城市查出来,并将其渲染至页面(https://lbs.qq.com/qqmap_wx_jssdk/index.html)(其中字母栏也根据获取到的数据变化)

其中涉及三个交互(点击字母时滚动到相应位置;滑动触摸字母时,需滚动到相应位置,并有当前哪个字母的提示,且有震动感;手动滑动页面时,需将当前对应的字母选中)

滑动触摸字母时,首先要得到所有字母所在块的高度,再平均的获取到每个字母的高度。当触摸滚动时,拿到pageY(距离文档左上角的距离,具体解释官网有https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#touches)

计算出所有字母内容的高度,并存为一个数组

利用pageY计算出可能到达的字母位置的下标(pageY-字母栏的top值/每个字母的高度)

将计算出的下标所对应的字母内容高度赋值给scroll-top值

手动滚动列表时,根据滚动的距离计算出当前滚动的下标值,将字母数组的对应的下标值做处理

需要注意setData不能频繁使用,所以在使用的时候,需要做处理和优化

实现知识点

字母滚动到相应位置需使用scroll-view组件中的scroll-into-view 设置其子元素的id值

滑动触摸字母,需使用小程序事件touchmove事件和touchend事件

手动滑动页面时,需使用scroll-view中的scroll-top属性设置竖向滚动条位置

代码

wxml

<!--pages/findHome/selectCity/index.wxml-->
<view class="selectCity">
 <view class="searchCity">
 <input placeholder="输入城市名进行搜索" bindinput="getSuggest" bindfocus="inputFocus"></input>
 </view>
 <view class="cityContainer" style="padding-top: {{searchCity}}px">
 <scroll-view scroll-y="true" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}" bindscroll="scroll" style="height: 100%" scroll-with-animation="ture">
 <block wx:for="{{citys}}" wx:for-index="key" wx:for-item="value" wx:key="key">
 <view class="cityItem">
  <view class="citytype" id="{{value.id}}">{{key}}</view>
  <block wx:for="{{value.data}}" wx:for-key="i" wx:for-item="ele" wx:key="i">
  <view class="cityDetail" data-name="{{ele.fullname}}" bindtap="confrimCity">{{ele.fullname}}</view>
  </block>
 </view>
 </block> 
 </scroll-view> 
 <view class="cityAZ">
 <block wx:for="{{letter}}" wx:key="{{id}}">
 <view bindtap="letterClick" class="AZ {{!touchFlag && activeAZ == item.id ? 'activeAZ' : ''}}" data-id="{{item.id}}" catchtouchmove="whenTouch" catchtouchend="touchEnd" id="{{item.id}}">{{item.name}}
 <view class="AZInfo" wx:if="{{touchFlag && activeAZ == item.id}}">
  {{item.name}}
  <view class="trigle"></view>
 </view>
 </view>
 </block>
 </view>
 </view>
</view>

wxss

/* pages/findHome/selectCity/index.wxss */
.selectCity {
 width: 100vw;
 height: 100vh;
}
.searchCity {
 height: 70rpx;
 line-height: 70rpx;
 width: 100%;
 padding: 0 24rpx;
 position: fixed;
 top: 0;
 left: 0;
 background: #fff;
 z-index: 10;
}
.cityContainer {
 height: 100%;
}
.cityItem {
 padding: 0 70rpx 0 24rpx;
}
.citytype {
 height: 70rpx;
 background: #F5F5F5;
 line-height: 70rpx;
 padding: 0 24rpx;

}
.cityDetail {
 height: 80rpx;
 line-height: 80rpx;
 padding: 0 24rpx;
 border-top: 1px solid #DCDCDC;
 border-bottom: none;
}
.cityDetail:last-child {
 border-bottom: 1px solid #DCDCDC;
}
.cityAZ {
 position: fixed;
 top: 136rpx;
 right: 0;
 font-size: 28rpx;
 padding: 0 24rpx;
 /* background: #fff; */
 width: 40rpx;
 text-align: center;
}
.AZ {
 position: relative;
 border-radius: 50%;
}
.activeAZ {
 background: orange;
 color: #fff;
}
.AZInfo {
 width: 70rpx;
 height: 70rpx;
 border-radius: 50%;
 text-align: center;
 color: #fff;
 line-height: 70rpx;
 background: orange;
 position: absolute;
 left: -94rpx;
 top: -14rpx;
}
.trigle {
 width: 0;
 height: 0;
 border: 32rpx solid orange;
 border-right: none;
 border-top-color: transparent;
 border-bottom-color: transparent; 
 position: absolute;
 top: 4rpx;
 right: -9rpx;
}

js

// pages/findHome/selectCity/index.js
let cityDatas = require('../../../utils/cityData.js');
let QQMapWX = require('../../../libs/qqmap-wx-jssdk.js');
let qqmapsdk = new QQMapWX({
 key: '4WKBZ-ADX36-MGNS4-E6TFJ-Q6JJE-YBF2A'
});
Page({

 /**
 * 页面的初始数据
 */
 data: {
 citys: {},//获取到的所有城市
 letter: [], //获取到的所有字母
 searchCity: 0,
 toView: '', //点击跳转的id
 scrollTop: '',
 citysHeight: [],//所有字母大模块的top
 azHeight: 0, //每个字母平均的高度
 azTop: 0,
 index: '',
 activeAZ: 'A1',
 touchFlag: false
 },
 letterClick: function (e) {
 this.setData({
 touchFlag: false,
 toView: e.currentTarget.dataset.id
 // activeAZ: e.currentTarget.dataset.id,
 })
 },
 confrimCity() {
 wx.switchTab({
 url: '/pages/findHome/index',
 })  
 },
 whenTouch(e) {
 let index = 0;
 if((e.touches[0].pageY - this.data.azTop) % this.data.azHeight == 0){
 index = (e.touches[0].pageY - this.data.azTop) / this.data.azHeight
 }else {
 index = parseInt((e.touches[0].pageY - this.data.azTop) / this.data.azHeight);
 if(this.data.index !== index && index < this.data.letter.length) {
 this.data.index = index;
 this.setData({
  scrollTop: this.data.citysHeight[index],
  activeAZ: this.data.letter[index].id,
  touchFlag: true
 })
 wx.vibrateShort();
 }
 }
 },
 touchEnd() {
 setTimeout(()=>{
 this.setData({
 touchFlag: false
 })
 },600)
 },
 scroll(e) {
 let scrollHeight = e.detail.scrollTop;
 let index = this.calculateIndex(this.data.citysHeight, scrollHeight);
 if (this.data.index !== index && index < this.data.letter.length) {
 this.setData({
 index: index,
 activeAZ: this.data.letter[index].id,
 touchFlag: false
 })
 }
 },
 calculateIndex(arr, scrollHeight) {
 let index = 0;
 for (let i = 0; i < arr.length; i++) {
 if (scrollHeight >= arr[i - 1] && scrollHeight < arr[i]) {
 index = i - 1;
 break;
 }else if(scrollHeight >= arr[arr.length-1]) {
 index = arr.length - 1;
 break;
 }else if(0 < scrollHeight < arr[0]) {
 index = 0
 }
 }
 return index;
 },
 getSuggest(e) {
 console.log(e)
 },
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 let query = wx.createSelectorQuery();
 query.select('.searchCity').boundingClientRect(rect => {
 this.setData({
 searchCity: rect.height
 })
 }).exec();
 qqmapsdk.getCityList({
 success: (res) => {//成功后的回调
 res.result[1].forEach(ele => {
  //如果城市对象中已经存在该字母开头的
  if (this.data.citys[ele.pinyin[0].charAt(0).toUpperCase()]){
  this.data.citys[ele.pinyin[0].charAt(0).toUpperCase()].data.push(ele);
  }else {
  this.data.citys[ele.pinyin[0].charAt(0).toUpperCase()] = {id: '',data: []};
  this.data.citys[ele.pinyin[0].charAt(0).toUpperCase()].id = ele.pinyin[0].charAt(0).toUpperCase()+1;
  this.data.citys[ele.pinyin[0].charAt(0).toUpperCase()].data.push(ele);
  }
 })
 let newArr = Object.keys(this.data.citys).sort();
 let sortCity = {};
 newArr.forEach(ele => {
  this.data.letter.push({name: ele, id: ele+1})
  sortCity[ele] = this.data.citys[ele]
 })
 this.setData({
  citys: sortCity,
  letter: this.data.letter,
  citysHeight: []
 });
 //获取个字母大模块的top值
 query.selectAll('.cityItem').boundingClientRect((rect) => {
  this.data.citysHeight = [];
  rect.forEach(ele => {
  this.data.citysHeight.push(ele.top - this.data.searchCity)
  })
 }).exec();

 //获取已有字母的高度
 let winH = wx.getSystemInfoSync().windowHeight; 
 query.select('.cityAZ').boundingClientRect((rect) => {
  this.data.azHeight = rect.height / this.data.letter.length;
  this.data.azTop = rect.top;
 }).exec();
 },
 fail: function (error) {
 console.error(error);
 },
 complete: function (res) {
 
 }
 });
 this.setData({
 toView: 'A1'
 });

 }
})

总结

以上所述是小编给大家介绍的微信小程序实现按字母排列选择城市,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript中的事件处理
Jan 16 Javascript
imgAreaSelect 中文文档帮助说明
Oct 08 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
Aug 09 Javascript
javascript转换日期字符串为Date日期对象的方法
Feb 13 Javascript
jQuery+jRange实现滑动选取数值范围特效
Mar 14 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
Jan 05 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
Jun 22 Javascript
vue渲染时闪烁{{}}的问题及解决方法
Mar 28 Javascript
Element ui 下拉多选时新增一个选择所有的选项
Aug 21 Javascript
jQuery轮播图功能制作方法详解
Dec 03 jQuery
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
May 26 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
Nov 25 #Javascript
jquery使用echarts实现有向图可视化功能示例
Nov 25 #jQuery
如何优雅地在Node应用中进行错误异常处理
Nov 25 #Javascript
jQuery Raty星级评分插件使用方法实例分析
Nov 25 #jQuery
uni-app实现点赞评论功能
Nov 25 #Javascript
js prototype深入理解及应用实例分析
Nov 25 #Javascript
KnockoutJS数组比较算法实例详解
Nov 25 #Javascript
You might like
php报表之jpgraph柱状图实例代码
2011/08/22 PHP
PHP静态调用非静态方法的应用分析
2013/05/02 PHP
php判断是否为json格式的方法
2014/03/04 PHP
PHP7创建销毁session的实例方法
2020/02/03 PHP
Laravel框架数据库迁移操作实例详解
2020/04/06 PHP
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
jquery 插件学习(五)
2012/08/06 Javascript
jquery获得同源iframe内body下标签的值的方法
2014/09/25 Javascript
使用Raygun对Node.js应用进行错误处理的方法
2015/06/23 Javascript
JavaScript判断FileUpload控件上传文件类型
2015/09/28 Javascript
JS获取鼠标坐标位置实例分析
2016/01/20 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
js实现select选择框效果及美化
2016/08/19 Javascript
详解jQuery中基本的动画方法
2016/12/14 Javascript
Angularjs 动态改变title标题(兼容ios)
2016/12/29 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
JavaScript实现购物车基本功能
2017/07/21 Javascript
深入了解JavaScript 的 WebAssembly
2019/06/15 Javascript
js blob类型url的视频下载问题的解决
2019/11/29 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
2019/12/04 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
2020/09/17 Javascript
[03:00]DOTA2-DPC中国联赛1月18日Recap集锦
2021/03/11 DOTA
Linux下为不同版本python安装第三方库
2016/08/31 Python
Python爬虫实现“盗取”微信好友信息的方法分析
2019/09/16 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
Keras 利用sklearn的ROC-AUC建立评价函数详解
2020/06/15 Python
解决CSS3的opacity属性带来的层叠顺序问题
2016/05/09 HTML / CSS
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
详解html5 shiv.js和respond.min.js
2018/01/24 HTML / CSS
GLAMGLOW香港官网:明星出镜前的秘密武器
2017/03/16 全球购物
UNDONE手表官网:世界领先的定制手表品牌
2018/11/13 全球购物
五十岁生日宴会答谢词
2014/01/15 职场文书
《一个中国孩子的呼声》教学反思
2014/02/12 职场文书
公司总经理任命书
2014/06/05 职场文书
python 实现图与图之间的间距调整subplots_adjust
2021/05/21 Python
MySQL 外键约束和表关系相关总结
2021/06/20 MySQL