小程序分类横向滚动+内容横向滚动

效果图：

wxml代码：

<view class="container" >
<!-- 优惠券列表的位置 -->
  <view class='header'>
    <scroll-view class='scroll_w' scroll-x scroll-left="{{scrollLeft}}">
      <block wx:for="{{topNavs}}" wx:key="{{this}}">
        <view class="item {{currentTab==index ? 'on' : ''}}" bindtap='topNavChange' data-current="{{index}}">{{item}}</view>
      </block>
  </scroll-view>
  </view>
  <swiper current="{{currentTab}}" bindchange="swiperChange" duration='300' class="swiper-box" style="height:{{winHeight - 31}}px" >
  <!-- 全部 -->
  <block wx:for="{{topNavs}}" wx:key="{{this}}">
     <swiper-item>
      <scroll-view scroll-y style="height:{{winHeight - 31}}px">
        <block wx:for="{{list}}"  wx:key="unique">
        <view class="list" >
          <view  wx:if="{{item.type == 1}}">
            <view class='coupon_icon' ><text >￥5元</text></view>
            <view class='coupon_title'><view class='title'><text>红包奖励</text></view></view>
            <view class='coupon_status'>
              <text class='title'>有效期：2019-01-09</text>
              <button class='button' bindtap='exchange' data-couponid='{{item.coupon_id}}' data-userid='{{item.user_id}}' data-item='{{item}}'>
                兑换
              </button>
            </view>
          </view>
          <view wx:else>
            <view class='coupon_icon' style='width:{{winWidth*0.2}}rpx;height:{{winWidth*0.2}}rpx'>
              <image src='/images/home.png' style='width:{{winWidth*0.2}}rpx;height:{{winWidth*0.2}}rpx' ></image>
            </view>
            <view class='coupon_title'>
              <view class='title_1'><text>{{item.company_name}}{{item.price}}元折扣券</text></view>
              <view class='title_2'><text class='title_text'>满{{item.condition}}元使用</text></view>
            </view>
            <view class='coupon_status'>
              <text class='title'>有效期：{{item.end_time}}</text>
              <view class='button' bindtap='use' data-couponid='{{item.coupon_id}}' data-userid='{{item.user_id}}' data-id='{{item.id}}' data-company_id='{{item.company_id}}'>
                <button >使用</button>
              </view>
            </view>
          </view>
          </view>
        </block>
      </scroll-view>
    </swiper-item>
  </block>
    </swiper>
</view>

css代码：

.container{
  padding: 0;
  font-family: "黑体";
  background: #f8f8f8;
  min-height: 100%;
}
page{
  font-size: 20rpx;
}

