仿“车来了”小程序里的城市切换组件

组成部分

构建城市列表字典对象

scollview的属性来控制ABCD字母点击滚动

qq map sdk获取当前城市名

对于竖向滚动的页面来说,scroll-y style="height: 200px;"必不可少

scroll-into-view,默认不带动画,因此加上scroll-with-animation="true"属性,它的默认值是false的

JS代码

// 引入城市数据源

let{

allCities,

recommendCities

}=require('./utils/city')

// 引入腾讯地图组件

letQQMapWX=require('./utils/qqmap-wx-jssdk.min.js');

Page({

data:{

allCities:allCities,// 所有城市字典

recommendCities:recommendCities,// 热门城市字典

targetLetter:'',// 滚动视图所要指定的id

currentCity:'瑞安',// 当前城市

geoCity:'',// 定位城市

scrollTop:,// 滚动条位置,用于控制回到顶部

scrollHeight:wx.getSystemInfoSync().windowHeight// 滚动视图高度

},

onLoad() {

// 生成字母数组

this.generateLetters()

// 获取定位城市名

this.getLocation()

},

generateLetters() {

// 从Object对象取出

this.setData({

})

},

scrollToView(e) {

// 滚动视频到相应id处

this.setData({

targetLetter:letter

})

},

selectCity(e) {

// 点击城市事件

this.setData({

currentCity:cityName,

scrollTop:

})

},

getLocation() {

// 初始化腾讯地图

letqqmapsdk=newQQMapWX({

key:'BJFBZ-ZFTHW-Y2HRO-RL2UZ-M6EC3-GMF4U'

})

// 调用接口

qqmapsdk.reverseGeocoder({

poi_options:'policy=2',

get_poi:1,

success:(res)=>{

// 渲染给页面

this.setData({

下载地址

https://gitee.com/laeser/demo-weapp

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180726G16PNG00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券