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

小码助力助你前行

已于 2022-07-01 16:18:47 修改

阅读量978

点赞数 3

分类专栏： vue 微信小程序 js 文章标签：微信小程序 javascript 前端

于 2022-06-22 10:20:39 首次发布

本文链接：https://blog.csdn.net/weixin_42575720/article/details/125403691

版权

本文介绍了微信小程序中如何实现地图定位功能，并结合页面滚动和列表展示进行详细讲解。提供了完整的wxml、js和css代码示例，帮助读者理解和实现相关功能。若在开发过程中遇到问题，可以联系作者获取有偿技术支持。

摘要由CSDN通过智能技术生成

效果图

在这里插入图片描述

地图定位代码：

wxml：

    <!-- 地图 -->
<view class="shop-map">
  <map class="{
  {isShowMap == true ? 'map-area' : 'map-area-hidden'}}"
  longitude = "{
  {location.longitude}}" latitude="{
  {location.latitude}}">
  </map>
    <view class="map-show" bind:tap="showMap">
       <view class="show-text">{
  {isShowMap?"收起地图":"展开地图"}}</view>
       <image class="show-img" src="/images/tab-list-shop/push.png" />
    </view>
</view>

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：

<navBar id="navBar" titleText="门店" fontSize="36"></navBar>
<view class="tab-list-shop">
    <!-- 子导航 -->
    <view class="shop-nav">
        <view class="nav-nearby-store {
  {navSel==0 ? 'seleted-nav-nearby-store' : ''}}" bind:tap="nearbySel" >
            附近门店
            <view class="seleted-blue-line" wx:if="{
  {navSel==0}}"></view>
        </view>
        <view class="nav-my-collect {
  {navSel==1 ? 'seleted-nav-my-collect' : ''}}" bind:tap="collectSel">
            常用/收藏
            <view class="seleted-blue-line" wx:if="{
  {navSel==1}}"></view>
        </view>
    </view>
    <!-- 搜索 -->
    <view class="shop-search">
        <view class="sel-address">
            武汉
            <image class="sel-address-img" src="/images/tab-list-shop/down.png" />
        </view>
        <view class="search-area">
            <image class="search-img" src="/images/tab-list-shop/search.png" />
            <input class="search-input" placeholder&