本文给大家带来的是微信小程序停车场预约信息填写提交页面样式设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--pages/preOrder/preOrder.wxml-->
<view class="menu-list-container center">
<view class="menu-list-item">
<view class="menu-list-text">停车场</view>
<view class="menu-comment">科海路4号停车场</view>
</view>
<view class="menu-list-item">
<view class="menu-list-text">停车库</view>
<view class="menu-comment">A库</view>
</view>
</view>
<view class="menu-list-container center">
<view class="menu-list-item">
<view class="menu-list-text">预留时间</view>
<view class="menu-comment">30分钟</view>
<image class="menu-arrow-right" src="/images/arrowright.png"></image>
</view>
<view class="menu-list-item">
<view class="menu-list-text">选择车辆</view>
<view class="menu-comment">云A88888</view>
<image class="menu-arrow-right" src="/images/arrowright.png"></image>
</view>
<view class="menu-list-item">
<view class="menu-list-text">充电桩</view>
<view class="menu-comment">需要</view>
<image class="menu-arrow-right" src="/images/arrowright.png"></image>
</view>
</view>
<view class="bottom-btn-group">
<view class="bottom-btn primary u-auto" bindtap="preOrder">提交预约</view>
</view>
<view class="flex center" style="margin:30rpx 0;">
<view class="tip_text" style="color:grey;">点击“预约”即表示您已同意</view>
<view class="tip_text" style="display:inline-block">《奥多停车+ 使用条款》</view>
</view>
|
二、js页面代码如下:
// pages/preOrder/preOrder.js
Page({
data:{},
onLoad:function(options){
wx.setNavigationBarTitle({
title: '车位预约',
success: function(res) {
// success
}
})
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
}
})
|