本文给大家带来的是微信小程序停车场车位信息页面样式设计制作开发教程,制作好以后效果图如下:
一、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'
})
}
})
|