组成部分
构建城市列表字典对象
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
领取专属 10元无门槛券
私享最新 技术干货