小程序滑动选项卡

wxml
<!-- 选项卡 -->
  <view>
    <scroll-view scroll-x="true" class="nav" scroll-left="{{scrollLeft}}" scroll-with-animation="{{true}}">
      <block wx:for="{{navDataArr}}">
        <view class="nav-item {{currentTab == index ?'active1':''}}" data-current="{{index}}" data-id="{{item.id}}" bindtap="switchNav">{{item.name}}</view>
      </block>
    </scroll-view>
    <swiper class="tab-box" current="{{currentTab}}" duration="300" style='height:{{height}}rpx;' bindchange="switchTab">
      <!-- 精品论坛 -->
      <swiper-item>
        <view class="products-box">
          <block wx:for="{{jpData}}" wx:key='item'>
            <view class='products-item' style='overflow:hidden;' data-key='{{index}}' data-id="{{item.id}}">
              <view bindtap="toDetail" data-id="{{item.id}}">
                <view class='title'>
                  {{item.title}}
                </view>
                <view class='content'>
                  {{item.content}}
                </view>
                <view class='imgs'>
                  <view wx:if='{{item.images.length==1}}'>
                    <block wx:for="{{item.images}}" wx:key='item'>
                      <image class='one' style='width:694rpx;height:504rpx;display:block;margin:auto;' src='{{item}}'></image>
                    </block>
                  </view>
                  <view wx:else>
                    <block wx:for="{{item.images}}" wx:key='item'>
                      <image src='{{item}}'></image>
                    </block>
                  </view>
                </view>
              </view>
              <view class='boxs'>
                <view class='v1' bindtap="toDetail" data-id="{{item.id}}">
                  <image src='../../imgs/huifu.png'></image>
                  <text>{{item.evaluate_count}}</text>
                </view>
                <view class='v2' bindtap='collect' data-key="{{index}}" data-id="{{item.id}}">
                  <image src='../../imgs/collect.png'></image>
                  <text>{{item.collect_count}}</text>
                </view>
                <view class='v3' bindtap='zan' data-key='{{index}}' data-id="{{item.id}}">
                  <image src='{{zan}}'></image>
                  <text>{{item.like_count}}</text>
                </view>
                <view class='v4' wx:if='{{item.is_jp==1}}'>精</view>
                <view class='v6'>{{item.create_time}}</view>
                <view class='v5'>{{item.user.nickname}} </view>
              </view>
            </view>
          </block>
        </view>
      </swiper-item>
      <!--热门咨询  -->
      <swiper-item>
        <view class="products-box">
          <block wx:for="{{otherData}}" wx:key='item'>
            <view class='products-item' style='overflow:hidden;' data-id="{{item.id}}">
              <view bindtap="toDetail" data-id="{{item.id}}">
                <view class='title'>
                  {{item.title}}
                </view>
                <view class='content'>
                  {{item.content}}
                </view>
                <view class='imgs'>
                  <view wx:if='{{item.images.length==1}}'>
                    <block wx:for="{{item.images}}" wx:key='item'>
                      <image class='one' style='width:694rpx;height:504rpx;display:block;margin:auto;' src='{{item}}'></image>
                    </block>
                  </view>
                  <view wx:else>
                    <block wx:for="{{item.images}}" wx:key='item'>
                      <image src='{{item}}'></image>
                    </block>
                  </view>
                </view>
              </view>
              <view class='boxs'>
                <view class='v1' bindtap="toDetail" data-id="{{item.id}}">
                  <image src='../../imgs/huifu.png'></image>
                  <text>{{item.evaluate_count}}</text>
                </view>
                <view class='v2' bindtap='collect' data-key='{{index}}' data-id="{{item.id}}">
                  <image src='../../imgs/collect.png'></image>
                  <text>{{item.collect_count}}</text>
                </view>
                <view class='v3' bindtap='zan' data-key='{{index}}' data-id="{{item.id}}">
                  <image src='{{zan}}'></image>
                  <text>{{item.like_count}}</text>
                </view>
                <view class='v4' wx:if='{{item.is_jp==1}}'>精</view>
                <view class='v6'>{{item.create_time}}</view>
                <view class='v5'>{{item.user.nickname}} </view>
              </view>
            </view>
          </block>
        </view>
      </swiper-item>
      <!-- 维修保养 -->
      <swiper-item>
        <view class="products-box">
          <block wx:for="{{otherData}}" wx:key='item'>
            <view class='products-item' style='overflow:hidden;' data-id="{{item.id}}">
              <view bindtap="toDetail" data-id="{{item.id}}">
                <view class='title'>
                  {{item.title}}
                </view>
                <view class='content'>
                  {{item.content}}
                </view>
                <view class='imgs'>
                  <view wx:if='{{item.images.length==1}}'>
                    <block wx:for="{{item.images}}" wx:key='item'>
                      <image class='one' style='width:694rpx;height:504rpx;display:block;margin:auto;' src='{{item}}'></image>
                    </block>
                  </view>
                  <view wx:else>
                    <block wx:for="{{item.images}}" wx:key='item'>
                      <image src='{{item}}'></image>
                    </block>
                  </view>
                </view>
              </view>

              <view class='boxs'>
                <view class='v1' bindtap="toDetail" data-id="{{item.id}}">
                  <image src='../../imgs/huifu.png'></image>
                  <text>{{item.evaluate_count}}</text>
                </view>
                <view class='v2' bindtap='collect' data-key='{{index}}' data-id="{{item.id}}">
                  <image src='../../imgs/collect.png'></image>
                  <text>{{item.collect_count}}</text>
                </view>
                <view class='v3' bindtap='zan' data-key='{{index}}' data-id="{{item.id}}">
                  <image src='{{zan}}'></image>
                  <text>{{item.like_count}}</text>
                </view>
                <view class='v4' wx:if='{{item.is_jp==1}}'>精</view>
                <view class='v6'>{{item.create_time}}</view>
                <view class='v5'>{{item.user.nickname}} </view>
              </view>
            </view>
          </block>
        </view>
      </swiper-item>
      <!-- 专题活动 -->
      <swiper-item>
        <view class="products-box">
          <block wx:for="{{otherData}}" wx:key='item'>
            <view class='products-item' style='overflow:hidden;' data-id="{{item.id}}">
              <view bindtap="toDetail" data-id="{{item.id}}">

                <view class='title'>
                  {{item.title}}
                </view>
                <view class='content'>
                  {{item.content}}
                </view>
                <view class='imgs'>
                  <view wx:if='{{item.images.length==1}}'>
                    <block wx:for="{{item.images}}" wx:key='item'>
                      <image class='one' style='width:694rpx;height:504rpx;display:block;margin:auto;' src='{{item}}'></image>
                    </block>
                  </view>
                  <view wx:else>
                    <block wx:for="{{item.images}}" wx:key='item'>
                      <image src='{{item}}'></image>
                    </block>
                  </view>
                </view>
              </view>
              <view class='boxs'>
                <view class='v1' bindtap="toDetail" data-id="{{item.id}}">
                  <image src='../../imgs/huifu.png'></image>
                  <text>{{item.evaluate_count}}</text>
                </view>
                <view class='v2' bindtap='collect' data-key='{{index}}' data-id="{{item.id}}">
                  <image src='../../imgs/collect.png'></image>
                  <text>{{item.collect_count}}</text>
                </view>
                <view class='v3' bindtap='zan' data-key='{{index}}' data-id="{{item.id}}">
                  <image src='{{zan}}'></image>
                  <text>{{item.like_count}}</text>
                </view>
                <view class='v4' wx:if='{{item.is_jp==1}}'>精</view>
                <view class='v6'>{{item.create_time}}</view>
                <view class='v5'>{{item.user.nickname}} </view>
              </view>
            </view>
          </block>
        </view>
      </swiper-item>
      <!-- 其他 -->
      <swiper-item>
        <view class="products-box">
          <block wx:for="{{otherData}}" wx:key='item'>
            <view class='products-item' style='overflow:hidden;' data-id="{{item.id}}">
              <view bindtap="toDetail" data-id="{{item.id}}">
                <view class='title'>
                  {{item.title}}
                </view>
                <view class='content'>
                  {{item.content}}
                </view>
                <view class='imgs'>
                  <view wx:if='{{item.images.length==1}}'>
                    <block wx:for="{{item.images}}" wx:key='item'>
                      <image class='one' style='width:694rpx;height:504rpx;display:block;margin:auto;' src='{{item}}'></image>
                    </block>
                  </view>
                  <view wx:else>
                    <block wx:for="{{item.images}}" wx:key='item'>
                      <image src='{{item}}'></image>
                    </block>
                  </view>
                </view>
              </view>
              <view class='boxs'>
                <view class='v1' bindtap="toDetail" data-id="{{item.id}}">
                  <image src='../../imgs/huifu.png'></image>
                  <text>{{item.evaluate_count}}</text>
                </view>
                <view class='v2' bindtap='collect' data-key='{{index}}' data-id="{{item.id}}">
                  <image src='../../imgs/collect.png'></image>
                  <text>{{item.collect_count}}</text>
                </view>
                <view class='v3' bindtap='zan' data-key='{{index}}' data-id="{{item.id}}">
                  <image src='{{zan}}'></image>
                  <text>{{item.like_count}}</text>
                </view>
                <view class='v4' wx:if='{{item.is_jp==1}}'>精</view>
                <view class='v6'>{{item.create_time}}</view>
                <view class='v5'>{{item.user.nickname}} </view>
              </view>
            </view>
          </block>
        </view>
      </swiper-item>
      <!-- ceshi -->
      <!-- <swiper-item>
        <template is="products" data="{{productsArr:otherData}}"></template>
      </swiper-item> -->
      <!-- ceshi -->
    </swiper>
  </view>
  <!-- 选项卡结束 -->

