小程序事件控制显示隐藏

wxml：

<!--pages/demo/demo.wxml-->
<view class='content'>
  <!-- 1、返回箭头 -->
  <view class='callback'>
    <view class='arrow'></view>
  </view>
  <!-- 2、地址栏 -->
  <view class='address'>
    <!-- <view class='address-del'> -->
      <view class='address-info'>
        <view class='address-name'>张三</view>
        <text>18000000000</text>
      </view>
      <view>广东省广州市越秀区海珠广场B栋6楼</view>
    <!-- </view> -->
  </view>
  <!-- 3、商品列表 -->
  <view class='goods-list'>
    <!-- f1 -->
    <view class='goods-top'>
       <!--商品一 弹性-->
        <view class='one'>
          <view class='one-left'>
            <image class='left-img' src='/images/1.jpg'></image>
          </view>
          <view class='one-right'>
            <view>商品一标题</view>
            <view>商品一详情</view>
            <view class='goods-price'>
              <view>￥128</view>
              <view>x2</view>
            </view>
          </view>
        </view>
       <!-- 赠品 -->
      <view class='goods-other'>
        <view class='other-title'>
          <text class='other-zp'>赠品</text>
          <text>赠品详情</text>
        </view>
        <view class='other-one'>
          <view class='other-left'>
            <image class='other-img' src='/images/3.jpg'></image>
          </view>
          <view class='other-right'>
            <view>赠品标题</view>
            <view>赠品详情</view>
            <view class='goods-price'>
              <view>￥56</view>
              <view>x1</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- f2 -->
    <view class='one'>
      <view class='one-left'>
        <image class='left-img' src='/images/2.jpg'></image>
      </view>
      <view class='one-right'>
        <view>商品二标题</view>
        <view>商品二详情</view>
        <view class='goods-price'>
          <view>￥128</view>
          <view>x1</view>
        </view>
      </view>
    </view>

  </view>
  <!-- 4、优惠券+文字说明+备注 //优惠券点击事件：底部滑出菜单 -->
  <view class='card'>
    <!-- 优惠券+点击事件 -->
    <view class='card-event'  bindtap="showmenu">
      <text>优惠券</text>
      <text>选择优惠</text>
    </view>
    <!-- 先隐藏的优惠券 -->
    <view wx:if="{{showView}}">
      <view class='card-list-del'>优惠一</view>
      <view class='card-list-del'>优惠一</view>
      <view class='card-list-del'>优惠一</view>
      <view class='card-list-del'>优惠一</view>
      <view class='card-list-del'>优惠一</view>
    </view>
    <!-- 文字 -->
    <view class='what'>
      <view class='what-flex'>
        <text>文字一</text>
        <text>文字二</text>
      </view>
      <view class='what-flex'>
        <text>文字三</text>
        <text>文字四</text>
      </view>
    </view>
  </view>
  <!-- 5、总价+结算  固定底部-->
  <view class='fixed-bottom'>
    <!-- 总价 -->
    <view class='count'>总价:￥128</view>
    <!-- 结算 -->
    <view>立即结算</view>
  </view>

</view>

wxss:

/* pages/demo/demo.wxss */
.content{
  width: 100%;
  height: auto;
  margin-bottom: 300rpx;
}
/* 返回箭头 */
.callback{
  width: 100%;
  height: 110rpx;
}
.callback .arrow{
  width: 10px;
  height: 10px;
  border-top: 2px solid #999;
  border-left: 2px solid #999;
  position: absolute;
  left: 40rpx;
  transform: rotate(-45deg);
  top:20px;
}

/* 地址栏 */
.address{
  width: 100%;
  height: 150rpx;
  padding:0 30rpx;
  color: #333;
  font-size: 35rpx;
  background-color: #f0f0f0;
}
.address-info{
  margin-bottom: 20rpx;
}
.address-name{
  width: 100rpx;
  display: inline-block;
}

/* 商品列表 */
.goods-list{
  margin-top: 30rpx;
  width: 100%;
}
.goods-top{
  margin-bottom: 30rpx;
}
.one{
  width: 100%;
  display: flex;
  justify-content: flex-start;
}
/* 商品一 */
.left-img{
  width: 200rpx;
  height: 200rpx;
  margin:0 40rpx;
}
.one-right{
  width: 70%;
  text-align: left;
  margin-right:30rpx;
  line-height:66rpx;
}
.goods-price{
  display: flex;
  justify-content: space-between;
}

/* 赠品 */
.other-title{
  display: flex;
  justify-content: center;
  margin: 30rpx 0;
}
.other-zp{
  width: 90rpx;
  height: 50rpx;
  border: 1px solid #f00;
  display: inline-block;
  text-align: center;
  margin-right: 20rpx;
}

.other-one{
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin-left:200rpx;

}
.other-img{
  width: 150rpx;
  height: 150rpx;
  margin:0 40rpx;
}
.other-right{
  width: 38%;
  text-align: left;
  margin-right:30rpx;
  line-height:52rpx;
  font-size: 35rpx;
}


/* 优惠券 */
.card-event{
  display: flex;
  justify-content: space-between;
  margin: 30rpx;
  padding: 20rpx;
  border: 1px solid #555;
}

.card-list-del{
  text-align: center;
  background-color: #ed7dcf;
  line-height: 50rpx;
}

.what-flex{
  display: flex;
  justify-content: space-between;
  margin: 40rpx;
}


/* 总价+结算 */
.fixed-bottom{
  position: fixed;
  bottom: 0;
  z-index: 999;
  width: 100%;
  height: 125rpx;
  line-height: 125rpx;
  display: flex;
  justify-content: space-evenly;
  border-top: 1px solid #333;
  background-color: #f3f3f3;
}
.count{
  width: 35%;
  border-right: 1px solid #333;
}

js:

// pages/demo/demo.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    showView: false //通过true 和 false 来控制显示隐藏
  },

  showmenu: function () {
    　　this.setData({
      showView: !this.data.showView
    　　})
  },


  // 上拉菜单的点击展开或收起
  onChange() {

  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})