php微信小程序实现tab切换

上次已经实现了小程序tab切换了，可是到后来想实现绑定数据切换，折腾了我两天，翻了好多资料，终于搞出来了，实在是太不容易了，可能是本人功夫不到家吧，哈哈，不多说了直接上代码，能看得懂的拿去用。

swiper做tab切换的时候current必须是容0.1.2.3开始，current默认是0，当初走了弯路，直接用分类的ID作为index的值。

上次没做滑动测试就直接放上去了，后来我又测试好久，这次把滑动tab获取分类id放上去

wxml前端代码：

<view class='swiper-tab'>
  <view class="weui-navbar" style="position:fixed;background:#fff">
    <block wx:for="{{tabName}}" wx:key="typeId">
      <view class="swiper-tab-item {{currentTab == index?'active':''}}" data-current="{{index}}" data-type-id="{{item.id}}" bindtap="clickTab">{{item.name}}</view>
    </block>
  </view>
</view>

<swiper current='{{currentTab}}' duration='300' bindchange='swiperTab'>
  <block wx:for="{{tabName}}">
    <swiper-item>
      <navigator url='../info/info?id={{data.id}}' wx:for="{{typeList}}" wx:for-item="data">
        <view class='newstype-item'>
          <image src='{{data.litpic}}' class='pic' mode='aspectFill'></image>
          <view class='newstype-item-right'>
            <text class='newstype-item-maintext'>{{data.title}}</text>
            <view class='newstype-item-bottom'>
              <text class='newstype-item-smalltext'>{{data.time}}</text>
              <view class='newstype-item-bottom-right'>
                <image src="/images/icon_look.png" style="width:34rpx;height:34rpx"></image>
                <view class='newstype-item-smalltext' style="margin-left:10rpx;  font-size: 20rpx; margin-bottom:1rpx">{{data.click}}</view>
              </view>
            </view>
          </view>
        </view>
      </navigator>
    </swiper-item>
  </block>

</swiper>

js后端代码：

var app = getApp();
var url = app.d.ceshiUrl + 'category';
var listUrl = app.d.ceshiUrl + 'catList';
var page = 1;
var page_size = 6;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    //tabName: ['中医药膳', '中医方剂', '中医养生', '中医常识'],
    currentTab: 0,
    typeList: []
  },
 //滑动切换
  swiperTab: function(e) {
    //console.log(e.detail.current)
    //console.log(this.data.tabName[e.detail.current].id)
    var that = this
    var current = e.detail.current
    var typeid = that.data.tabName[current].id  //获取当前分类id

    //console.log(typeid)
    this.setData({
      currentTab: e.detail.current
    })
    wx.request({
      url: listUrl,
      method: 'post',
      data: {
        cat_id: typeid,
        page: page,
        page_size: page_size
      },
      header: {
        "Content-Type": "application/json"
      },
      success: function (res) {
        //console.log(res);
        if (res.data.status === 1) {
          that.setData({
            typeList: res.data.list
          })
        }
      }
    })
  },
  //点击切换
  clickTab: function(e) {
    var that = this;
    console.log(e)
    const currentTab = e.target.dataset.current;
    const typeid = e.target.dataset.typeId;
    if (that.data.current === currentTab) {
      return false;
    } else {
      that.setData({
        currentTab: currentTab
      })
      console.log(currentTab);
      wx.request({
        url: listUrl,
        method: 'post',
        data: {
          cat_id: typeid,
          page: page,
          page_size: page_size
        },
        header: {
          "Content-Type": "application/json"
        },
        success: function(res) {
          console.log(res);
          if (res.data.status === 1) {
            that.setData({
              typeList: res.data.list
            })
          }
        }
      })
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var that = this
    wx.getSystemInfo({
      success: function(res) {
        that.setData({
          swiperHeight: res.windowHeight
        })
      },
    })
    wx.request({
      url: url,
      method: 'post',
      data: {
        page: page,
        page_size: page_size
      },
      header: {
        "Content-Type": "application/json"
      },
      success: function(res) {
        console.log(res)
        if (res.data.status === 1) {
          that.setData({
            tabName: res.data.category,
            typeList: res.data.list
          })
        } else {
          wx.showToast({
            title: res.data.error,
            duration: 2000
          })
        }
        that.setData({
          currentTab: 0
        })
      },
      fail: function() {
        wx.showToast({
          title: '网络异常',
          duration: 2000
        })
      }
    })
  },
})

wxss代码：

.swiper-tab {
  width: 100%;
  background-color: #fff;
  border-bottom: 2rpx solid #ccc;
  text-align: center;
  height: 80rpx;
  display: flex;
  flex-flow: row;
  justify-content: space-between;
}

.swiper-tab-item {
  width: 30%;
  color: #434343;
  line-height: 80rpx;
  font-size:28rpx;
}

.active {
  color: #f65959;
  border-bottom: 5rpx solid #f96060;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

swiper {
  background: #fff;
  height: 700px;
  padding: 10rpx 0rpx;
  margin-bottom: 20px;
}

内容里面的wxss代码请翻看我之前发布的tab切换博文，后端API我就不写了，转载请注明作者。