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

小程序 懒加载功能实现_mp-loading

作者：不正经 | 2024-03-27 02:32:45

赞

踩

mp-loading

参考方案一：

主要是来自知友提供的代码思路

原文链接：https://zhuanlan.zhihu.com/p/162904380

他的实现思路是：在页面可以使用onPageScroll来监听滚动条的位置

缺点：组件中是无法使用的 另外 页面中使用了overflow发现无法监听滚动条的位置

我使用了该思路 并加入了从后端请求数据的步骤 供大家参考

index.js

  1. const utils = require('../utils/utils')
  2. const app = getApp()
  3.  
  4. Page({
  5.   data: {
  6.     first:[
  7.       {
  8.         Id: 1,
  9.         Number: 'BN23656326561',
  10.         CreateTime: '2021/04/21 08:12:56',
  11.         RegionName: 'XXXXX',
  12.         Address: '一号研发楼'
  13.       },
  14.       {
  15.         Id: 2,
  16.         Number: 'BN23656326562',
  17.         CreateTime: '2021/04/21 08:12:56',
  18.         RegionName: 'XXXXX',
  19.         Address: '一号研发楼'
  20.       },
  21.       {
  22.         Id: 3,
  23.         Number: 'BN23656326563',
  24.         CreateTime: '2021/04/21 08:12:56',
  25.         RegionName: 'XXXXX',
  26.         Address: '一号研发楼'
  27.       },
  28.       {
  29.         Id: 4,
  30.         Number: 'BN23656326564',
  31.         CreateTime: '2021/04/21 08:12:56',
  32.         RegionName: 'XXXXX',
  33.         Address: '一号研发楼'
  34.       },
  35.       {
  36.         Id: 5,
  37.         Number: 'BN23656326565',
  38.         CreateTime: '2021/04/21 08:12:56',
  39.         RegionName: 'XXXXX',
  40.         Address: '一号研发楼'
  41.       },
  42.       {
  43.         Id: 6,
  44.         Number: 'BN23656326566',
  45.         CreateTime: '2021/04/21 08:12:56',
  46.         RegionName: 'XXXXX',
  47.         Address: '一号研发楼'
  48.       },
  49.       {
  50.         Id: 7,
  51.         Number: 'BN23656326567',
  52.         CreateTime: '2021/04/21 08:12:56',
  53.         RegionName: 'XXXXX',
  54.         Address: '一号研发楼'
  55.       },
  56.       {
  57.         Id: 8,
  58.         Number: 'BN23656326568',
  59.         CreateTime: '2021/04/21 08:12:56',
  60.         RegionName: 'XXXXX',
  61.         Address: '一号研发楼'
  62.       },
  63.       {
  64.         Id: 9,
  65.         Number: 'BN23656326569',
  66.         CreateTime: '2021/04/21 08:12:56',
  67.         RegionName: 'XXXXX',
  68.         Address: '一号研发楼'
  69.       },
  70.       {
  71.         Id: 10,
  72.         Number: 'BN23656326510',
  73.         CreateTime: '2021/04/21 08:12:56',
  74.         RegionName: 'XXXXX',
  75.         Address: '一号研发楼'
  76.       },
  77.     ],
  78.     second:[
  79.       {
  80.         Id: 11,
  81.         Number: 'BN23656326565',
  82.         CreateTime: '2021/04/21 08:12:56',
  83.         RegionName: 'XXXXX',
  84.         Address: '一号研发楼'
  85.       },
  86.       {
  87.         Id: 12,
  88.         Number: 'BN23656326566',
  89.         CreateTime: '2021/04/21 08:12:56',
  90.         RegionName: 'XXXXX',
  91.         Address: '一号研发楼'
  92.       },
  93.       {
  94.         Id: 13,
  95.         Number: 'BN23656326565',
  96.         CreateTime: '2021/04/21 08:12:56',
  97.         RegionName: 'XXXXX',
  98.         Address: '一号研发楼'
  99.       },
  100.       {
  101.         Id: 14,
  102.         Number: 'BN23656326566',
  103.         CreateTime: '2021/04/21 08:12:56',
  104.         RegionName: 'XXXXX',
  105.         Address: '一号研发楼'
  106.       },
  107.       {
  108.         Id: 15,
  109.         Number: 'BN23656326565',
  110.         CreateTime: '2021/04/21 08:12:56',
  111.         RegionName: 'XXXXX',
  112.         Address: '一号研发楼'
  113.       },
  114.       {
  115.         Id: 16,
  116.         Number: 'BN23656326566',
  117.         CreateTime: '2021/04/21 08:12:56',
  118.         RegionName: 'XXXXX',
  119.         Address: '一号研发楼'
  120.       },
  121.       {
  122.         Id: 17,
  123.         Number: 'BN23656326565',
  124.         CreateTime: '2021/04/21 08:12:56',
  125.         RegionName: 'XXXXX',
  126.         Address: '一号研发楼'
  127.       },
  128.       {
  129.         Id: 18,
  130.         Number: 'BN23656326566',
  131.         CreateTime: '2021/04/21 08:12:56',
  132.         RegionName: 'XXXXX',
  133.         Address: '一号研发楼'
  134.       },
  135.       {
  136.         Id: 19,
  137.         Number: 'BN23656326565',
  138.         CreateTime: '2021/04/21 08:12:56',
  139.         RegionName: 'XXXXX',
  140.         Address: '一号研发楼'
  141.       },
  142.       {
  143.         Id: 20,
  144.         Number: 'BN23656326566',
  145.         CreateTime: '2021/04/21 08:12:56',
  146.         RegionName: 'XXXXX',
  147.         Address: '一号研发楼'
  148.       },
  149.     ],
  150.     pagenum: 1,
  151.     pagesize: 10,
  152.     total: 12,
  153.     loading: true,
  154.     finishedLoading: false,
  155.     windowHeight:'',
  156.     pageScroll: false
  157.   },
  158.   onLoad: function(option){
  159.     // console.log("onLoad")
  160.     let that = this
  161.     wx.getSystemInfo({
  162.       success: function(res){
  163.         that.setData({
  164.           windowHeight: res.windowHeight
  165.         })
  166.       }
  167.     })
  168.   },
  169.   // 调用滚动条获取位置信息
  170.   onPageScroll: function(e){
  171.     // console.log(e)
  172.     if(e&&this.data.pageScroll == false){
  173.       this.setData({
  174.         pageScroll: true
  175.       })
  176.     }
  177.     let that = this
  178.     if(that.data.detail[that.data.detail.length - 1].hide){
  179.       return false
  180.     }
  181.     wx.getSystemInfo({
  182.       success: function(res){
  183.         that.setData({
  184.           windowHeight: res.windowHeight + e.scrollTop
  185.         })
  186.       }
  187.     })
  188.     // console.log(this.data.windowHeight,e.scrollTop)
  189.     var start = (that.data.pagenum - 1) * that.data.pagesize
  190.     for(let i = start; i < that.data.detail.length; i++){
  191.       if(that.data.detail[i].height <= that.data.windowHeight){
  192.         that.data.detail[i].hide = true
  193.       }else{
  194.         that.data.detail[i].hide =  false
  195.       }
  196.     }
  197.     that.setData({
  198.       detail: that.data.detail
  199.     })
  200.     if(that.data.detail[that.data.detail.length-1].hide){
  201.       if(that.data.detail.length<that.data.total){
  202.         that.setData({
  203.           pagenum: that.data.pagenum+1,
  204.           loading: true
  205.         })
  206.         // 再次获取新的值
  207.         var data = that.initial()
  208.       }else{
  209.         that.setData({
  210.           finishedLoading: true
  211.         })
  212.       }
  213.     }
  214.   },
  215.   onShow() {
  216.     // console.log("onShow")
  217.     // 等待 获取从后端传过来的值
  218.     var data = this.initial()
  219.   },
  220.   async initial(){
  221.     this.setData({
  222.       pageScroll: false
  223.     })
  224.     const params = {
  225.       PageNum: this.data.pagenum,
  226.       PageSize: this.data.pagesize
  227.     }
  228.     await this.realIni(params)
  229.   },
  230.   getData(val){
  231.     var that = this
  232.     if(val.PageNum == 1){
  233.       let list = that.data.first
  234.       return new Promise((resolve, reject) => {
  235.         setTimeout(() => {
  236.           that.setData({
  237.             detail: that.data.first,
  238.             loading: false
  239.           })
  240.           resolve(list)
  241.         }, 2000)
  242.       })
  243.     }else{
  244.       var list = utils.deepCloneArr(that.data.detail)//深拷贝副本
  245.       list.push(...that.data.second)
  246.       return new Promise((resolve, reject) => {
  247.         setTimeout(() => {
  248.           that.setData({
  249.             loading: false,
  250.             detail: list
  251.           })
  252.           resolve(list)
  253.         }, 3000)
  254.       })
  255.     }
  256.   },
  257.   async realIni(val) {
  258.     const result = await this.getData(val)
  259.     var that = this
  260.     if(that.data.loading==false){
  261.       var start = (that.data.pagenum - 1) * that.data.pagesize
  262.       for(let i = start;i < result.length;i++){
  263.         // console.log('#curr'+ i)
  264.         wx.createSelectorQuery().select('#curr'+ i).boundingClientRect(function(rect){
  265.           // console.log(rect,rect.top)
  266.           result[i].height = rect.top
  267.           // console.log(result[i].height , that.data.windowHeight)
  268.           if(result[i].height <= that.data.windowHeight){
  269.             result[i].hide = true
  270.           }else{
  271.             result[i].hide = false
  272.           }
  273.           if(i==(result.length -1)){
  274.             that.setData({
  275.               detail: result
  276.             })
  277.           }
  278.         }).exec()
  279.       }
  280.     }
  281.   }
  282. })

