小程序固定頂部，中間滾動

 

wxml代碼：

<!--pages/my_coupon/my_coupon.wxml-->
<view class='coupon'>
  <view class='header'>
    <view class="item {{currentTab==0 ? 'on' : ''}}" bindtap='tabChange' data-current="0">全部</view>
    <view class="item {{currentTab==1 ? 'on' : ''}}" bindtap='tabChange' data-current="1">未使用</view>
    <view class="item {{currentTab==2 ? 'on' : ''}}" bindtap='tabChange' data-current="2">已使用</view>
  </view>
  <view class="noneCoupon" wx:if="{{!list}}">
    <image src="https://rr.amigoon.com/step_trade/wx_img/mall/orderNone.png"></image>
    <text>暫無優惠券</text>
  </view>
  <swiper current="{{currentTab}}" class="swiper-box" duration='300' style="height:{{winHeight - 31}}px" wx:else>
  <!-- 全部 -->
    <swiper-item>
    <view class="list" wx:for="{{list}}"  wx:key="unique">
      <view bindtap='couponList' data-couponid='{{item.coupon_id}}' data-userid='{{item.user_id}}'>
        <view class='coupon_icon'>
          <image src='/images/home.png'></image>
        </view>
        <view class='coupon_title'>
          <view class='title_1'><text>{{item.company}}</text></view>
          <view class='title_2'><text class='title_text'>￥13滿兩件即減</text></view>
        </view>
        <view class='coupon_status'>
          <text class='title'>有效期：2019-01-20 11:21:21 到 2019-03-30 12:11:10</text>
          <button class='button'>已使用</button>
        </view>
        </view>  
      </view>
    </swiper-item>
    <!-- 未使用 -->
    <swiper-item>
    <view class="list" wx:for="{{notUse}}"  wx:key="unique">
      <view bindtap='couponList' data-couponid='{{item.coupon_id}}' data-userid='{{item.user_id}}'>
        <view class='coupon_icon'>
          <image src='/images/home.png'></image>
        </view>
        <view class='coupon_title'>
          <view class='title_1'><text>{{item.company}}</text></view>
          <view class='title_2'><text class='title_text'>￥13滿兩件即減</text></view>
        </view>
        <view class='coupon_status'>
          <text class='title'>有效期：2019-01-20 11:21:21 到 2019-03-30 12:11:10</text>
          <button class='button'>已使用</button>
        </view>
        </view>  
      </view>
    </swiper-item>
    <!-- 已使用 -->
    <swiper-item>
    <view class="list" wx:for="{{used}}"  wx:key="unique">
      <view bindtap='couponList' data-couponid='{{item.coupon_id}}' data-userid='{{item.user_id}}'>
        <view class='coupon_icon'>
          <image src='/images/home.png'></image>
        </view>
        <view class='coupon_title'>
          <view class='title_1'><text>{{item.company}}</text></view>
          <view class='title_2'><text class='title_text'>￥13滿兩件即減</text></view>
        </view>
        <view class='coupon_status'>
          <text class='title'>有效期：2019-01-20 11:21:21 到 2019-03-30 12:11:10</text>
          <button class='button'>已使用</button>
        </view>
        </view>  
      </view>
    </swiper-item>
  </swiper>
</view>

wxss代碼：

.header {
    box-sizing: border-box;
    border-top: 1rpx solid #ececec;
    background: #fff;
    width: 100%;
    height: 82rpx;
    line-height: 82rpx;
    text-align: center;
    z-index: 1;
    position: fixed;
    top: 0rpx;
}
.header .item{
  height: 75rpx;
  width: 33.3%;
  display: inline-block;
  font-size: 32rpx;
  color: #cdcdcd;
}
.header .on{ 
  color: #00a0e8;  
  border-bottom: 5rpx solid #00a0e8;
}  
.swiper-box{ 
  display: block; 
  width: 100%; 
  overflow: hidden;
  margin-top: 11%; 
}

.list{
  width: 90%;
  margin-left: 4%;
  height: 200rpx;
  background: #fff;
  font-size: 24rpx;
  margin-top: 2%;
  margin-bottom: 2%;
  border-radius: 2%;
  box-sizing:border-box;
  padding-top: 2%;
}

JS代碼：

 /**
   * 頁面的初始數據
   */
  data: {
    list:[],
    openid:null,
    notUse: [],
    used: [],
    currentTab: 0,
    winWidth: 0,
    winHeight: 0
  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
    var _this = this
    /** 
     * 獲取系統信息 
     */
    wx.getSystemInfo({
      success: function (res) {
        _this.setData({
          winWidth: res.windowWidth,
          winHeight: res.windowHeight
        });
      }
    });
  },
 

tabChange:function(e){
    var _this = this
    console.log(e)
    console.log(_this.data.currentTab)
    if (_this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      _this.setData({
        currentTab: e.target.dataset.current
      })
    }
  },