小程序实现刷选-右边抽屉效果

刷选

  
    
    
     
    
  

.leftBox {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  right: -720px;
  top: 0px;
  z-index: 1;
}
 
.left {
  width: 80vw;
  height: 100vh;
  background: #fff;
  position: fixed;
  right: -720px;
  top: 0px;
  transition: all 0.5s; /*动画  */
  z-index: 10;
}
 
.leftActive {
  right: 0px;
}
 
.goods-detail .goods-info {
  zoom: 1;
  overflow: hidden;
  padding: 20rpx 0 20rpx 24rpx;
}
 
.goods-detail .goods-info {
  margin-left: -40rpx;
  padding-left: 0;
  padding-top: 70rpx;
}
 
.goods-detail .goods-info .l-info {
  float: left;
  width: 280rpx;
  position: relative;
}
 
.goods-detail .goods-info .l-info .produc-img {
  width: 280rpx;
  height: 280rpx;
  text-align: center;
  box-sizing: border-box;
  border: 1px solid #d2d2d2;
  background: #fff;
  padding: 10rpx;
}
 
.goods-detail .goods-info .l-info .produc-img image {
  width: 100%;
  height: 100%;
  display: inline-block;
}
 
.goods-detail .close-btn {
  margin-right: 32rpx;
  margin-top: 10rpx;
  position: absolute;
  right: -10rpx;
  color: #999;
}
 
.goods-detail .goods-info .r-info {
  float: left;
  width: calc(100% - 280rpx);
}
 
.goods-detail .goods-info .r-info .r-content {
  padding-left: 24rpx;
}
 
.goods-detail .goods-info .goods-name {
  font-size: 40rpx;
  color: #333;
  font-weight: bold;
}
 
.goods-detail .goods-info .goods-code {
  margin-top: 8rpx;
}
 
.price-pre {
  color: red;
  font-size: 32rpx;
}
 
.promotion-section {
  padding: 20rpx 0;
}
 
.aui-card-list-footer {
  min-height: 1.5rem;
  padding: 0.25rem 0.75rem;
  color: #999;
  font-size: 0.6rem;
  margin-bottom: 10px;
}
 
.aui-card-list-footer {
  font-size: 28rpx;
}
 
.aui-card-list-footer .nv_1 {
  display: inline-block;
  padding: 0.6em 0.65em;
  font-size: 0.6rem;
  line-height: 1;
  color: #616161;
  background-color: #f3f3f3;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25em;
}
 
.aui-card-list-footer .nv_2 {
  display: inline-block;
  padding: 0.6em 0.65em;
  font-size: 13px;
  line-height: 1;
  color: #fff;
  background-color: #03a9f4;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25em;
}
 
.aui-card-list-footer .nv_2, .aui-card-list-footer .nv_1 {
  font-size: 13px;
}
 
.price-line {
  padding: 24rpx 8rpx;
  border-bottom: 1px solid #eee;
}
 
.price-head {
  display: flex;
  width: 100%;
  text-align: center;
  background-color: #fbf9fe;
  padding: 5px 0;
}
 
.price-head-item {
  flex: 1;
  text-align: center;
  font-size: 26rpx;
}
.f_price {
    color: #ff0000;
}

const app = getApp();
Page({
  data: {
    leftView: true
  },
  onLoad: function (options) {
 
  },
  onShow: function () {
 
  },
  showRight(e) {
    this.setData({
      leftView: !this.data.leftView
    })
  },
  hideLeft() {
    this.setData({
      leftView: !this.data.leftView
    })
  }
})