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

city.gif

在线体验

Mina组件库

组成部分

1.构建城市列表字典对象
2.scollview的属性来控制ABCD字母点击滚动
3.qq map sdk获取当前城市名

坑

1.对于竖向滚动的页面来说，scroll-y style="height: 200px;"必不可少
2.scroll-into-view，默认不带动画，因此加上scroll-with-animation="true"属性，它的默认值是false的

JS代码

// 引入城市数据源
let {
    allCities,
    recommendCities
} = require('./utils/city')
// 引入腾讯地图组件
let QQMapWX = require('./utils/qqmap-wx-jssdk.min.js');

Page({
    data: {
        allCities: allCities, // 所有城市字典
        recommendCities: recommendCities, // 热门城市字典
        targetLetter: '', // 滚动视图所要指定的id
        currentCity: '瑞安', // 当前城市
        geoCity: '', // 定位城市
        scrollTop: 0, // 滚动条位置，用于控制回到顶部
        scrollHeight: wx.getSystemInfoSync().windowHeight // 滚动视图高度
    },
    onLoad() {
        // 生成字母数组
        this.generateLetters()
        // 获取定位城市名
        this.getLocation()
    },
    generateLetters() {
        // 从Object对象取出
        this.setData({
            letters: Object.keys(this.data.allCities)
        })
    },
    scrollToView(e) {
        // 滚动视频到相应id处
        let letter = e.currentTarget.dataset.letter
        this.setData({
            targetLetter: letter
        })
    },
    selectCity(e) {
        // 点击城市事件
        let cityName = e.currentTarget.dataset.cityName
        this.setData({
            currentCity: cityName,
            scrollTop: 0
        })
    },
    getLocation() {
        // 初始化腾讯地图
        let qqmapsdk = new QQMapWX({
            key: 'BJFBZ-ZFTHW-Y2HRO-RL2UZ-M6EC3-GMF4U'
        })
        // 调用接口
        qqmapsdk.reverseGeocoder({
            poi_options: 'policy=2',
            get_poi: 1,
            success: (res) => {
                // 渲染给页面
                this.setData({
                    geoCity: res.result.address_component.district
                })
            }
        })
    }
})

下载地址

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

分答提问