首页 > 小程序教程 > 微信小程序停车场车位信息页面样式设计制作开发教程

微信小程序停车场车位信息页面样式设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序停车场车位信息页面样式设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--pages/detail/detail.wxml-->

<!--<view class="detail-container flex">
    <view class="parking-name">科海路8号停车场</view>
    <view class="parking-left-text">当前剩余车位</view>
    <view class="parking-left-number">59</view>
    <view class="time">刷新时间:2017-04-22 22:40:15</view>
    <view class="time">当前时间:2017-04-22 22:40:17</view>
</view>-->
<view style="width:100%;height:auto;position: relative;margin-bottom:15rpx;">
  <swiper autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" class="swiper-img">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item}}" class="slide-image" mode="scaleToFill" />
      </swiper-item>
    </block>
  </swiper>
  <view class="parking-name">科海路8号停车场</view>
</view>
<view class="info-list-container">
  <view class="info-list-item">
    <image class="info-list-icon" src="/images/rmb.png"></image>
    <view class="info-list-content">
      <view class="info-list-key">价格</view>
      <view class="info-list-value">首小时 5元,之后 3元/小时</view>
    </view>
  </view>
  <view class="info-list-item">
    <image class="info-list-icon" src="/images/icon/mobile_02.png"></image>
    <view class="info-list-content">
      <view class="info-list-key">位置</view>
      <view class="info-list-value">昆明市西山区科海路139号</view>
    </view>
  </view>
  <view class="flex-row" style="margin:50rpx 0 20rpx 0">
    <view class="flex-column" style="flex:0 0 48%">
      <view class="text-center" style="font-size:16px;color:gray;margin:15rpx 0;">总车位</view>
      <view class="text-center" style="font-size:30px;color:orange;margin:15rpx 0;">120</view>
    </view>
    <view class="x-sidebar"></view>
    <view class="u-auto flex-column">
      <view class="text-center" style="font-size:16px;color:gray;margin:15rpx 0;">剩余车位</view>
      <view class="text-center" style="font-size:30px;color:green;margin:15rpx 0;">48</view>
    </view>
  </view>
</view>

<view class="bottom-btn-group">
  <view class="bottom-btn primary u-1of2" bindtap="preOrder">预约车位</view>
  <view class="bottom-btn plain u-auto" bindtap="openLocation">
    <image class="button-icon" src="/images/icon/map_marker.png"></image>
    查看路线</view>
</view>
 
二、wxss样式文件代码如下:
/* pages/detail/detail.wxss */
page{
    height:100%;
    width:100%;
}
.detail-container{
    flex-direction:column;
    justify-content: center;
    align-items: center;
    padding: 30rpx;
}

.parking-name{
    color: white;
    font-size: 20px;
    margin: 15rpx;
    position: absolute;
    bottom: 20rpx;
    left: 20rpx;
    
}

.time{
    color: lightslategrey;
    font-size: 14px;
}

.swiper-img{
    
    height: 500rpx;
    width: 100%;
}

.slide-image{
    filter: blur(5rpx);
    width: 100%;
    height:500rpx;
}

三、js页面代码如下:
// pages/detail/detail.js
Page({
  data:{
    imgUrls: [
      'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494392460210&di=e2676cd3576ae88c8c528f0dfb8ffd5e&imgtype=0&src=http%3A%2F%2Fstc.zjol.com.cn%2Fg1%2FM0007FDCggSDVeOIZiAIDGbAAEfo007Rck797.jpg%3Fwidth%3D720%26height%3D431'
    ],
    indicatorDots: false,
    autoplay: false,
    interval: 5000,
    duration: 1000,
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  },
  openLocation:function(){
    wx.openLocation({
      latitude: 25.0821785206, // 纬度,范围为-90~90,负数表示南纬
      longitude: 102.6569366455, // 经度,范围为-180~180,负数表示西经
      scale: 28, // 缩放比例
      name: '科海路4号停车场', // 位置名
      address: '昆明市西山区科海路104号'// 地址的详细说明
    })
  },
  preOrder:function(){
    wx.navigateTo({
      url: '../preOrder/preOrder'
    })
  }
  
})

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

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