微信小程序tab切换，滑动点击切换后获取到内容怎么上拉加载更多下拉刷新呢？

[it0_soft]

我利用swiper做的tab滑动切换和点击切换，都可以获取到不同的内容，现在我想切换不同的内容不要全部显示，只显示一部分，然后通过上拉加载更多，下拉刷新，我试了下载切换的时候把其他栏目内容也给你追加进去了，点击或者滑动到不同栏目加载、刷新对应栏目的内容，这个该怎么弄呢，我上代码：

<view class='swiper-tab'>
  <view class="weui-navbar" style="position:fixed;background:#fff">
    <block wx:for="{{tabName}}">
      <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' style='height:{{winHeight}}rpx' bindchange='swiperTab'>
  <swiper-item wx:for="{{tabName}}">
    <scroll-view scroll-y="true" class="scoll-h">
      <navigator data-id="{{item.id}}" 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>
    </scroll-view>
  </swiper-item>

</swiper>

<view class="weui-loadmore" hidden="{{!hasMoreData}}">
    <view class="weui-loading"></view>
    <view class="weui-loadmore__tips">正在加载</view>
  </view>
  <view class='data-bottom' hidden='{{!bottomTitle}}'>{{title}}</view>

后端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: [],
    hasMoreData: true,
    bottomTitle: false
  },
  //滑动切换
  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

    //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,
            hasMoreData: true
          })
        }
      }
    })
  },
  //点击切换
  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,
              hasMoreData: true
            })
          }
        }
      })
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var that = this
    //高度自适应
    wx.getSystemInfo({
      success: function(res) {
        var clientHeight = res.windowHeight,
          clientWidth = res.windowWidth,
          rpxR = 750 / clientWidth;
        var calc = clientHeight * rpxR + 80;
        that.setData({
          winHeight: calc
        })
      },
    })
    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,
            hasMoreData: true
          })
        } else {
          wx.showToast({
            title: res.data.error,
            duration: 2000
          })
        }
        that.setData({
          currentTab: 0
        })
      },
      fail: function() {
        wx.showToast({
          title: '网络异常',
          duration: 2000
        })
      }
    })
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

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

这里是最终的渲染效果：

我是后端程序兼前端的，没事自己练练手，可是实在搞不懂了，哪位帮忙看看，在此感激不尽！

[it0_soft]

因为我的tabName是通过onLoad的api获取，typeList是通过cat_id分类id获取到的，那我是不是也得在程序段做好接口呢

[it0_soft]

引用 1 楼 qq_41114603 的回复:

其实这种情况的数据应该处理成这样