其中utils.js里面的深拷贝函数

  1. // 对象深拷贝函数
  2. const deepCloneArr = function(initalArr) {
  3.   var list = [];
  4.   list = JSON.parse(JSON.stringify(initalArr));
  5.   return list;
  6. }
  7.  
  8. // 将深拷贝函数暴露出去
  9. module.exports = {
  10.   deepCloneArr
  11. }

index.json

  1. {
  2.   "usingComponents": {
  3.     "mp-loading": "weui-miniprogram/loading/loading"
  4.   }
  5. }

index.wxml 

  1. <view class="work {{pageScroll ? 'work-long': 'work-v'}}">
  2.   <view class="work-header">
  3.     <text>固定</text>
  4.   </view>
  5.   <view class="work-header-t">
  6.   </view>
  7.  
  8.   <view class="lazyload">
  9.     <view wx:for="{{detail}}" wx:key="index" class="undeal-item {{item.hide?'animation':''}}" id="curr{{index}}">
  10.       <view wx:if="{{item.hide}}">
  11.         <view class="undeal-item-info">
  12.             <view class="undeal-item-info-oneline">
  13.               <view class="undeal-item-info-left">
  14.                 <view class="undeal-item-info-left-label">编号</view>
  15.                 <view class="undeal-item-info-left-value">{{item.Number}}</view>
  16.               </view>
  17.               <view class="undeal-item-info-right">
  18.                 <text class="undeal-item-info-right-label">创建时间</text>
  19.                 <text class="undeal-item-info-right-value">{{item.CreateTime}}</text>
  20.               </view>
  21.             </view>
  22.             <view class="undeal-item-info-twoline">
  23.               <view class="undeal-item-info-left">
  24.                 <text class="undeal-item-info-left-label item-label-style">所属区域</text>
  25.                 <text class="undeal-item-info-left-value item-style">{{item.RegionName}}</text>
  26.               </view>
  27.               <view class="undeal-item-info-left">
  28.                 <text class="undeal-item-info-left-label item-label-style">目的地</text>
  29.                 <text class="undeal-item-info-left-value item-style">{{item.Address}}</text>
  30.               </view>
  31.             </view> 
  32.         </view>
  33.       </view> 
  34.     </view>
  35.  
  36.     <mp-loading wx:if="{{!finishedLoading}}" class="loading-style" type="dot-gray" show="{{loading}}"></mp-loading>
  37.     <text wx:else class="loading-txt">已经到底了...</text>
  38.   
  39.   </view>
  40.  
  41. </view>

