微信小程序中物品详情页之底部弹出规格（带遮罩层和加减数量）

	很多电商平台都有规格可以选择，我这里有一个简单的例子，点击已选，底部弹出带遮罩层和加减数量的规格选择。

注释都在代码上哦，自己看吧。
来两张效果图

点击遮罩层部分或者×logo会返回第一张图片，相当于取消，也就是下面js里的close事件。
注意哦：加减里的数量可以输入的哦。

    
      
    
    
      
    
    
   
    
      
    
  





  


    
    
    
      
        

          
            
          

          
            {{goodsList.title}}

            
              {{goodsList.price1}}
              {{goodsList.price2}}
              /{{goodsList.unit}}
            

          

          
            
            
          
        

        规格: 1盒 | {{goodsList.weight}}

        
          购买数量
          
          
            
            -
            
            
            
            +
          
        

      
      加入购物车

    
  

接着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) {
    
  },
  
})