微信小程序中物品详情页之底部弹出规格（带遮罩层和加减数量）
程序员文章站
2022-03-11 16:41:07
...
很多电商平台都有规格可以选择，我这里有一个简单的例子，点击已选，底部弹出带遮罩层和加减数量的规格选择。
注释都在代码上哦，自己看吧。
来两张效果图
点击遮罩层部分或者×logo会返回第一张图片，相当于取消，也就是下面js里的close事件。
注意哦：加减里的数量可以输入的哦。
<view class='selected-all' bindtap='share'>
<view class='selected-input1'>
<input disabled='false' value='已选'></input>
</view>
<view class='selected-input2'>
<input disabled='false' value='{{num}}盒'></input>
</view>
<view class='xuan-img'>
<!-- logo>图标 -->
<image class='ze-img' src='/pages/img/zuo_29.png' mode='aspectFit'></image>
</view>
</view>
<!-- 底部弹出 -->
<view class="hide{{showView?'':'show'}}">
<view class="shade">
<view class='contsup' bindtap='close'>
</view>
<view class="conts">
<view class='conts-item'>
<view class="cont-row">
<view class="cont-vi">
<image src='{{goodsList.img}}' class="cont-img"></image>
</view>
<view class="cont-column">
<view class="cont-apple">{{goodsList.title}}</view>
<view class="price-row">
<view class="cont-price1">{{goodsList.price1}}</view>
<view class="cont-price2">{{goodsList.price2}}</view>
<view class="cont-price3">/{{goodsList.unit}}</view>
</view>
</view>
<view class="cont-shan">
<!-- 取消×图标 -->
<image class="shan-img" src='/pages/img/shanchuyixuanqunchengyuanchacha.png' bindtap='close'></image>
</view>
</view>
<view class="cont-guige">规格: 1盒 | {{goodsList.weight}}</view>
<view class="cont-buyall">
<view class="cont-buynum">购买数量</view>
<!-- 主容器 -->
<view class="stepper">
<!-- 减号 -->
<text class="{{minusStatus}}" bindtap="bindMinus">-</text>
<!-- 数值 -->
<input type="number" bindchange="bindManual" value="{{num}}" />
<!-- 加号 -->
<text class="normal" bindtap="bindPlus">+</text>
</view>
</view>
</view>
<view class='cancel' bindtap="addCar">加入购物车</view>
</view>
</view>
</view>
接着wxss
.selected-all {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
height: 70rpx;
line-height: 70rpx;
}
.selected-input1 {
margin-left: 5%;
font-size: 32rpx;
}
.selected-input2 {
font-size: 32rpx;
}
.xuan-img {
margin-right: 5%;
}
.ze-img {
width: 30rpx;
height: 20px;
}
.share{
width: 500rpx;
height: 100rpx;
margin-top: 80rpx;
border-radius: 10rpx;
font-size: 28rpx;
text-align: center;
display: flex;
color: white;
flex-direction: column;
justify-content: center;
}
/*遮罩层 */
.shade{
width:100%;
height:100%;
top:0;
background:rgba(0,0,0,0.5);
overflow: hidden;
/*要显示在wrap的上面 */
z-index: 1;
position: absolute;
}
/*显示与隐藏的内容即点击核算后所展示的详细内容 */
.conts{
width: 100%;
height: 500rpx;
background-color: #f3f3f3;
position: fixed;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
/*text-indent: 60rpx; */
}
.conts-item{
width: 100%;
display: flex;
flex-direction: column;
/* align-items: center; */
padding-top: 30rpx;
}
/*显示整个conts */
.show{
display: block;
}
/*隐藏整个conts */
.hide{
display: none;
}
.contsup{
width: 100%;
height: 100%;
}
/*关闭按钮（关闭整个conts） */
.shares{
display: flex;
width: 100%;
flex-direction: row;
margin-top: 40rpx;
justify-content: space-between;
height: 250rpx;
}
.share-item{
background-color: white;
display: flex;
width: 33%;
flex-direction: column;
align-items: center;
padding-top: 40rpx;
/*margin-left: 60rpx;
margin-right: 30rpx;*/
}
button::after{ border: none; }
.cancel{
width: 100%;
height: 100rpx;
font-size: 26rpx;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-top: 1rpx solid #ECECEC;
background-color: #8AC249;
color: white;
}
.fonts{
font-size: 32rpx;
color: #333333;
margin-top: 20rpx;
}
.cont-row{
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 20rpx;
}
.cont-vi{
display: flex;
margin-top: -70rpx;
background-color: white;
margin-left: 5%;
}
.cont-img{
height: 210rpx;
width: 210rpx;
}
.cont-column{
display: flex;
flex-direction: column;
margin-left: -20%;
}
.cont-apple{
display: flex;
flex-direction: column;
margin-bottom: 40rpx;
}
.cont-price1{
font-size: 36rpx;
}
.price-row{
display: flex;
flex-direction: row;
align-items: center;
}
.cont-price2{
font-size: 24rpx;
}
.cont-price3{
font-size: 24rpx;
}
.cont-shan{
display: flex;
margin-right: 5%;
}
.shan-img{
width: 40rpx;
height: 40rpx;
}
.cont-guige{
font-size: 26rpx;
margin-left: 5%;
margin-bottom: 20rpx;
}
.cont-buyall{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.cont-buynum{
font-size: 26rpx;
margin-left: 5%;
}
/*主容器*/
.stepper {
width: 160rpx;
height: 55rpx;
/*给主容器设一个边框*/
border: 2rpx solid #ccc;
border-radius: 6rpx;
/* margin:0 auto; */
display: inline-block;
vertical-align: top;
margin-right: 5%;
}
/*加号和减号*/
.stepper text {
width: 38rpx;
line-height: 52rpx;
text-align: center;
float: left;
}
/*数值*/
.stepper input {
width: 80rpx;
height: 52rpx;
float: left;
/* margin: 0 auto; */
text-align: center;
font-size: 24rpx;
/*给中间的input设置左右边框即可*/
border-left: 2rpx solid #ccc;
border-right: 2rpx solid #ccc;
}
/*普通样式*/
.stepper .normal{
color: black;
}
/*禁用样式*/
.stepper .disabled{
color: #ccc;
}
最后是js逻辑
Page({
/**
* 页面的初始数据
*/
data: {
showView: true,
num: 1,
goodsList:{
title: "苹果",
img: "/pages/img/class1.png",
price1: "6",
price2: ".23",
unit: "份",
weight: "0.25kg"
},
},
close: function () {
let that = this;
that.setData({
showView: (!that.data.showView)
})
},
share: function () {
this.setData({
showView: false,
})
},
/* 点击减号 */
bindMinus: function () {
var num = this.data.num;
// 如果大于1时，才可以减
if (num > 1) {
num--;
}
// 只有大于一件的时候，才能normal状态，否则disable状态
var minusStatus = num <= 1 ? 'disabled' : 'normal';
// 将数值与状态写回
this.setData({
num: num,
minusStatus: minusStatus
});
},
/* 点击加号 */
bindPlus: function () {
var num = this.data.num;
// 不作过多考虑自增1
num++;
// 只有大于一件的时候，才能normal状态，否则disable状态
var minusStatus = num < 1 ? 'disabled' : 'normal';
// 将数值与状态写回
this.setData({
num: num,
minusStatus: minusStatus
});
},
addCar: function (e) {
wx.showToast({
title: '加入购物车成功',
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
})