/* 主体 */
/* 分类栏 */
.header {
    box-sizing: border-box;
    border-top: 1rpx solid #ececec;
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    z-index: 1;
    position: fixed;
    top: 0rpx;
}
.scroll_w{
  width: 100%;
  height: 100rpx;
  white-space: nowrap;
}
.header .item{
  height: 75rpx;
  width: 170rpx;
  display: inline-block;
  font-size: 34rpx;
  color: #FFFFFF;
  line-height: 75rpx;
  background: #fb5858;
  border-radius: 80rpx;
  margin: 10rpx;
}
.header .on{ 
  color: #FFFFFF;  
  background: linear-gradient(to right, #6E7AEA, #A25EF1);
}   
.swiper-box{ 
  display: block; 
  width: 100%; 
  overflow: hidden;
  margin-top: 11%; 
}
.noneCoupon{
  padding: 36%;
  font-size: 30rpx;
  padding-bottom:100%;
}
.noneCoupon image{
  width: 228rpx;
  height: 228rpx;
  position: relative;
  left: -13%;
}
/* 优惠券 */
.list{
  width: 90%;
  margin-left: 4%;
  height: 200rpx;
  background: #fff;
  font-size: 20rpx;
  margin-top: 2%;
  margin-bottom: 2%;
  border-radius: 2%;
  box-sizing:border-box;
  padding-top: 2%;
}

.swiper-box image{
  width: 150rpx;
  height: 120rpx;
}
.coupon_icon,.coupon_title,.coupon_status{
  float: left;
}
.coupon_icon{
  position: relative;
  left: 1%;
  top: 4%;
  width: 150rpx;
  height: 120rpx;
  line-height: 120rpx;
  text-align: center;
}
.coupon_icon text{
  font-weight: bold;
  font-size: 60rpx;
}
.coupon_title{
  position: relative;
  top: 10%;
  left: 3%;
  width: 70%;
  font-size: 30rpx;
}
.coupon_title .title{
  margin-top: 5%;
}
.coupon_title .title_2{
  color:#d81e06;

}
.coupon_status{
  position: relative;
  margin-left: 2%;
  width: 100%;
  line-height: 50rpx;
  top:30rpx;
}
.coupon_status .title,.coupon_status .button{
  float: left;
}
.coupon_status .title{
  font-size: 20rpx;
  color:#666666;
}
.coupon_status .button{
  width: 150rpx;
  height: 52rpx;
  line-height: 52rpx;
  position:absolute;
  right:7%;
  border:1rpx solid #fb5858;
  border-radius:80rpx;
}
.button button{
  width:130rpx;
  height: 50rpx;
  line-height: 50rpx;
  background:#FFFFFF;
  color:#fb5858;
  font-size: 26rpx;
  border-radius:80rpx;
}
.button button::after{
  border: none;

}

 js代码：

//index.js
//获取应用实例
const app = getApp()
Page({
  data: {
    topNavs: ['全部', '红包', '折扣券', '实物奖励', '0000', '1234', '0123', '2345', '11111', '22222', '3333', '4444', '5555', '6666'],
     /**
     * 当前激活的当航索引
     */
    currentTab: 0,
    /**
     * 上一个激活的当航索引
     */
    prevIndex: -1,
    /**
     * scroll-view 横向滚动条位置
     */
    scrollLeft: 0,
    list:[]
  },
  onLoad: function (options) {
    var _this = this
    _this.setData({
      winWidth: app.globalData.winWidth,
      winHeight: app.globalData.winHeight
    })
    //如果存在参数则请求接口
    wx.getSetting({
      success: function (setting) {
        if (setting.authSetting['scope.userInfo']) {
          if (!app.globalData.openid && !app.globalData.sessionId ){
            // session_key 已经失效，需要重新执行登录流程
            wx.redirectTo({
              url: '/pages/login/login'
            })
          }else{
            wx.showLoading({
              title: '加载中',
              mask:true,
              success:function(){
                _this.getCouponList()
              }
            })
            setTimeout(function () {
              wx.hideLoading()
            }, 500)
            
          }
        }
      }
    });

  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作  
   * 下拉刷新
  */
  onPullDownRefresh: function () {
    this.data.page = 1
    this.getCouponList('正在刷新数据')
  },
  /**
    * 页面上拉触底事件的处理函数
    */
  onReachBottom: function () {
    var _this = this
    if (_this.data.hasMoreData) {
      _this.setData({
        page:_this.data.page+1
      })
      _this.getCouponList('加载更多数据')
    } else {
      wx.showToast({
        title: '没有更多数据',
      })
    }
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: 'fsfkjsk',
      desc: '自定义分享描述',
      path: '/pages/index/index?id=123'
    }
  },
  
   /**
   * 顶部导航改变事件，即被点击了
   * 1、如果2次点击同一个当航，则不做处理
   * 2、需要记录本次点击和上次点击的位置
   */
  topNavChange: function(e) {
    var _this = this,nextActiveIndex = e.currentTarget.dataset.current,
      currentIndex = _this.data.currentTab;
      console.log(currentIndex)
    if (currentIndex != nextActiveIndex) {
      _this.setData({
        currentTab: nextActiveIndex,
        prevIndex: currentIndex
      });
    }
  },
    /**
   * swiper滑动时触发
   * 1、prevIndex != currentIndex 表示的是用手滑动 swiper组件
   * 2、prevIndex = currentIndex  表示的是通过点击顶部的导航触发的
   */
  swiperChange: function(e) {
    var prevIndex = this.data.currentTab,
      currentIndex = e.detail.current;
    this.setData({
      currentTab: currentIndex
    });
    if (prevIndex != currentIndex) {
      this.setData({
        prevIndex: prevIndex
      });
    }
    this.scrollTopNav();
  },
    /**
   * 滚动顶部的导航栏
   * 1、这个地方是大致估算的
   */
  scrollTopNav: function() {
    var _this =this
    // 当激活的当航小于4个时，不滚动
    if (_this.data.currentTab <= 3 && _this.data.scrollLeft >= 0) {
      _this.setData({
        scrollLeft: 0
      });
    } else {
      //当超过4个时，需要判断是向左还是向右滚动，然后做相应的处理
      var currentTab = _this.data.currentTab > _this.data.prevIndex ? _this.data.currentTab-_this.data.prevIndex : _this.data.prevIndex-_this.data.currentTab
      var plus = (_this.data.currentTab > _this.data.prevIndex ? 70 : -70)* currentTab;
      console.log(currentTab)
      console.log( _this.data.scrollLeft)
      _this.setData({
        scrollLeft: _this.data.scrollLeft + plus
      });
    }
    console.info(_this.data.currentTab, _this.data.prevIndex, _this.data.scrollLeft);
  }

})