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

Posted 2023-02-27 未名胡

<view bindtap="showRight">刷选</view>
<view class="leftBox 'leftView?'leftActive':'''" bindtap='hideLeft' data-item="1">
  <view class="left goods-detail 'leftView?'leftActive':'''" catchtap='getleft'>
    <text class="close-btn iconfont icon-guanbi" catchtap="hideLeft"></text>
    <view class="goods-info">
     
    </view>
  </view>
</view>

.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
    )
  
)