js页面
// pages/home/home.js
import {
  Home
} from 'home-model.js';
var home = new Home(); //实例化 首页 对象
const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {

    currentSwiper: 0,
    autoplay: 'true',
    // 选项卡开始
    // navData: [],
    currentTab: 0,
    // navScrollLeft: 0,
    // lengthList: [], //所有的list列表
    zan: 'https://miniprogram02.honda-dreamwing.com.cn/img/zan.png',
    zanS: 'https://miniprogram02.honda-dreamwing.com.cn/img/zanS.png',
    height: 0,
    scrollLeft: 0
    // zanS:0//0未点赞 1已经点赞
    //选项卡结束
    // itemHeight: 10,
    // status:0//非车主为0 车主为1
    // nickname: '',
  },
  //轮播图切换指点样式
  swiperChange: function(e) {
    this.setData({
      currentSwiper: e.detail.current
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var that = this;
    //获取论坛分类
    home.getFenLei((data) => {
      data.push({
        id: 555,
        name: '精品论坛'
      })
      that.setData({
        navDataArr: data.reverse()
      });
    });
    //获取精品论坛
    home.getJingpin((data) => {
      that.setData({
        jpData: data,
        height: data.length * 900
      });
    });
  },

  //点击模块标题时，例论坛，咨询。。。
  switchNav(event) {
    var that = this
    that.checkCor();
    var cur = event.currentTarget.dataset.current;
    var id = event.currentTarget.dataset.id //当前点击的id 

    //每个tab选项宽度占1/5
    var singleNavWidth = that.data.windowWidth / 5;
                         
    that.setData({
      category_id: id
    })
    if (that.data.currentTab == cur) {
      return false;
    } else {
      that.setData({
        currentTab: cur
      })
    }
    //根据分类搜索帖子
    home.getDetailInfo(that.data.category_id, (data) => {
      if (that.data.category_id == 555) {
        that.setData({
          height: that.data.jpData.length * 900
        });
      } else {
        that.setData({
          otherData: data,
          height: data.length * 900
        })
      }
    })
  },
  //判断当前滚动超过一屏时，设置tab标题滚动条
  checkCor: function () {
    if (this.data.currentTab > 2) {
      this.setData({
        scrollLeft: 300
      })
    } else {
      this.setData({
        scrollLeft: 0
      })
    }
  },
  //滑动swiper模块时
  switchTab(event) {
    var that = this
    that.checkCor()
    var cur = event.detail.current;
    // console.log(cur)
    var singleNavWidth = that.data.windowWidth / 5;
    that.setData({
      currentTab: cur,
      // navScrollLeft: (cur - 2) * singleNavWidth,
      category_id: cur
    });
    //根据分类搜索帖子
    home.getDetailInfo(that.data.category_id, (data) => {
      if (that.data.category_id == 555) {
        that.setData({
          height: that.data.jpData.length * 900
        });
      } else {
        that.setData({
          otherData: data
        })
        that.setData({
          height: data.length * 900
        })
      }
    })
  },
  // 收藏
  collect: function(e) {
    var that = this
    var id = e.currentTarget.dataset.id //当前点击的id 
    that.setData({
      id: id
    })
    var index = e.currentTarget.dataset.key;
    home.getCollect(that.data.id, (data) => {
      if (data.code == 201) {
        //精品点赞数量+1
        that.data.jpData[index].collect_count = that.data.jpData[index].collect_count + 1;
        that.setData({
          jpData: that.data.jpData
        });
        // 点赞数量+1结束
        //根据分类搜索帖子
        that.data.otherData[index].collect_count = that.data.otherData[index].collect_count + 1;
        that.setData({
          otherData: that.data.otherData
        });

      } else if (data.msg == "已经收藏") {
        app.showTips('提示', '不能重复收藏')

      }
    })
  },
  // 点赞
  zan: function(e) {
    var that = this
    var id = e.currentTarget.dataset.id //当前点击的id 
    that.setData({
      id: id
    })
    var index = e.currentTarget.dataset.key;
    home.getZan(that.data.id, (data) => {
      console.log(data)
      if (data.code == 201) {
        //根据分类搜索帖子
        //精品点赞数量+1
        that.data.jpData[index].like_count = that.data.jpData[index].like_count + 1;
        that.setData({
          jpData: that.data.jpData
        });
        // 点赞数量+1结束
        //其他帖子开始
        that.data.otherData[index].like_count = that.data.otherData[index].like_count + 1;
        that.setData({
          otherData: that.data.otherData
        });
        //其他帖子结束
      } else if (data.msg == "已经点赞") {
        app.showTips('提示', '不能重复点赞')
      }
    })
  },
  onShow: function() {
    var that = this
    // console.log(that.data.category_id)
    if (that.data.category_id) {
      //根据分类搜索帖子
      home.getDetailInfo(that.data.category_id, (data) => {
        that.setData({
          otherData: data,
          height: data.length * 900
        })
      })
    } else {
    
      //获取精品论坛
      home.getJingpin((data) => {
        console.log(data)
        that.setData({
          jpData: data,
          height: data.length * 900
        });
        console.log(that.data.height)
      });
    }
  
  },
})