index.css

  1. .work{
  2.   width: 100vw;
  3.   height: auto;
  4.   position: relative;
  5.   background-color: #F2F2F2;
  6. }
  7.  
  8. .work-v{
  9.   height: 100vh;
  10. }
  11.  
  12. .work-long{
  13.   height: 100%;
  14. }
  15.  
  16.  
  17. .work-header{
  18.   position: fixed;
  19.   /* position: sticky ;  */
  20.   top: 0;
  21.   width: 100%;
  22.   height: 120rpx;
  23.   z-index: 1000;
  24.   float: left;
  25.   /* top: 0rpx; */
  26.   left: 0;
  27.   background-color: red;
  28.   padding: 19rpx 40rpx 4rpx 40rpx;
  29. }
  30.  
  31. .work-header-t{
  32.   width: 100%;
  33.   height: 120rpx;
  34. }
  35.  
  36. .lazyload{
  37.   width: 100%;
  38.   height: 100%;
  39.   background-color: pink;
  40.   /* 失效 */
  41.   /* height: calc(100vh - 120rpx); */
  42.   /* overflow-y: scroll; */
  43.   padding-bottom: calc(env(safe-area-inset-bottom) / 2);
  44. }
  45.  
  46. .center{
  47.   width: 100%;
  48.   margin: 30rpx 10% 0;
  49.   float: left;
  50.   font-size: 26rpx;
  51.   height: 200rpx;
  52.   background-color: #fff;
  53. }
  54.  
  55. .animation{
  56.   animation: center 1s;
  57. }
  58.  
  59. @keyframes center{
  60.   from{
  61.     transform: scale(0.5);
  62.   }
  63.   to{
  64.     transform: scale(1);
  65.   }
  66. }
  67.  
  68. /* 基本信息 */
  69. .undeal-item{
  70.   height: 240rpx;
  71.   margin-top: 10rpx;
  72.   background-color: #fff;
  73. }
  74.  
  75. .undeal-item-info{
  76.   padding: 0 26rpx 0rpx 38rpx;
  77.   display: flex;
  78.   flex-direction: column;
  79. }
  80.  
  81. .undeal-item-info-oneline,
  82. .undeal-item-info-twoline{
  83.   margin-top: 16rpx ;
  84.   font-size: 22rpx;
  85.   display: flex;
  86.   justify-content: space-between;
  87. }
  88.  
  89. .undeal-item-info-oneline{
  90.   color: #237AE4;
  91. }
  92.  
  93. .undeal-item-info-left{
  94.   flex: 1;
  95.   display: flex;
  96. }
  97.  
  98. .undeal-item-info-right{
  99.   flex: 1;
  100.   display: flex;
  101. }
  102.  
  103. .undeal-item-info-left-label{
  104.   width: 110rpx;
  105. }
  106.  
  107. .undeal-item-info-right-label{
  108.   width: 120rpx;
  109. }
  110.  
  111. .undeal-item-info-left-value,
  112. .undeal-item-info-right-value{
  113.   justify-content: flex-end;
  114. }
  115.  
  116. .item-label-style{
  117.   color: #666;
  118. }
  119.  
  120. .item-style{
  121.   color: #333;
  122. }
  123.  
  124. /* loading样式 */
  125. .loading-style{
  126.   display: block;
  127.   padding-top: 40rpx;
  128.   padding-bottom: 40rpx;
  129. }
  130.  
  131. .loading-txt{
  132.   font-size: 20rpx;
  133.   padding-bottom: 10rpx;
  134.   text-align: center;
  135.   display: flex;
  136.   align-items: center;
  137.   justify-content: center;
  138.   color: #666;
  139.   background-color: lightgray;
  140. }

