小程序 之点击从右侧弹出侧边栏

一、效果图

 

 二、wxml

<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 class="l-info">
        <view class="produc-img">
          <image mode="aspectFit" src="https://www.boyuan.com/file/upload/201910/09/092204581.png.thumb.png"></image>
        </view>
      </view>
      <view class="r-info">
        <view class="r-content">
          <view class="goods-name">商品5</view>
          <view class="sub-txt goods-code">
            库存:
            <text class="amount-num">22 件</text>
          </view>
          <view class="sub-txt goods-code">
            销量:
            <text class="amount-num">0 件</text>
          </view>
          <view class="sub-txt goods-code">
            单价: ￥
            <text class="amount-num price-pre">面议</text> /
            <text class="unit">件</text>
          </view>
        </view>
      </view>
    </view>
    <view class="promotion-section">
      <view class="price-line">
        <view class="price-head">
          <view class="price-head-item">起批</view>
          <view class="price-head-item">1-5件</view>
          <view class="price-head-item">6-50件</view>
          <view class="price-head-item">2000件以上</view>
        </view>
        <view class="price-head">
          <view class="price-head-item">价格</view>
          <view class="price-head-item f_price">￥188.00</view>
          <view class="price-head-item f_price">￥165.00</view>
          <view class="price-head-item f_price">￥155.00</view>
        </view>
      </view>
      <view class="aui-card-list-footer">
        <view class="p1">
          颜色：
          <view class="nv_1 nv_2">红色</view><text decode="true">  </text>
          <view class="nv_1">蓝色</view><text decode="true">  </text>
          <view class="nv_1">黑色</view><text decode="true">  </text>
          <view class="nv_1">白色</view>
        </view>
      </view>
      <!-- <view class="aui-card-list-footer">
        <view class="p1">
          颜色：
          <view class="nv_1 nv_2">红色</view><text decode="true">  </text>
          <view class="nv_1">蓝色</view><text decode="true">  </text>
          <view class="nv_1">黑色</view><text decode="true">  </text>
          <view class="nv_1">白色</view>
        </view>
      </view> -->

      <!-- <view class="aui-card-list-footer">
        <view class="p4">
          尺寸：
          <view class="" style="display: inline-block;float: left;text-align: center;margin-right: 5px;">
            <view></view>
          </view>
        </view>
      </view> -->
    </view>
  </view>
</view>

 

三、wxss

.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;
}

　

四、js代码

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