本文给大家带来的是微信小程序附近停车场列表显示页面样式设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--pages/parkingLotList/parkingLotList.wxml-->
<view class="parking-list-section center">
<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>
<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>
|
二、wxss样式文件代码如下:
/* pages/parkingLotList/parkingLotList.wxss */
page {
background-color: #ebebeb;
}
.parking-list-section{
background-color: white;
display: flex;
border: 1rpx solid gainsboro;
}
.parking-list-item{
margin: 15rpx;
}
.plain-text{
font-size: 14px;
color: gray;
}
.parking-name{
font-size: 18px;
color: green;
}
.left-number{
display: inline-block;
color: orangered;
font-size: 14px;
}
.parking-distance{
display: inline-block;
font-size: 14px;
color: gray;
}
.content{
justify-content: space-between;
flex: 1
}
|
三、js页面代码如下:
// pages/parkingLotList/parkingLotList.js
Page({
data: {},
onLoad: function (options) {
wx.setNavigationBarTitle({
title: '附近停车场',
success: function (res) {
// success
}
})
// 页面初始化 options为页面跳转所带来的参数
},
onReady: function () {
// 页面渲染完成
},
onShow: function () {
// 页面显示
},
onHide: function () {
// 页面隐藏
},
onUnload: function () {
// 页面关闭
}
})
|