对于上述方案有固定的头部区域，滚动条还是可以穿过，观感很不好

因此，带来第二种方案

参考方案二：

主要实现思路是：在需要懒加载的区域引入微信官方文档中的scroll-view组件

参考链接：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

lazyr.js

  1. const utils = require('../../utils/utils')
  2. const app = getApp()
  3.  
  4. Component({
  5.   /**
  6.    * 组件的属性列表
  7.    */
  8.   properties: {
  9.  
  10.   },
  11.  
  12.   /**
  13.    * 组件的初始数据
  14.    */
  15.   data: {
  16.     first:[
  17.       {
  18.         Id: 1,
  19.         Number: 'BN23656326561',
  20.         CreateTime: '2021/04/21 08:12:56',
  21.         RegionName: 'XXXXX',
  22.         Address: '一号研发楼'
  23.       },
  24.       {
  25.         Id: 2,
  26.         Number: 'BN23656326562',
  27.         CreateTime: '2021/04/21 08:12:56',
  28.         RegionName: 'XXXXX',
  29.         Address: '一号研发楼'
  30.       },
  31.       {
  32.         Id: 3,
  33.         Number: 'BN23656326563',
  34.         CreateTime: '2021/04/21 08:12:56',
  35.         RegionName: 'XXXXX',
  36.         Address: '一号研发楼'
  37.       },
  38.       {
  39.         Id: 4,
  40.         Number: 'BN23656326564',
  41.         CreateTime: '2021/04/21 08:12:56',
  42.         RegionName: 'XXXXX',
  43.         Address: '一号研发楼'
  44.       },
  45.       {
  46.         Id: 5,
  47.         Number: 'BN23656326565',
  48.         CreateTime: '2021/04/21 08:12:56',
  49.         RegionName: 'XXXXX',
  50.         Address: '一号研发楼'
  51.       },
  52.       {
  53.         Id: 6,
  54.         Number: 'BN23656326566',
  55.         CreateTime: '2021/04/21 08:12:56',
  56.         RegionName: 'XXXXX',
  57.         Address: '一号研发楼'
  58.       },
  59.       {
  60.         Id: 7,
  61.         Number: 'BN23656326567',
  62.         CreateTime: '2021/04/21 08:12:56',
  63.         RegionName: 'XXXXX',
  64.         Address: '一号研发楼'
  65.       },
  66.       {
  67.         Id: 8,
  68.         Number: 'BN23656326568',
  69.         CreateTime: '2021/04/21 08:12:56',
  70.         RegionName: 'XXXXX',
  71.         Address: '一号研发楼'
  72.       },
  73.       {
  74.         Id: 9,
  75.         Number: 'BN23656326569',
  76.         CreateTime: '2021/04/21 08:12:56',
  77.         RegionName: 'XXXXX',
  78.         Address: '一号研发楼'
  79.       },
  80.       {
  81.         Id: 10,
  82.         Number: 'BN23656326510',
  83.         CreateTime: '2021/04/21 08:12:56',
  84.         RegionName: 'XXXXX',
  85.         Address: '一号研发楼'
  86.       },
  87.     ],
  88.     second:[
  89.       {
  90.         Id: 11,
  91.         Number: 'BN23656326565',
  92.         CreateTime: '2021/04/21 08:12:56',
  93.         RegionName: 'XXXXX',
  94.         Address: '一号研发楼'
  95.       },
  96.       {
  97.         Id: 12,
  98.         Number: 'BN23656326566',
  99.         CreateTime: '2021/04/21 08:12:56',
  100.         RegionName: 'XXXXX',
  101.         Address: '一号研发楼'
  102.       },
  103.       {
  104.         Id: 13,
  105.         Number: 'BN23656326565',
  106.         CreateTime: '2021/04/21 08:12:56',
  107.         RegionName: 'XXXXX',
  108.         Address: '一号研发楼'
  109.       },
  110.       {
  111.         Id: 14,
  112.         Number: 'BN23656326566',
  113.         CreateTime: '2021/04/21 08:12:56',
  114.         RegionName: 'XXXXX',
  115.         Address: '一号研发楼'
  116.       },
  117.       {
  118.         Id: 15,
  119.         Number: 'BN23656326565',
  120.         CreateTime: '2021/04/21 08:12:56',
  121.         RegionName: 'XXXXX',
  122.         Address: '一号研发楼'
  123.       },
  124.       {
  125.         Id: 16,
  126.         Number: 'BN23656326566',
  127.         CreateTime: '2021/04/21 08:12:56',
  128.         RegionName: 'XXXXX',
  129.         Address: '一号研发楼'
  130.       },
  131.       {
  132.         Id: 17,
  133.         Number: 'BN23656326565',
  134.         CreateTime: '2021/04/21 08:12:56',
  135.         RegionName: 'XXXXX',
  136.         Address: '一号研发楼'
  137.       },
  138.       {
  139.         Id: 18,
  140.         Number: 'BN23656326566',
  141.         CreateTime: '2021/04/21 08:12:56',
  142.         RegionName: 'XXXXX',
  143.         Address: '一号研发楼'
  144.       },
  145.       {
  146.         Id: 19,
  147.         Number: 'BN23656326565',
  148.         CreateTime: '2021/04/21 08:12:56',
  149.         RegionName: 'XXXXX',
  150.         Address: '一号研发楼'
  151.       },
  152.       {
  153.         Id: 20,
  154.         Number: 'BN23656326566',
  155.         CreateTime: '2021/04/21 08:12:56',
  156.         RegionName: 'XXXXX',
  157.         Address: '一号研发楼'
  158.       },
  159.     ],
  160.     query:'',
  161.     pagenum: 1,
  162.     pagesize: 10,
  163.     total: 20,
  164.     loading: true,
  165.     finishedLoading: false,
  166.     recycleList: [],
  167.     // 查询的触发标志
  168.     flag: '',
  169.     windowHeight: '',
  170.     areaInfo: {},
  171.     currentStatus: 0,
  172.     pageScroll: false
  173.  
  174.   },
  175.   lifetimes: {
  176.     attached: function () {
  177.       
  178.       this.setData({
  179.         pagenum: 1,
  180.         recycleList: [],
  181.         loading: true,
  182.         finishedLoading: false
  183.       })
  184.       var that = this
  185.       wx.getSystemInfo({
  186.         success: function(res){
  187.           that.setData({
  188.             windowHeight: res.windowHeight
  189.           })
  190.         }
  191.       })
  192.    
  193.     },
  194.     ready: function(){
  195.       console.log("ready")
  196.       var inidetail = this.initial()
  197.     },
  198.     moved: function () { 
  199.  
  200.     },
  201.     detached: function () { 
  202.  
  203.     },
  204.   },
  205.  
  206.   /* 组件的方法列表 */
  207.   methods: {
  208.     async initial(){
  209.       const params = {
  210.         PageNum: this.data.pagenum,
  211.         PageSize: this.data.pagesize
  212.       }
  213.       await this.realIni(params)
  214.     },
  215.     getData(val){
  216.       var that = this
  217.       if(val.PageNum == 1){
  218.         let list = that.data.first
  219.         return new Promise((resolve, reject) => {
  220.           setTimeout(() => {
  221.             that.setData({
  222.               loading: false,
  223.               recycleList: that.data.first
  224.             })
  225.             
  226.             resolve(that.data.recycleList)
  227.           }, 2000)
  228.         })
  229.       }else{
  230.         // var list = utils.deepCloneArr(that.data.detail)//深拷贝副本
  231.         // list.push(...that.data.second)
  232.         return new Promise((resolve, reject) => {
  233.           setTimeout(() => {
  234.             let list =  utils.deepCloneArr(that.data.recycleList)
  235.             list.push(...that.data.second)
  236.             that.setData({
  237.               loading: false,
  238.               recycleList: list
  239.             })
  240.             resolve(list)
  241.           }, 3000)
  242.         })
  243.       }
  244.     },
  245.     async realIni(val) {
  246.       const result = await this.getData(val)
  247.       console.log(result)
  248.     },
  249.     getScroll:function(e){
  250.       let that = this
  251.       if(that.data.recycleList.length<that.data.total){
  252.         that.setData({
  253.           pagenum: that.data.pagenum+1,
  254.           loading: true
  255.         })
  256.         // 再次获取新的值
  257.         var data = that.initial()
  258.       }else{
  259.         if(!that.data.finishedLoading){
  260.           that.setData({
  261.             finishedLoading: true
  262.           })
  263.         }
  264.       }
  265.     },
  266.   }
  267. })
  268.

