微信小程序模拟车位选择功能（简陋版本）

功能：实现在线选车位功能

效果图：

//.js文件const app = getApp();
Page({data:{indicatorDots: false,autoplay: false,interval: 5000,duration: 1000,items: [{ value: '1', checked: "" },{ value: '2', checked: "" },{ value: '3', checked: "" },{ value: '4', checked: "" },{ value: '5', checked: "" },{ value: '6', checked: "" },{ value: '7', checked: "" },{ value: '8', checked: "" },{ value: '9', checked: "" },{ value: '10', checked: "" },{ value: '11', checked: "" },{ value: '12', checked: "" },{ value: '13', checked: "" },{ value: '14', checked: "" },{ value: '15', checked: "" },{ value: '16', checked: "" },{ value: '17', checked: "" },{ value: '18', checked: "" },{ value: '19', checked: "" },{ value: '20', checked: "" },{ value: '21', checked: "" },{ value: '22', checked: "" },{ value: '23', checked: "" },{ value: '24', checked: "" },{ value: '25', checked: "" },{ value: '26', checked: "" },{ value: '27', checked: "" },{ value: '28', checked: "" },{ value: '29', checked: "" },{ value: '30', checked: "" },],arr: [], //标签数组：用来存储选中的值},//选择标签方法checkLabs(e) {var that = this, index = e.currentTarget.dataset.index,//点击的值（字符型）value = e.currentTarget.dataset.value,//点击的值items = that.data.items,//数组arr = that.data.arr,//前一个点击的值val = items[index].checked, //点击前值的状态limitNum = 1,curNum = 0; //已选择数量console.log(e)// console.log(value)// console.log(items)// console.log(val)//选中累加for (var i in items) {if (items[i].checked) {curNum += 1;}}
console.log(curNum)
console.log(limitNum)if (!val) {if (curNum == limitNum) {wx.showModal({content: '只能选择' + limitNum + '个车位',showCancel: false})return;}arr.push(value);} else {for (var i in arr) {if (arr[i] == value) {arr.splice(i, 1);}}}items[index].checked = !val;that.setData({items: items,arr: arr})},//默认选中为true的selectEd(e){var that = this,arr = that.data.arr,items = that.data.itemsfor (var i = 0; i < items.length; i++) {if (items[i].checked) {var value = items[i].value;arr.push(value);that.setData({items: items,arr: arr})}}},onLoad:function(options){// 页面初始化 options为页面跳转所带来的参数this.selectEd();},  })

//.wxml文件<view class="biaoti">一食堂停车场</view><view class='the-label'><view class='list'><block wx:for="{{items}}" wx:for-item="v" wx:key="k" wx:for-index="index"><view class="li {{v.checked?'cur':''}}" data-index="{{index}}" data-checked="{{items.checked}}" data-value="{{v.value}}" bindtap="checkLabs"><image mode="widthFix"src="/static/images/icon_3/free.png" style="width: 100rpx; height: 125rpx;"></image><checkbox value="{{item.value}}" data-val="{{item.value}}" hidden='false' checked='{{item.checked}}' /><label class='ti'>{{v.value}}</label></view></block></view>
</view><!-- 这里用来存储选中的标签的值 {{arr}}-->
<view class='seled'><view class='tt'>你当前选中的是：</view><label class='sel-v'>{{arr}}</label>
</view><view class="wa"><!-- 分割线 --><view class="hr"></view><view class="box"><view class="box1"><view class="text-center" >总车位</view><view class="text-center" >{{items.length}}</view></view><view class="box2"><view class="text-center" >剩余车位</view><view class="text-center" >25</view></view></view></view><!-- 分割线 --><view class="hr"></view><view class="box"><button class="button1" bindtap="tiaozhuan">预约车位</button><button class="button2" bindtap="tiaozhuan" data-items="{{items}}">查看路线</button>
</view>

//.wxss文件page{height:100%;width:100%;
}/* 选座系统的样式 */
.the-label{ width: 100%;
background-color: #fff;
padding: 20rpx 30rpx 40rpx;
box-sizing: border-box;
margin-bottom: 20rpx;
align-content: center;}
.the-label .list{ width: 100%;
overflow: hidden;margin-top: 48rpx;}
.the-label .list .li{ padding: 0 10rpx;
height: 220rpx;width: 100rpx; line-height: 60rpx; border: 1px solid #f0f0f0; border-radius: 10rpx;
overflow: hidden;
font-size: 35rpx;
color: #808080;
float: left;
margin: 0 10rpx 17rpx 0;
text-align: center;}
.the-label .list .li.cur{ color: #55beb7; border-color: #55beb7;background-color: #a6ece8;}.seled{ width: 100%; margin-top: 30rpx; color: #666; font-size: 28rpx; padding: 0 30rpx; box-sizing: border-box;}
.seled .sel-v{ color: #f00; font-weight: 700; font-size: 30rpx; margin-top: 20rpx; }/* 车位 */
/* label{border:0rpx solid #aaaaaa;width: 90rpx; height: 120rpx;margin:20rpx;
} */
.check {display:flex;flex-wrap:wrap;/* justify-content:space-around; */margin:20rpx;
}
.check label {width: 90rpx;height: 120rpx;border-radius: 8rpx;/* background-color: #fff;   */display: flex;align-items: center;margin: 0 5rpx;justify-content: center;/* color: #aaa; */margin-top: 20rpx;margin: 50rpx 20rpx ;
}
.is_checked {background-color: #14a1fd;opacity: 0.4;color: #fff;border: 2rpx solid #fff;
}
.is_checked>checkbox {color: red;
}/* 食堂标题 */
.biaoti{text-align: center;
font-family: 'blod';
font-size: 55rpx;
padding-bottom: 15rpx;
font-family: cursive;
}
.hr {width: 100%;
height: 15px;
background-color: #ffffff;
}
.box{display:flex;
flex-direction:row;
justify-content:flex-start;
font-family: cursive;
}
.box1{width:100%;
height:100%;
border:1rpx solid #0e0d0d;
padding-top: 30rpx;
padding-bottom: 30rpx;
}
.box2{width:100%;
height:100%;
border:1rpx solid #0e0d0d;
padding-top: 30rpx;
padding-bottom: 30rpx;
}.text-center{text-align: center;
}
/*分割线样式*/
.divLine{background: #E0E3DA;
width: 100%;
height: 5rpx;
}

微信小程序模拟车位选择功能（简陋版本）相关推荐

php 类似微信下拉菜单,微信小程序模拟下拉菜单开发实例
本文主要和大家分享微信小程序模拟下拉菜单开发实例,希望能帮助到大家. 一.知识点 1.实现动态显示和隐藏某个控件列表1data:{ open:false }, showitem:function() ...
【微信小程序】车位在线销售平台（三）
[微信小程序]车位在线销售平台(三) 文章目录 [微信小程序]车位在线销售平台(三) 前言一.背景色二.个人信息三.车位订单四.常用功能五.总结前言在前一章节中已经介绍了关于首页开发的大 ...
微信小程序模拟车牌号键盘
微信小程序模拟车牌号键盘效果图中文键盘英文数字键盘项目地址:https://github.com/ushars/keyboard
微信小程序模拟拨打电话
微信小程序模拟拨打电话使用单击事件 gophone: function () {wx.makePhoneCall({phoneNumber: '4000111212',/*模拟的电话号码*/})},
微信小程序—模拟豆瓣搜索电影（图文）
微信小程序-模拟豆瓣搜索电影先新建search目录和page 1.在search.wxml页面给input添加bindinput事件给input写一个value值,用来清空给button绑定b ...
小程序 php cookie,微信小程序模拟 cookie
开发背景现有系统已经有一套完整的接口,用户状态.验证都是基于 cookie 的. 部分业务要上小程序版本,众所周知,微信小程序不支持 cookie 的.要上线的业务,最好的方式还是基于现有这套接口做 ...
微信小程序用户自动检测最新版本并更新2020年最新版亲测
微信小程序新版本发布之后,用户使用依然是旧版本,这是因为在微信中有旧版本的缓存,不会及时更新到新版本.要想让用户更新到新版本,可以通过提示用户在微信中的"发现 - 小程序"入口中将 ...
共享停车位小程序,微信小程序停车场车位,微信小程序停车场系统毕设作品
项目背景和意义目的:首先,在社会上"停车难"是一个众所周知的问题,每个小区,每个大厦都有自己的停车场,但是在没有进入停车场之前,我们没办法知道是否有空车位,空车位在哪个地方.为了 ...
php 发送微信请求失败的原因,微信小程序模拟正常真机服务器请求出错
微信小程序中出现最多的一个问题,就是真机跟本地不同:我简单列举一些我发现的原因,给大家参考,大家也可以把自己发现的东西回复给我,给我参考: 本地看不到数据,就先让本地能看到数据,再看本帖.... 1: ...

微信小程序模拟车位选择功能（简陋版本）

微信小程序模拟车位选择功能（简陋版本）相关推荐

最新文章

热门文章