首页 > 小程序教程 > 微信小程序奥多停车带地图停车场列表设计制作开发教程

微信小程序奥多停车带地图停车场列表设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序奥多停车带地图停车场列表设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--index.wxml-->

<map id="map" longitude="102.6569366455" latitude="25.0821785206" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" bindregionchange="regionchange" show-location class="map"></map>
<view class="nearby-parkingLot">
  <view class="plain-text inline-block">在您附近找到</view>
  <view class="left-number inline-block">3</view>
  <view class="plain-text inline-block">家智能停车场</view>
</view>
<view class="parking-list-container">
  <view class="parking-list-section center" bindtap="bindParkingListItemTap">
    <view class="content">
      <view class="parking-list-item flex">
        <view class="parking-name">科海路4号停车场</view>
      </view>
      <view class="parking-list-item flex">
        <view class="u-1of2 plain-text">距您:
          <view class="parking-distance">50米</view>
        </view>
        <view class="plain-text">剩余车位:
          <view class="left-number">102</view>
        </view>
      </view>
    </view>
    <image class="arrow-right" src="/images/arrowright.png"></image>
    <!--<view class="menu-button">预约</view>-->
  </view>
  <view class="parking-list-section center">
    <view class="content">
      <view class="parking-list-item flex">
        <view class="parking-name">科高路7号停车场</view>
      </view>
      <view class="parking-list-item flex">
        <view class="u-1of2 plain-text">距您:
          <view class="parking-distance">200米</view>
        </view>
        <view class="plain-text">剩余车位:
          <view class="left-number">43</view>
        </view>
      </view>
    </view>
    <image class="arrow-right" src="/images/arrowright.png"></image>
  </view>
  <view class="parking-list-section center">
    <view class="content">
      <view class="parking-list-item flex">
        <view class="parking-name">海屯路超市停车场</view>
      </view>
      <view class="parking-list-item flex">
        <view class="u-1of2 plain-text">距您:
          <view class="parking-distance">700米</view>
        </view>
        <view class="plain-text">剩余车位:
          <view class="left-number">23</view>
        </view>
      </view>
    </view>
    <image class="arrow-right" src="/images/arrowright.png"></image>
  </view>

</view>

<view class="menu-annotation">更多</view>
<view class="menu-list-container center">
  <view class="menu-list-item">
    <image src="/images/icon/day_view.png" class="menu-list-icon"></image>
    <view class="menu-list-text">查看全部</view>
    <image class="menu-arrow-right" src="/images/arrowright.png"></image>
  </view>
  <view class="bottom-btn plain u-auto" style="" bindtap="openParkingMap">
    <image class="button-icon" src="/images/icon/location.png"></image>
    查看车辆位置
  </view>
</view>
 
二、wxss样式文件代码如下:
/**index.wxss**/


.bottom-bar {
  background-color: white;
}

.map{
  width:100%;
  height:40%;
  margin: 0 auto;
}
.parking-list-container{
  margin-bottom: 15rpx;
}
.parking-list-section{
    background-color: white;
    /*padding: 20rpx;*/
    /*margin: 20rpx 0;*/
    display: flex;
    /*border-bottom: 1rpx solid gainsboro;*/
    border-radius: 15rpx;
    margin:10rpx 15rpx;
}

.parking-list-section:last-child{
    
    border-bottom: none;
}

.parking-list-item{
    margin: 15rpx;
}

.plain-text{
    font-size: 14px;
    color: gray;
}

.parking-name{
    font-size: 18px;
    color:black;
}

.left-number{
    display: inline-block;
    color: green;
    font-size: 16px;
}

.parking-distance{
    display: inline-block;
    font-size: 14px;
    color: gray;
}

.content{
    justify-content: space-between;
    padding:10rpx;
    flex: 1
}

.nearby-parkingLot{
  padding: 10rpx;
}

三、js页面代码如下:
//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    markers: [{
      iconPath: "/images/park.png",
      id: 0,
      latitude: 25.0821785206,
      longitude: 102.6569366455,
      width: 40,
      height: 48,
    }, {
      iconPath: "/images/park.png",
      id: 1,
      latitude: 25.0823145601,
      longitude: 102.6563519239,
      width: 40,
      height: 48,
    }, {
      iconPath: "/images/park.png",
      id: 1,
      latitude: 25.0780000901,
      longitude: 102.6586639881,
      width: 40,
      height: 48,
    }, {
      iconPath: "/images/park.png",
      id: 1,
      latitude: 25.0782624609,
      longitude: 102.6556384563,
      width: 40,
      height: 48,
    }],
    polyline: [{
      points: [{
        longitude: 102.6569366455,
        latitude: 25.0821785206
      }, {
        longitude: 102.6569366455,
        latitude: 23.21229
      }],
      color: "#FF0000DD",
      width: 2,
      dottedLine: true
    }]
    // controls: [{
    //   id: 1,
    //   iconPath: '/images/car.png',
    //   position: {
    //     left: app.globalData.windowWidth/2-32,
    //     top: app.globalData.windowHeight/2-84,
    //     width: 64,
    //     height: 64
    //   },
    //   clickable: true
    // }]
  },
  onLoad: function (e) {

  },
  regionchange(e) {
    console.log(e.type)
  },
  markertap(e) {
    console.log(e.markerId)
  },
  controltap(e) {
    console.log(e.controlId)
  },
  bindParkingListItemTap: function () {
    wx.navigateTo({
      url: "../detail/detail"
    })
  },
  openParkingMap: function () {
    wx.navigateTo({
      url: '../parkinglotMap/parkinglotMap',
      success: function (res) {
        // success
      },
      fail: function (res) {
        // fail
      },
      complete: function (res) {
        // complete
      }
    })
  }
})

模板简介:该模板名称为【微信小程序奥多停车带地图停车场列表设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 26,711次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 07-24
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
微信素材 微信图片 html5 微信模板 单页式简历模板 响应式 自适应 企业网站 微信公众平台 微信文章
您可能会喜欢的其他模板