data: {
    data: {
    tabName: [{
                          id:3,
                          type:'中医药膳'，
                          typeList: [],
                     },{
                          id:4,
                          type:' '中医方剂'，
                          typeList: [],
                     },{
                          id:7,
                          type:'中医养生'，
                          typeList: [],
                     },{
                          id:8,
                          type:'中医常识'，
                          typeList: [],
                     }],
    currentTab: 0,
    hasMoreData: true,
    bottomTitle: false
  },

这样的话每个swiper-item里面的内容才会不一样； 如果安装你上面的那样渲染的话，会变成所有swiper-item里面的内容都是一样的；虽然每次切换会变，但是是一起变，随意在切换的过程中所看到的两个分类的内容是一样的； WXML里面的循环typeList改成item.typeList；每次请求得到的数据添加到对应的this.data.tabName[this.data.currentTab].typeList里面就可以了

<navigator data-id="{{item.id}}" url='../info/info?id={{data.id}}' wx:for="{{item.typeList}}" wx:for-item="data">

因为我的tabName是通过onLoad的api获取，typeList是通过cat_id分类id获取到的列表，那我是不是也得在程序段做好接口呢

[風灬雲]

引用 3 楼 it0_soft 的回复:

[quote=引用 1 楼 qq_41114603 的回复:]
其实这种情况的数据应该处理成这样

data: {
    data: {
    tabName: [{
                          id:3,
                          type:'中医药膳'，
                          typeList: [],
                     },{
                          id:4,
                          type:' '中医方剂'，
                          typeList: [],
                     },{
                          id:7,
                          type:'中医养生'，
                          typeList: [],
                     },{
                          id:8,
                          type:'中医常识'，
                          typeList: [],
                     }],
    currentTab: 0,
    hasMoreData: true,
    bottomTitle: false
  },

这样的话每个swiper-item里面的内容才会不一样；
如果安装你上面的那样渲染的话，会变成所有swiper-item里面的内容都是一样的；虽然每次切换会变，但是是一起变，随意在切换的过程中所看到的两个分类的内容是一样的；
WXML里面的循环typeList改成item.typeList；每次请求得到的数据添加到对应的this.data.tabName[this.data.currentTab].typeList里面就可以了

<navigator data-id="{{item.id}}" url='../info/info?id={{data.id}}' wx:for="{{item.typeList}}" wx:for-item="data">

因为我的tabName是通过onLoad的api获取，typeList是通过cat_id分类id获取到的列表，那我是不是也得在程序段做好接口呢[/quote]
这个不冲突啊，页面加载的时候获取tabName，处理得到的数据变成下面这种格式；

                     [{
                          id:3,
                          type:'中医药膳'，
                          typeList: [],
                          page:0      //标识当前分类下拉的次数
                     },{
                          id:4,
                          type:' '中医方剂'，
                          typeList: [],
                          page:0
                     },{
                          id:7,
                          type:'中医养生'，
                          typeList: [],
                          page:0
                     },{
                          id:8,
                          type:'中医常识'，
                          typeList: [],
                          page:0
                     }],

然后再去获取列表数据；根据currentTab获取当前分类的id,加载更多的话应该每一个分类还需要一个标识当前页数的字段page，其实和做列表分页差不多；
看你上面的代码，如果可以的话，最好api接口要改一下；
第一个接口是获取所有分类
直接返回上面说的tabName的格式最好，不行的话还是得自己处理；
第二个接口就是获取分页数据的，也就是上拉或者下拉刷新的时候需要加载的数据
前端传 分类id 当前分类加载的页码page 也就是下拉刷新的次数 还有 每一次刷新的条数 size size可以设置默认不用传也可以

[風灬雲]

你上面的代码也是这样设计的啊，那就可以了，这样的话 切换的时候其实只要判断一下当前页面有没有数据就可以了；
如果是第一次进入到这个分类就获取一次数据；如果不是第一次进入就不用管了，只需要修改currentTab的值；然后在上拉的时候再去请求数据合并到原来的typeList里面

[風灬雲]

其实这种情况的数据应该处理成这样

data: {
    data: {
    tabName: [{
                          id:3,
                          type:'中医药膳'，
                          typeList: [],
                     },{
                          id:4,
                          type:' '中医方剂'，
                          typeList: [],
                     },{
                          id:7,
                          type:'中医养生'，
                          typeList: [],
                     },{
                          id:8,
                          type:'中医常识'，
                          typeList: [],
                     }],
    currentTab: 0,
    hasMoreData: true,
    bottomTitle: false
  },

这样的话每个swiper-item里面的内容才会不一样；
如果安装你上面的那样渲染的话，会变成所有swiper-item里面的内容都是一样的；虽然每次切换会变，但是是一起变，随意在切换的过程中所看到的两个分类的内容是一样的；
WXML里面的循环typeList改成item.typeList；每次请求得到的数据添加到对应的this.data.tabName[this.data.currentTab].typeList里面就可以了

<navigator data-id="{{item.id}}" url='../info/info?id={{data.id}}' wx:for="{{item.typeList}}" wx:for-item="data">

[it0_soft]

引用 5 楼 qq_41114603 的回复:

你上面的代码也是这样设计的啊，那就可以了，这样的话 切换的时候其实只要判断一下当前页面有没有数据就可以了； 如果是第一次进入到这个分类就获取一次数据；如果不是第一次进入就不用管了，只需要修改currentTab的值；然后在上拉的时候再去请求数据合并到原来的typeList里面

我改了一下渲染方法，一次取出所有分类下面的内容，但是现在我搞不清怎么去实现追加了，我先给你看下我最近的代码：

<swiper current='{{currentTab}}' duration='300' style='height:{{winHeight}}rpx' bindchange='swiperTab'>
  <swiper-item wx:for="{{tabName}}">
    <scroll-view scroll-y="true" class="scoll-h">
      <navigator data-id="{{item.id}}" url='../info/info?id={{data.id}}' wx:for="{{item.child}}" 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>
    </scroll-view>
  </swiper-item>

</swiper>

<view class="weui-loadmore" hidden="{{!hasMoreData}}">
    <view class="weui-loading"></view>
    <view class="weui-loadmore__tips">正在加载</view>
  </view>
  <view class='data-bottom' hidden='{{!bottomTitle}}'>{{title}}</view>

js代码：

 var app = getApp();
var url = app.d.ceshiUrl + 'category';
var page = 1;
var page_size = 6;
//上拉加载
var getData = function(that) {
  wx.request({
    url: url,
    method: 'post',
    data: {
      page: 1,
      page_size: 6
    },
    header: {
      "Content-Type": 'application/json'
    },
    success: function(res) {
      if (res.data.status === 0) {
        wx.showToast({
          title: '没有更多数据了',
          icon: 'success'
        });
        that.setData({
          hasMoreData: false
        });
      } else {
        console.log('下拉滑到这了');
        that.setData({
          tabName: that.data.tabName.concat(res.data.list[that.data.currentTab].child),
          hasMoreData: true
        });
      }
    },
    fail: function() {
      wx.showToast({
        title: '网络错误',
        duration: 2000
      })
    },
    complete: function() {
      setTimeout(function() {
        //隐藏导航栏加载
        wx.hideNavigationBarLoading();
        //停止下拉动作
        wx.stopPullDownRefresh();
      }, 1500);
    }
  })
}
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tabName: [],
    currentTab: 0,
    typeList: [],
    hasMoreData: true,
    bottomTitle: false
  },
  //滑动切换
  swiperTab: function(e) {
    var current = e.detail.current
    this.setData({
      currentTab: e.detail.current
    })
  },
  //点击切换
  clickTab: function(e) {
    var that = this;
    //console.log(e)
    var currentTab = e.target.dataset.current;
    if (that.data.current === currentTab) {
      return false;
    } else {
      that.setData({
        currentTab: currentTab
      })
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var that = this
    //高度自适应
    wx.getSystemInfo({
      success: function(res) {
        var clientHeight = res.windowHeight,
          clientWidth = res.windowWidth,
          rpxR = 750 / clientWidth;
        var calc = clientHeight * rpxR + 80;
        that.setData({
          winHeight: calc
        })
      },
    })
    wx.request({
      url: url,
      method: 'post',
      data: {
        page: page,
        page_size: page_size
      },
      header: {
        "Content-Type": "application/json"
      },
      success: function(res) {
        console.log(res.data.list[that.data.currentTab].child)
        //console.log(that.data.currentTab)
        if (res.data.status === 1) {
          that.setData({
            tabName: res.data.list
          })
        } else {
          wx.showToast({
            title: res.data.error,
            duration: 2000
          })
          that.setData({
            hasMoreData: false
          })
        }
        that.setData({
          currentTab: 0
        })
      },
      fail: function() {
        wx.showToast({
          title: '网络异常',
          duration: 2000
        })
      }
    })
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {
    var that = this
    ++page
    if (that.data.hasMoreData) {
      //wx.showLoading({
      //title: '拼命加载中...',
      //})
      setTimeout(function () {
        getData(that);
        wx.hideLoading()
      }, 1000)
    } else {
      //wx.showToast({
      //title: '我是有底线的',
      //icon: 'none'
      //})
      that.setData({
        bottomTitle: true,
        title: '-- 我是有底线的 --'
      })
    }
  },
})

数据结构如下：

[風灬雲]

var getData = function(opt,callback) {
  wx.request({//这个接口只要返回对应分类、对应页码的数据List数据
    url: url,
    method: 'post',
    data: {
      id:opt.id,//获取哪个分类的数据
      page: opt.page,//获取该分类的第几页数据
      page_size: 6
    },
    header: {
      "Content-Type": 'application/json'
    },
    success: function(res) {
      //这里只要把获取到的数组传到callback里面就可以了，不用加一个字段标识有没有数据；
       if(typeOf callback === "function"){
           callback(res.data)
       }
    },
    fail: function() {
      wx.showToast({
        title: '网络错误',
        duration: 2000
      })
    },
    complete: function() {
      setTimeout(function() {
        //隐藏导航栏加载
        wx.hideNavigationBarLoading();
        //停止下拉动作
        wx.stopPullDownRefresh();
      }, 1500);
    }
  })
}

页面加载事件中其实可以不用全部加载进来，就加载默认显示的首屏数据就可以了，比如

wx.request({
      url: url,
      method: 'post',
      data: {
        page: page,
        page_size: page_size
      },
      header: {
        "Content-Type": "application/json"
      },
      success: function(res) {
        
        //console.log(that.data.currentTab)
        if (res.data.status === 1) {
          res.data.list.forEach(e=>{
              e.page=0;//初始页码都为0；
          })
          that.setData({
            tabName: res.data.list//这里只需要返回所有的分类信息，不需要带上child里的数据；每个分类的child赋值为[]空数组就可以了
          },()=>{//利用回调函数去获取默认显示分类的第一页数据，这里就把下拉刷新事件的代码放过来就可以了，
               
           })
           
        } else {
          wx.showToast({
            title: res.data.error,
            duration: 2000
          })
          that.setData({
            hasMoreData: false
          })
        }
        that.setData({
          currentTab: 0
        })
      },
      fail: function() {
        wx.showToast({
          title: '网络异常',
          duration: 2000
        })
      }
    })

你这里既然要给每一个分类加一个标识hasMoreData有没有更多数据的标识，那么就不能只给一个值，必须每一个分类要有一个这样的标识；
不然的话，一个分类已经到底了，切换到其他分类的时候也会显示到底了

/**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {
    if (!this.data.tabName[this.data.currentTab].NoMoreData) {//标识当前分类是否还有更多数据，初始值为undefined；
       this.data.tabName[this.data.currentTab].page++  
      getData({
            id:this.data.tabName[this.data.currentTab].id,
            page:this.data.tabName[this.data.currentTab].page
            },(res)=>{
                 if(res.length){//传回来的数据不是空的数组
                      let str="tabName["+this.data.currentTab+"].child";//将结果合并到当前分类
                        this.setData({
                            [str]:this.data.tabName[this.data.currentTab].child.cancat(res)
                      })
                 }else{//传回来的数据是空的数组,表示后面已经没有数据了
                      let str="tabName["+this.data.currentTab+"].NoMoreData"；//修改当前分类的NoMoreData标记为true
                      this.setData({
                            [str]:true
                      })
                 }
             });
      
    } else {
      //wx.showToast({
      //title: '我是有底线的',
      //icon: 'none'
      //})
      that.setData({
        bottomTitle: true,
        title: '-- 我是有底线的 --'
      })
    }
  },

这样的话在切换的时候判断一下当前分类的page是否为0，如果是0，就获取第一页的数据；否则就不用管了

[it0_soft]

能加你QQ吗，详细了解一下，可以吗？

[it0_soft]

这里有几行代码不是太懂，

res.data.list.forEach(e=>{
              e.page=0;//初始页码都为0；
          })
          that.setData({
            tabName: res.data.list//这里只需要返回所有的分类信息，不需要带上child里的数据；每个分类的child赋值为[]空数组就可以了
          },()=>{//利用回调函数去获取默认显示分类的第一页数据，这里就把下拉刷新事件的代码放过来就可以了，
                
           })

请求url是只请求一次吗，先返回所有分类信息，默认child里的数据为空数组，然后再获取默认分类的第一页数据，但是我在点击或者切换的时候是没有分类id传过去的，这还能切换吗？

[liuxmoo]

切换不卡么？

[weixin_44516385]

有css样式吗