lazyr.json

  1. {
  2.   "component": true,
  3.   "usingComponents": {
  4.     "mp-loading": "weui-miniprogram/loading/loading"
  5.   }
  6. }

lazyr.wxml

  1. <view class="work">
  2.   <view class="work-header-f">
  3.     <view class="work-header">
  4.       <text>固定</text>
  5.     </view>
  6.     <view class="work-header-t">
  7.     </view>
  8.   </view>
  9.  
  10.   <view wx:if="{{ total > 0}}">
  11.     <scroll-view scroll-y="true" style='height:calc(100vh - 130rpx)' 
  12.       class="{{ total>pagesize? '' : 'lazyload'}}"
  13.       bindscrolltolower="getScroll">
  14.       <view wx:for="{{recycleList}}" wx:key="index" class="undeal-item list_item_box" id="undeal{{id}}">
  15.         <view class="undeal-item-info">
  16.           <view class="undeal-item-info-oneline">
  17.             <view class="undeal-item-info-left">
  18.               <view class="undeal-item-info-left-label">编号</view>
  19.               <view class="undeal-item-info-left-value">{{item.Number}}</view>
  20.             </view>
  21.             <view class="undeal-item-info-right">
  22.               <text class="undeal-item-info-right-label">创建时间</text>
  23.               <text class="undeal-item-info-right-value">{{item.CreateTime}}</text>
  24.             </view>
  25.           </view>
  26.           <view class="undeal-item-info-twoline">
  27.             <view class="undeal-item-info-left">
  28.               <text class="undeal-item-info-left-label item-label-style">所属区域</text>
  29.               <text class="undeal-item-info-left-value item-style">{{item.RegionName}}</text>
  30.             </view>
  31.             <view class="undeal-item-info-left">
  32.               <text class="undeal-item-info-left-label item-label-style">目的地</text>
  33.               <text class="undeal-item-info-left-value item-style">{{item.Address}}</text>
  34.             </view>
  35.           </view> 
  36.         </view>
  37.       </view>
  38.       <mp-loading wx:if="{{!finishedLoading}}" class="loading-style" type="dot-gray" show="{{loading}}"></mp-loading>
  39.       <text wx:else class="loading-txt">已经到底了...</text>
  40.     </scroll-view>
  41.   </view>
  42.  
  43.   <view wx:else class="nodatab {{currentStatus == 0? '': 'lazyload-p'}}">
  44.     <text>暂无内容</text>
  45.   </view>
  46.  
  47. </view>

