zoukankan      html  css  js  c++  java
  • 小程序 之点击从右侧弹出侧边栏

    一、效果图

     二、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 {
       100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.5);
      position: fixed;
      right: -720px;
      top: 0px;
      z-index: 1;
    }
    
    .left {
       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;
       280rpx;
      position: relative;
    }
    
    .goods-detail .goods-info .l-info .produc-img {
       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 {
       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;
       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;
       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
        })
      }
    })
    

      

  • 相关阅读:
    nginx-1.8.1的安装
    ElasticSearch 在3节点集群的启动
    The type java.lang.CharSequence cannot be resolved. It is indirectly referenced from required .class files
    sqoop导入导出对mysql再带数据库test能跑通用户自己建立的数据库则不行
    LeetCode 501. Find Mode in Binary Search Tree (找到二叉搜索树的众数)
    LeetCode 437. Path Sum III (路径之和之三)
    LeetCode 404. Sum of Left Leaves (左子叶之和)
    LeetCode 257. Binary Tree Paths (二叉树路径)
    LeetCode Questions List (LeetCode 问题列表)- Java Solutions
    LeetCode 561. Array Partition I (数组分隔之一)
  • 原文地址:https://www.cnblogs.com/yang-2018/p/11697780.html
Copyright © 2011-2022 走看看