微信小程序定位功能+页面滚动+列表展示

效果图

地图定位代码：

wxml：

    

  
    
       {
  {isShowMap?"收起地图":"展开地图"}}
       
    

js：

    /**
     * 页面的初始数据
     */
    data: {
        isShowMap: true,
        location:{}
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function () {
        // 获取定位
        this.getLocation()
    },

     // 地图定位
    getLocation(){
        // 获取定位
        wx.getLocation({
            success:(res)=>{
                this.setData({
                    location: res
                })
                console.log(this.data.location)
            }
        }) 
    },

    // 是否显示地图
    showMap() {
        let isShowMap = this.data.isShowMap
        this.setData({
            isShowMap: !isShowMap,
        })
        if(this.data.isShowMap){
            let topHeight = 61
            this.getWindowHeight(topHeight)
        }else{
            let topHeight = -330
            this.getWindowHeight(topHeight)
        }  
    },

css：

/* 地图 */
.shop-map {
    width: 100%;
}

.map-area {
    width: 100%;
    height: 390rpx;
    transition: height 0.2s ;
}

.map-area-hidden{
    height: 0;
    width: 100%;
    transition: height 0.2s ;
}

.map-show {
    display: flex;
    width: 100%;
    padding: 20rpx 0;
    justify-content: center;
}

.show-text {
    font-size: 20rpx;
    color: #9d9d9d;
}

.show-img {
    width: 24rpx;
    height: 24rpx;
}

页面完整效果图：

页面完整代码：
wxml：

    
    
        
            附近门店
            
        
        
            常用/收藏
            
        
    
    
    
        
            武汉