lazyr.wxss

  1. .work{
  2.   margin-top: 0rpx;
  3.   height: 100vh;
  4.   background-color: lightgray;
  5. }
  6.  
  7. .work-header{
  8.   width: 100%;
  9.   height: 120rpx;
  10.   position: fixed;
  11.   z-index: 1000;
  12.   float: left;
  13.   top: 0rpx;
  14.   left: 0;
  15.   background-color: red;
  16.   padding: 19rpx 40rpx 4rpx 40rpx;
  17. }
  18.  
  19. .work-header-t{
  20.   width: 100%;
  21.   height: 120rpx;
  22. }
  23.  
  24. .lazyload{
  25.   height: 100% !important;
  26.   width: 100%;
  27.   padding-bottom: calc(env(safe-area-inset-bottom) / 2);
  28. }
  29.  
  30. /* 基本信息 */
  31. .undeal-item{
  32.   width: 100%;
  33.   height: 240rpx;
  34.   margin-top: 10rpx;
  35.   background-color: #fff;
  36. }
  37.  
  38. .undeal-item-info{
  39.   padding: 0 26rpx 0rpx 38rpx;
  40.   display: flex;
  41.   flex-direction: column;
  42. }
  43.  
  44. .undeal-item-info-oneline,
  45. .undeal-item-info-twoline{
  46.   margin-top: 16rpx ;
  47.   font-size: 22rpx;
  48.   display: flex;
  49.   justify-content: space-between;
  50. }
  51.  
  52. .undeal-item-info-oneline{
  53.   color: #237AE4;
  54. }
  55.  
  56. .undeal-item-info-left{
  57.   flex: 1;
  58.   display: flex;
  59. }
  60.  
  61. .undeal-item-info-right{
  62.   flex: 1;
  63.   display: flex;
  64. }
  65.  
  66. .undeal-item-info-left-label{
  67.   width: 110rpx;
  68. }
  69.  
  70. .undeal-item-info-right-label{
  71.   width: 120rpx;
  72. }
  73.  
  74. .undeal-item-info-left-value,
  75. .undeal-item-info-right-value{
  76.   justify-content: flex-end;
  77. }
  78.  
  79. .item-label-style{
  80.   color: #666;
  81. }
  82.  
  83. .item-style{
  84.   color: #333;
  85. }
  86.  
  87. /* loading样式 */
  88. .loading-style{
  89.   display: block;
  90.   padding-top: 40rpx;
  91.   padding-bottom: 40rpx;
  92. }
  93.  
  94. .loading-txt{
  95.   font-size: 20rpx;
  96.   padding-bottom: 10rpx;
  97.   text-align: center;
  98.   display: flex;
  99.   align-items: center;
  100.   justify-content: center;
  101.   color: #666;
  102.   background-color: lightgray;
  103. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/321313
推荐阅读
相关标签

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

  

闽ICP备14008679号