devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：我家小花儿 | 2024-03-27 02:37:04

赞

踩

data-id="{{index}}" data-src="{{item}}

先看效果图：

180322_p8Hs_3472480.png181311_ms2Z_3472480.png

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

贴上代码：

  1. <template>
  2. <view class="collect">
  3.   <view class="title-wire"></view>
  4.   <!-- 横屏竖屏 -->
  5.   <scroll-view class="recommend" scroll-y='true' style="height:{{height}}px" bindscrolltolower='lower'>
  6.     <view style="height:50px"></view>
  7.     <ui-fixed-view top="0" left="0" right="0">
  8.       <view class="fixed-view-content">
  9.         <view style="width:160px;margin:0 auto">
  10.           <ui-tabs width="" 
  11.             tab-style="{{tabStyle}}" 
  12.             auto-width="{{false}}" 
  13.             index="{{ current4 }}" 
  14.             active-tab-style="{{activeTabStyle4}}" 
  15.             bindchange="handleChange4"
  16.             probe="1"
  17.             class="index-recommend">
  18.             <ui-tab>
  19.               <view class="item item-right">横屏壁纸</view>
  20.             </ui-tab>
  21.             <ui-tab>
  22.               <view class="item item-left">
  23.                 竖屏壁纸
  24.               </view>
  25.             </ui-tab>
  26.           </ui-tabs>
  27.         </view>
  28.       </view>
  29.     </ui-fixed-view>
  30.     <view class="classify-cont">
  31.       <!-- 横屏壁纸 -->
  32.       <view class="classify-list classify-list-across"
  33.         wx:if="{{current4 === 0}}"
  34.         wx:for="{{getAllList}}"
  35.         wx:key="index">
  36.         <view class="classify-list-cont"
  37.           data-id="{{index}}"
  38.           data-url="{{item.imageUrl}}" 
  39.           data-text="横屏壁纸详情" 
  40.           bindtap="toDetails"
  41.         >
  42.           <image src="{{item.imageUrl}}" mode="aspectFill"/>
  43.         </view>
  44.       </view>
  45.       <!-- 竖屏壁纸 -->
  46.       <view class="classify-list classify-list-vertical"
  47.         wx:if="{{current4 === 1}}"
  48.         wx:for="{{getAllList}}"
  49.         wx:key="index">
  50.         <view class="classify-list-cont"
  51.           data-id="{{index}}"
  52.           data-url="{{item.imageUrl}}" 
  53.           data-text="竖屏壁纸详情" 
  54.           bindtap="toDetails"
  55.         >
  56.           <image src="{{item.imageUrl}}" mode="aspectFill"/>
  57.         </view>
  58.       </view>
  59.       <view class="all-nothave" wx:if="{{isGetAllList}}">没有更多了</view>
  60.     </view>
  61.   </scroll-view>
  62. </view>
  63. </template>
  64.  
  65. <script>
  66. export default {
  67.   config: {
  68.     navigationBarTitleText: '我的收藏'
  69.   },
  70.   data: {
  71.     // 横屏竖屏切换
  72.     current4: 0,
  73.     tabStyle:{
  74.       'flex':'0 0 40px',
  75.       'padding':'10px 0px',
  76.       'width':'40px',
  77.       'margin': '0 20px',
  78.     },
  79.     activeTabStyle4:{
  80.       "border-bottom": "2px solid #ff6630",
  81.     },
  82.     tabContents: [
  83.       {subCategoryList: [
  84.         {
  85.             text: '1',
  86.             imageUrl: "http://ipyd.paixian.com/wall/banner1.png",
  87.         }, {
  88.             text: '2',
  89.             imageUrl: "http://ipyd.paixian.com/wall/banner2.png",
  90.         }, {
  91.             text: '3',
  92.             imageUrl: "http://ipyd.paixian.com/wall/banner3.png",
  93.         }
  94.       ]}, 
  95.       {subCategoryList: [
  96.         {
  97.             text: '1',
  98.             imageUrl: "http://ipyd.paixian.com/wall/list/1.jpg",
  99.         }, {
  100.             text: '2',
  101.             imageUrl: "http://ipyd.paixian.com/wall/list/2.jpg",
  102.         }, {
  103.             text: '3',
  104.             imageUrl: "http://ipyd.paixian.com/wall/list/3.jpg",
  105.         }, {
  106.             text: '4',
  107.             imageUrl: "http://ipyd.paixian.com/wall/list/4.jpg",
  108.         }, {
  109.             text: '5',
  110.             imageUrl: "http://ipyd.paixian.com/wall/list/5.jpg",
  111.         }, {
  112.             text: '6',
  113.             imageUrl: "http://ipyd.paixian.com/wall/list/6.jpg",
  114.         }, {
  115.             text: '7',
  116.             imageUrl: "http://ipyd.paixian.com/wall/list/7.jpg",
  117.         }, {
  118.             text: '8',
  119.             imageUrl: "http://ipyd.paixian.com/wall/list/8.jpg",
  120.         }, {
  121.             text: '9',
  122.             imageUrl: "http://ipyd.paixian.com/wall/list/9.jpg",
  123.         }, {
  124.             text: '10',
  125.             imageUrl: "http://ipyd.paixian.com/wall/list/10.jpg",
  126.         }, {
  127.             text: '11',
  128.             imageUrl: "http://ipyd.paixian.com/wall/list/11.jpg",
  129.         }, {
  130.             text: '12',
  131.             imageUrl: "http://ipyd.paixian.com/wall/list/12.jpg",
  132.         }, {
  133.             text: '13',
  134.             imageUrl: "http://ipyd.paixian.com/wall/list/13.jpg",
  135.         }, {
  136.             text: '14',
  137.             imageUrl: "http://ipyd.paixian.com/wall/list/14.jpg",
  138.         }, {
  139.             text: '15',
  140.             imageUrl: "http://ipyd.paixian.com/wall/list/15.jpg",
  141.         }, {
  142.             text: '16',
  143.             imageUrl: "http://ipyd.paixian.com/wall/list/16.jpg",
  144.         }
  145.       ]},
  146.     ], // 横屏竖屏切换
  147.     tabContentData: [], // 横屏竖屏后的列表
  148.     // 滚动加载列表
  149.     height: '',
  150.     getAllList: [], // 模拟数据滚动加载,
  151.     pageSize: 15, // 每页条数
  152.     pageNo: 1, // 当前页数
  153.     isGetAllList: false, // 是否显示没有更多了
  154.   },
  155.   //横屏竖屏切换
  156.   handleChange4 (e) {
  157.     let index = e.detail.index
  158.     this.setData({
  159.       current4:index,
  160.       tabContentData:this.data.tabContents[index].subCategoryList
  161.     })
  162.     console.log(this.data.tabContentData)
  163.     this.getAllList()
  164.   },
  165.   // 横屏竖屏切换后加载第一屏数据
  166.   getAllList () {
  167.     let _this = this
  168.     _this.data.getAllList = [] // 切换后清除原有存储数据
  169.     _this.data.isGetAllList = false
  170.     wx.getSystemInfo({
  171.       success: (res) => {
  172.         let result = _this.data.tabContentData;
  173.         for (let i = 0; i < _this.data.pageSize; i++) {
  174.           if(_this.data.getAllList.length < _this.data.tabContentData.length){
  175.             _this.data.getAllList.push(result[i])
  176.           }
  177.         }
  178.         _this.setData({
  179.           height: res.windowHeight,
  180.           getAllList: _this.data.getAllList
  181.         })
  182.         // 判断展示没有更多了
  183.         console.log(_this.data.getAllList.length,_this.data.tabContentData.length)
  184.         if(_this.data.getAllList.length >= _this.data.tabContentData.length) {
  185.           _this.setData({
  186.             isGetAllList: true
  187.           })
  188.           return false
  189.         } else {
  190.           _this.setData({
  191.             isGetAllList: false
  192.           })
  193.         }
  194.       }
  195.     })
  196.   },
  197.   onReady:function(){
  198.   },
  199.   // 因为是模拟数据返回的是全部，这里所以要做成分页的形式，如果是通过页数去请求接口再push就不需要这样子操作了
  200.   lower() {
  201.     if(this.data.getAllList.length < this.data.tabContentData.length){
  202.       wx.showLoading({  
  203.         title: '加载中',
  204.         icon: 'loading',
  205.       })
  206.     } else {
  207.       this.setData({
  208.         isGetAllList: true
  209.       })
  210.     }
  211.     for (let i = 0; i < this.data.pageSize; i++) {
  212.       let getAllListLength = this.data.getAllList.length
  213.       if(this.data.getAllList.length < this.data.tabContentData.length){
  214.         this.data.getAllList.push(this.data.tabContentData[getAllListLength++]);
  215.       }
  216.     }
  217.     setTimeout(() => {
  218.       this.setData({
  219.         getAllList: this.data.getAllList
  220.       });
  221.       wx.hideLoading();
  222.     }, 500)
  223.   },
  224.   //生命周期函数--监听页面加载
  225.   onLoad: function (options) {
  226.     this.setData({
  227.       current4: 0,
  228.       tabContentData:this.data.tabContents[0].subCategoryList
  229.     })
  230.     this.getAllList()    
  231.   },
  232.   // 跳转到壁纸详情
  233.   toDetails(e) {
  234.     console.log(e.currentTarget.dataset)
  235.     wx.navigateTo({
  236.       url:
  237.         "/pages/collectDetails/collectDetails?text="+ e.currentTarget.dataset.text +"&url=" + e.currentTarget.dataset.url, // 跳转页面的路径，可带参数 ？隔开，不同参数用 & 分隔；相对路径，不需要.wxml后缀
  238.       success: function() {}, // 成功后的回调；
  239.       fail: function() {}, // 失败后的回调；
  240.       complete: function() {} // 结束后的回调(成功，失败都会执行)
  241.     })
  242.   },
  243. }
  244. </script>
  245.  
  246. <style lang="less">
  247. .collect{
  248.   .fixed-view-content {
  249.     background-color: #fff;
  250.     z-index: 99;
  251.   }
  252.   // 横屏竖屏切换
  253.   .recommend{
  254.     width: 100%;
  255.     background: #fff;
  256.     .classify-cont {
  257.       display: flex;
  258.       flex-wrap: wrap;
  259.       justify-content: left;
  260.       margin-top: -4px;
  261.       padding-left: 15px;
  262.       .classify-list {
  263.         padding: 15px 15px 0px 0px;        
  264.         .classify-list-cont {
  265.           border-radius: 4px;
  266.           overflow: hidden;
  267.           box-shadow: 0px 2px 4px 0px rgba(215,215,215,0.5);
  268.           img{
  269.             width: 100%;
  270.             height: auto;
  271.           }
  272.         }
  273.       }
  274.       .classify-list-across{
  275.         width: 50%;
  276.         .classify-list-cont{
  277.           height: 100px;
  278.         }
  279.       }
  280.       .classify-list-vertical{
  281.         width: 33.3%;
  282.         .classify-list-cont {
  283.           height: 150px;
  284.         }
  285.       }
  286.     }
  287.   }
  288.   .all-nothave{
  289.     width: 100%;
  290.     text-align: center;
  291.     color:#7c7c7c;
  292.     padding: 20px 0;
  293.   }
  294. }
  295. </style>
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/321338
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。