小程序之实现列表切换与滚动加载

先看效果图：

基于touchUI WX开发，片段来自码云 wallpaper 项目 

贴上代码：

<template>
<view class="collect">
  <view class="title-wire"></view>
  <!-- 横屏竖屏 -->
  <scroll-view class="recommend" scroll-y='true' style="height:{{height}}px" bindscrolltolower='lower'>
    <view style="height:50px"></view>
    <ui-fixed-view top="0" left="0" right="0">
      <view class="fixed-view-content">
        <view style="width:160px;margin:0 auto">
          <ui-tabs width="" 
            tab-style="{{tabStyle}}" 
            auto-width="{{false}}" 
            index="{{ current4 }}" 
            active-tab-style="{{activeTabStyle4}}" 
            bindchange="handleChange4"
            probe="1"
            class="index-recommend">
            <ui-tab>
              <view class="item item-right">横屏壁纸</view>
            </ui-tab>
            <ui-tab>
              <view class="item item-left">
                竖屏壁纸
              </view>
            </ui-tab>
          </ui-tabs>
        </view>
      </view>
    </ui-fixed-view>
    <view class="classify-cont">
      <!-- 横屏壁纸 -->
      <view class="classify-list classify-list-across"
        wx:if="{{current4 === 0}}"
        wx:for="{{getAllList}}"
        wx:key="index">
        <view class="classify-list-cont"
          data-id="{{index}}"
          data-url="{{item.imageUrl}}" 
          data-text="横屏壁纸详情" 
          bindtap="toDetails"
        >
          <image src="{{item.imageUrl}}" mode="aspectFill"/>
        </view>
      </view>
      <!-- 竖屏壁纸 -->
      <view class="classify-list classify-list-vertical"
        wx:if="{{current4 === 1}}"
        wx:for="{{getAllList}}"
        wx:key="index">
        <view class="classify-list-cont"
          data-id="{{index}}"
          data-url="{{item.imageUrl}}" 
          data-text="竖屏壁纸详情" 
          bindtap="toDetails"
        >
          <image src="{{item.imageUrl}}" mode="aspectFill"/>
        </view>
      </view>
      <view class="all-nothave" wx:if="{{isGetAllList}}">没有更多了</view>
    </view>
  </scroll-view>
</view>
</template>

<script>
export default {
  config: {
    navigationBarTitleText: '我的收藏'
  },
  data: {
    // 横屏竖屏切换
    current4: 0,
    tabStyle:{
      'flex':'0 0 40px',
      'padding':'10px 0px',
      'width':'40px',
      'margin': '0 20px',
    },
    activeTabStyle4:{
      "border-bottom": "2px solid #ff6630",
    },
    tabContents: [
      {subCategoryList: [
        {
            text: '1',
            imageUrl: "http://ipyd.paixian.com/wall/banner1.png",
        }, {
            text: '2',
            imageUrl: "http://ipyd.paixian.com/wall/banner2.png",
        }, {
            text: '3',
            imageUrl: "http://ipyd.paixian.com/wall/banner3.png",
        }
      ]}, 
      {subCategoryList: [
        {
            text: '1',
            imageUrl: "http://ipyd.paixian.com/wall/list/1.jpg",
        }, {
            text: '2',
            imageUrl: "http://ipyd.paixian.com/wall/list/2.jpg",
        }, {
            text: '3',
            imageUrl: "http://ipyd.paixian.com/wall/list/3.jpg",
        }, {
            text: '4',
            imageUrl: "http://ipyd.paixian.com/wall/list/4.jpg",
        }, {
            text: '5',
            imageUrl: "http://ipyd.paixian.com/wall/list/5.jpg",
        }, {
            text: '6',
            imageUrl: "http://ipyd.paixian.com/wall/list/6.jpg",
        }, {
            text: '7',
            imageUrl: "http://ipyd.paixian.com/wall/list/7.jpg",
        }, {
            text: '8',
            imageUrl: "http://ipyd.paixian.com/wall/list/8.jpg",
        }, {
            text: '9',
            imageUrl: "http://ipyd.paixian.com/wall/list/9.jpg",
        }, {
            text: '10',
            imageUrl: "http://ipyd.paixian.com/wall/list/10.jpg",
        }, {
            text: '11',
            imageUrl: "http://ipyd.paixian.com/wall/list/11.jpg",
        }, {
            text: '12',
            imageUrl: "http://ipyd.paixian.com/wall/list/12.jpg",
        }, {
            text: '13',
            imageUrl: "http://ipyd.paixian.com/wall/list/13.jpg",
        }, {
            text: '14',
            imageUrl: "http://ipyd.paixian.com/wall/list/14.jpg",
        }, {
            text: '15',
            imageUrl: "http://ipyd.paixian.com/wall/list/15.jpg",
        }, {
            text: '16',
            imageUrl: "http://ipyd.paixian.com/wall/list/16.jpg",
        }
      ]},
    ], // 横屏竖屏切换
    tabContentData: [], // 横屏竖屏后的列表
    // 滚动加载列表
    height: '',
    getAllList: [], // 模拟数据滚动加载,
    pageSize: 15, // 每页条数
    pageNo: 1, // 当前页数
    isGetAllList: false, // 是否显示没有更多了
  },
  //横屏竖屏切换
  handleChange4 (e) {
    let index = e.detail.index
    this.setData({
      current4:index,
      tabContentData:this.data.tabContents[index].subCategoryList
    })
    console.log(this.data.tabContentData)
    this.getAllList()
  },
  // 横屏竖屏切换后加载第一屏数据
  getAllList () {
    let _this = this
    _this.data.getAllList = [] // 切换后清除原有存储数据
    _this.data.isGetAllList = false
    wx.getSystemInfo({
      success: (res) => {
        let result = _this.data.tabContentData;
        for (let i = 0; i < _this.data.pageSize; i++) {
          if(_this.data.getAllList.length < _this.data.tabContentData.length){
            _this.data.getAllList.push(result[i])
          }
        }
        _this.setData({
          height: res.windowHeight,
          getAllList: _this.data.getAllList
        })
        // 判断展示没有更多了
        console.log(_this.data.getAllList.length,_this.data.tabContentData.length)
        if(_this.data.getAllList.length >= _this.data.tabContentData.length) {
          _this.setData({
            isGetAllList: true
          })
          return false
        } else {
          _this.setData({
            isGetAllList: false
          })
        }
      }
    })
  },
  onReady:function(){
  },
  // 因为是模拟数据返回的是全部，这里所以要做成分页的形式，如果是通过页数去请求接口再push就不需要这样子操作了
  lower() {
    if(this.data.getAllList.length < this.data.tabContentData.length){
      wx.showLoading({  
        title: '加载中',
        icon: 'loading',
      })
    } else {
      this.setData({
        isGetAllList: true
      })
    }
    for (let i = 0; i < this.data.pageSize; i++) {
      let getAllListLength = this.data.getAllList.length
      if(this.data.getAllList.length < this.data.tabContentData.length){
        this.data.getAllList.push(this.data.tabContentData[getAllListLength++]);
      }
    }
    setTimeout(() => {
      this.setData({
        getAllList: this.data.getAllList
      });
      wx.hideLoading();
    }, 500)
  },
  //生命周期函数--监听页面加载
  onLoad: function (options) {
    this.setData({
      current4: 0,
      tabContentData:this.data.tabContents[0].subCategoryList
    })
    this.getAllList()    
  },
  // 跳转到壁纸详情
  toDetails(e) {
    console.log(e.currentTarget.dataset)
    wx.navigateTo({
      url:
        "/pages/collectDetails/collectDetails?text="+ e.currentTarget.dataset.text +"&url=" + e.currentTarget.dataset.url, // 跳转页面的路径，可带参数 ？隔开，不同参数用 & 分隔；相对路径，不需要.wxml后缀
      success: function() {}, // 成功后的回调；
      fail: function() {}, // 失败后的回调；
      complete: function() {} // 结束后的回调(成功，失败都会执行)
    })
  },
}
</script>

<style lang="less">
.collect{
  .fixed-view-content {
    background-color: #fff;
    z-index: 99;
  }
  // 横屏竖屏切换
  .recommend{
    width: 100%;
    background: #fff;
    .classify-cont {
      display: flex;
      flex-wrap: wrap;
      justify-content: left;
      margin-top: -4px;
      padding-left: 15px;
      .classify-list {
        padding: 15px 15px 0px 0px;        
        .classify-list-cont {
          border-radius: 4px;
          overflow: hidden;
          box-shadow: 0px 2px 4px 0px rgba(215,215,215,0.5);
          img{
            width: 100%;
            height: auto;
          }
        }
      }
      .classify-list-across{
        width: 50%;
        .classify-list-cont{
          height: 100px;
        }
      }
      .classify-list-vertical{
        width: 33.3%;
        .classify-list-cont {
          height: 150px;
        }
      }
    }
  }
  .all-nothave{
    width: 100%;
    text-align: center;
    color:#7c7c7c;
    padding: 20px 0;
  }
}
</style>