小程序 懒加载功能实现

最新推荐文章于 2024-07-31 17:09:37 发布
最新推荐文章于 2024-07-31 17:09:37 发布
阅读量1.2k 收藏 3
点赞数
分类专栏： 微信小程序 文章标签： 微信小程序 懒加载 滚动监听 scroll-view 数据分页
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sherily28/article/details/120056926
版权

参考方案一：

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

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

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

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

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

index.js

const utils = require('../utils/utils')
const app = getApp()

Page({
  data: {
    first:[
      {
        Id: 1,
        Number: 'BN23656326561',
        CreateTime: '2021/04/21 08:12:56',
        RegionName: 'XXXXX',
        Address: '一号研发楼'
      },
      {
        Id: 2,
        Number: 'BN23656326562',
        CreateTime: '2021/04/21 08:12:56',
        RegionName: 'XXXXX',
        Address: '一号研发楼'
      },
      {
        Id: 3,
        Number: 'BN23656326563',
        CreateTime: '2021/04/21 08:12:56',
        RegionName: 'XXXXX',
        Address: '一号研发楼'
      },
      {
        Id: 4,
        Number: 'BN23656326564',
        CreateTime: '2021/04/21 08:12:56',
        RegionName: 'XXXXX',
        Address: '一号研发楼'
      },
      {
        Id: 5,
        Number: 'BN23656326565',
        CreateTime: '2021/04/21 08:12:56',
        RegionName: 'XXXXX',
        Address: '一号研发楼'
      },
      {
        Id: 6,
        Number: 'BN23656326566',
        CreateTime: '2021/04/21 08:12:56',
        RegionName: 'XXXXX',
        Address: '一号研发楼'
      },
      {
        Id: 7,
        Number: 'BN23656326567',
        CreateTime: '2021/04/21 08:12:56',
        RegionName: 'XXXXX',
        Address: '一号研发楼'
      },
      {
        Id: 8,
        Number: 'BN23656326568',
        CreateTime: '2021/04/21 08:12:56',
        RegionName: 'XXXXX',
        Address: '一号研发楼'
      },
      {
        Id: 9,
        Number: 'BN23656326569',
        CreateTime: '2021/04/21 08:12:56',
        RegionName: 'XXXXX',
        Address: '一号研发楼'
      },
      {
        Id: 10,
        Number: 'BN23656326510',
        CreateTime: '2021/04/21 08:12:56',
        RegionName: 'XXXXX',
        Address: '一号研发楼'
      },
    ],
    second:[
      {
        Id: 11,
        Number: 'BN23656326565',
        CreateTime: '2021/04/21 08:12:56',
        RegionName: 'XXXXX',
        Address: '一号研发楼'
      },
      {
        Id: 12,
        Number: 'BN23656326566',
        CreateTime: '2021/04/21 08:12:56',
        RegionName: 'XXXXX',
        Address: '一号研发楼'
      },
      {
        Id: 13,
        Number: 'BN23656326565',
        CreateTime: '2021/04/21 08:12:56',
        RegionName: 'XXXXX',
        Address: '一号研发楼'
      },
      {
        Id: 14,
        Number: 'BN23656326566',
        CreateTime: '2021/04/21 08:12:56',
        RegionName: 'XXXXX',
        Address: '一号研发楼'
      },
      {
        Id: 15,
        Number: 'BN23656326565',
        CreateTime: '2021/04/21 08:12:56',
        RegionName: 'XXXXX',
        Address: '一号研发楼'
      },
      {
        Id: 16,
        Number: 'BN23656326566',
        CreateTime: '2021/04/21 08:12:56',
        RegionName: 'XXXXX',
        Address: '一号研发楼'
      },
      {
        Id: 17,
        Number: 'BN23656326565',
        CreateTime: '2021/04/21 08:12:56',
        RegionName: 'XXXXX',
        Address: '一号研发楼'
      },
      {
        Id: 18,
        Number: 'BN23656326566',
        CreateTime: '2021/04/21 08:12:56',
        RegionName: 'XXXXX',
        Address: '一号研发楼'
      },
      {
        Id: 19,
        Number: 'BN23656326565',
        CreateTime: '2021/04/21 08:12:56',
        RegionName: 'XXXXX',
        Address: '一号研发楼'
      },
      {
        Id: 20,
        Number: 'BN23656326566',
        CreateTime: '2021/04/21 08:12:56',
        RegionName: 'XXXXX',
        Address: '一号研发楼'
      },
    ],
    pagenum: 1,
    pagesize: 10,
    total: 12,
    loading: true,
    finishedLoading: false,
    windowHeight:'',
    pageScroll: false
  },
  onLoad: function(option){
    // console.log("onLoad")
    let that = this
    wx.getSystemInfo({
      success: function(res){
        that.setData({
          windowHeight: res.windowHeight
        })
      }
    })
  },
  // 调用滚动条获取位置信息
  onPageScroll: function(e){
    // console.log(e)
    if(e&&this.data.pageScroll == false){
      this.setData({
        pageScroll: true
      })
    }
    let that = this
    if(that.data.detail[that.data.detail.length - 1].hide){
      return false
    }
    wx.getSystemInfo({
      success: function(res){
        that.setData({
          windowHeight: res.windowHeight + e.scrollTop
        })
      }
    })
    // console.log(this.data.windowHeight,e.scrollTop)
    var start = (that.data.pagenum - 1) * that.data.pagesize
    for(let i = start; i < that.data.detail.length; i++){
      if(that.data.detail[i].height <= that.data.windowHeight){
        that.data.detail[i].hide = true
      }else{
        that.data.detail[i].hide =  false
      }
    }
    that.setData({
      detail: that.data.detail
    })
    if(that.data.detail[that.data.detail.length-1].hide){
      if(that.data.detail.length<that.data.total){
        that.setData({
          pagenum: that.data.pagenum+1,
          loading: true
        })
        // 再次获取新的值
        var data = that.initial()
      }else{
        that.setData({
          finishedLoading: true
        })
      }
    }
  },
  onShow() {
    // console.log("onShow")
    // 等待 获取从后端传过来的值
    var data = this.initial()
  },
  async initial(){
    this.setData({
      pageScroll: false
    })
    const params = {
      PageNum: this.data.pagenum,
      PageSize: this.data.pagesize
    }
    await this.realIni(params)
  },
  getData(val){
    var that = this
    if(val.PageNum == 1){
      let list = that.data.first
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          that.setData({
            detail: that.data.first,
            loading: false
          })
          resolve(list)
        }, 2000)
      })
    }else{
      var list = utils.deepCloneArr(that.data.detail)//深拷贝副本
      list.push(...that.data.second)
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          that.setData({
            loading: false,
            detail: list
          })
          resolve(list)
        }, 3000)
      })
    }
  },
  async realIni(val) {
    const result = await this.getData(val)
    var that = this
    if(that.data.loading==false){
      var start = (that.data.pagenum - 1) * that.data.pagesize
      for(let i = start;i < result.length;i++){
        // console.log('#curr'+ i)
        wx.createSelectorQuery().select('#curr'+ i).boundingClientRect(function(rect){
          // console.log(rect,rect.top)
          result[i].height = rect.top
          // console.log(result[i].height , that.data.windowHeight)
          if(result[i].height <= that.data.windowHeight){
            result[i].hide = true
          }else{
            result[i].hide = false
          }
          if(i==(result.length -1)){
            that.setData({
              detail: result
            })
          }
        }).exec()
      }
    }
  }
})

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

// 对象深拷贝函数
const deepCloneArr = function(initalArr) {
  var list = [];
  list = JSON.parse(JSON.stringify(initalArr));
  return list;
}

// 将深拷贝函数暴露出去
module.exports = {
  deepCloneArr
}

index.json

{
  "usingComponents": {
    "mp-loading": "weui-miniprogram/loading/loading"
  }
}

index.wxml 

<view class="work {{pageScroll ? 'work-long': 'work-v'}}">
  <view class="work-header">
    <text>固定</text>
  </view>
  <view class="work-header-t">
  </view>

  <view class="lazyload">
    <view wx:for="{{detail}}" wx:key="index" class="undeal-item {{item.hide?'animation':''}}" id="curr{{index}}">
      <view wx:if="{{item.hide}}">
        <view class="undeal-item-info">
            <view class="undeal-item-info-oneline">
              <view class="undeal-item-info-left">
                <view class="undeal-item-info-left-label">编号</view>
                <view class="undeal-item-info-left-value">{{item.Number}}</view>
              </view>
              <view class="undeal-item-info-right">
                <text class="undeal-item-info-right-label">创建时间</text>
                <text class="undeal-item-info-right-value">{{item.CreateTime}}</text>
              </view>
            </view>
            <view class="undeal-item-info-twoline">
              <view class="undeal-item-info-left">
                <text class="undeal-item-info-left-label item-label-style">所属区域</text>
                <text class="undeal-item-info-left-value item-style">{{item.RegionName}}</text>
              </view>
              <view class="undeal-item-info-left">
                <text class="undeal-item-info-left-label item-label-style">目的地</text>
                <text class="undeal-item-info-left-value item-style">{{item.Address}}</text>
              </view>
            </view> 
        </view>
      </view> 
    </view>

    <mp-loading wx:if="{{!finishedLoading}}" class="loading-style" type="dot-gray" show="{{loading}}"></mp-loading>
    <text wx:else class="loading-txt">已经到底了...</text>
  
  </view>

</view>

index.css

.work{
  width: 100vw;
  height: auto;
  position: relative;
  background-color: #F2F2F2;
}

.work-v{
  height: 100vh;
}

.work-long{
  height: 100%;
}


.work-header{
  position: fixed;
  /* position: sticky ;  */
  top: 0;
  width: 100%;
  height: 120rpx;
  z-index: 1000;
  float: left;
  /* top: 0rpx; */
  left: 0;
  background-color: red;
  padding: 19rpx 40rpx 4rpx 40rpx;
}

.work-header-t{
  width: 100%;
  height: 120rpx;
}

.lazyload{
  width: 100%;
  height: 100%;
  background-color: pink;
  /* 失效 */
  /* height: calc(100vh - 120rpx); */
  /* overflow-y: scroll; */
  padding-bottom: calc(env(safe-area-inset-bottom) / 2);
}

.center{
  width: 100%;
  margin: 30rpx 10% 0;
  float: left;
  font-size: 26rpx;
  height: 200rpx;
  background-color: #fff;
}

.animation{
  animation: center 1s;
}

@keyframes center{
  from{
    transform: scale(0.5);
  }
  to{
    transform: scale(1);
  }
}

/* 基本信息 */
.undeal-item{
  height: 240rpx;
  margin-top: 10rpx;
  background-color: #fff;
}

.undeal-item-info{
  padding: 0 26rpx 0rpx 38rpx;
  display: flex;
  flex-direction: column;
}

.undeal-item-info-oneline,
.undeal-item-info-twoline{
  margin-top: 16rpx ;
  font-size: 22rpx;
  display: flex;
  justify-content: space-between;
}

.undeal-item-info-oneline{
  color: #237AE4;
}

.undeal-item-info-left{
  flex: 1;
  display: flex;
}

.undeal-item-info-right{
  flex: 1;
  display: flex;
}

.undeal-item-info-left-label{
  width: 110rpx;
}

.undeal-item-info-right-label{
  width: 120rpx;
}

.undeal-item-info-left-value,
.undeal-item-info-right-value{
  justify-content: flex-end;
}

.item-label-style{
  color: #666;
}

.item-style{
  color: #333;
}

/* loading样式 */
.loading-style{
  display: block;
  padding-top: 40rpx;
  padding-bottom: 40rpx;
}

.loading-txt{
  font-size: 20rpx;
  padding-bottom: 10rpx;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  background-color: lightgray;
}

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

因此，带来第二种方案

参考方案二：

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

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

lazyr.js

const utils = require('../../utils/utils')
const app = getApp()

Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    first:[
      {
        Id: 1,
        Number: 'BN23656326561',
        CreateTime: '2021/04/21 08:12:56',
        RegionName: 'XXXXX',
        Address: '一号研发楼'
      },
      {
        Id: 2,
        Number: 'BN23656326562',
        CreateTime: '2021/04/21 08:12:56',
        RegionName: 'XXXXX',
        Address: '一号研发楼'
      },
      {
        Id: 3,
        Number: 'BN23656326563',
        CreateTime: '2021/04/21 08:12:56',
        RegionName: 'XXXXX',
        Address: '一号研发楼'
      },
      {
        Id: 4,
        Number: 'BN23656326564',
        CreateTime: '2021/04/21 08:12:56',
        RegionName: 'XXXXX',
        Address: '一号研发楼'
      },
      {
        Id: 5,
        Number: 'BN23656326565',
        CreateTime: '2021/04/21 08:12:56',
        RegionName: 'XXXXX',
        Address: '一号研发楼'
      },
      {
        Id: 6,
        Number: 'BN23656326566',
        CreateTime: '2021/04/21 08:12:56',
        RegionName: 'XXXXX',
        Address: '一号研发楼'
      },
      {
        Id: 7,
        Number: 'BN23656326567',
        CreateTime: '2021/04/21 08:12:56',
        RegionName: 'XXXXX',
        Address: '一号研发楼'
      },
      {
        Id: 8,
        Number: 'BN23656326568',
        CreateTime: '2021/04/21 08:12:56',
        RegionName: 'XXXXX',
        Address: '一号研发楼'
      },
      {
        Id: 9,
        Number: 'BN23656326569',
        CreateTime: '2021/04/21 08:12:56',
        RegionName: 'XXXXX',
        Address: '一号研发楼'
      },
      {
        Id: 10,
        Number: 'BN23656326510',
        CreateTime: '2021/04/21 08:12:56',
        RegionName: 'XXXXX',
        Address: '一号研发楼'
      },
    ],
    second:[
      {
        Id: 11,
        Number: 'BN23656326565',
        CreateTime: '2021/04/21 08:12:56',
        RegionName: 'XXXXX',
        Address: '一号研发楼'
      },
      {
        Id: 12,
        Number: 'BN23656326566',
        CreateTime: '2021/04/21 08:12:56',
        RegionName: 'XXXXX',
        Address: '一号研发楼'
      },
      {
        Id: 13,
        Number: 'BN23656326565',
        CreateTime: '2021/04/21 08:12:56',
        RegionName: 'XXXXX',
        Address: '一号研发楼'
      },
      {
        Id: 14,
        Number: 'BN23656326566',
        CreateTime: '2021/04/21 08:12:56',
        RegionName: 'XXXXX',
        Address: '一号研发楼'
      },
      {
        Id: 15,
        Number: 'BN23656326565',
        CreateTime: '2021/04/21 08:12:56',
        RegionName: 'XXXXX',
        Address: '一号研发楼'
      },
      {
        Id: 16,
        Number: 'BN23656326566',
        CreateTime: '2021/04/21 08:12:56',
        RegionName: 'XXXXX',
        Address: '一号研发楼'
      },
      {
        Id: 17,
        Number: 'BN23656326565',
        CreateTime: '2021/04/21 08:12:56',
        RegionName: 'XXXXX',
        Address: '一号研发楼'
      },
      {
        Id: 18,
        Number: 'BN23656326566',
        CreateTime: '2021/04/21 08:12:56',
        RegionName: 'XXXXX',
        Address: '一号研发楼'
      },
      {
        Id: 19,
        Number: 'BN23656326565',
        CreateTime: '2021/04/21 08:12:56',
        RegionName: 'XXXXX',
        Address: '一号研发楼'
      },
      {
        Id: 20,
        Number: 'BN23656326566',
        CreateTime: '2021/04/21 08:12:56',
        RegionName: 'XXXXX',
        Address: '一号研发楼'
      },
    ],
    query:'',
    pagenum: 1,
    pagesize: 10,
    total: 20,
    loading: true,
    finishedLoading: false,
    recycleList: [],
    // 查询的触发标志
    flag: '',
    windowHeight: '',
    areaInfo: {},
    currentStatus: 0,
    pageScroll: false

  },
  lifetimes: {
    attached: function () {
      
      this.setData({
        pagenum: 1,
        recycleList: [],
        loading: true,
        finishedLoading: false
      })
      var that = this
      wx.getSystemInfo({
        success: function(res){
          that.setData({
            windowHeight: res.windowHeight
          })
        }
      })
   
    },
    ready: function(){
      console.log("ready")
      var inidetail = this.initial()
    },
    moved: function () { 

    },
    detached: function () { 

    },
  },

  /* 组件的方法列表 */
  methods: {
    async initial(){
      const params = {
        PageNum: this.data.pagenum,
        PageSize: this.data.pagesize
      }
      await this.realIni(params)
    },
    getData(val){
      var that = this
      if(val.PageNum == 1){
        let list = that.data.first
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            that.setData({
              loading: false,
              recycleList: that.data.first
            })
            
            resolve(that.data.recycleList)
          }, 2000)
        })
      }else{
        // var list = utils.deepCloneArr(that.data.detail)//深拷贝副本
        // list.push(...that.data.second)
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            let list =  utils.deepCloneArr(that.data.recycleList)
            list.push(...that.data.second)
            that.setData({
              loading: false,
              recycleList: list
            })
            resolve(list)
          }, 3000)
        })
      }
    },
    async realIni(val) {
      const result = await this.getData(val)
      console.log(result)
    },
    getScroll:function(e){
      let that = this
      if(that.data.recycleList.length<that.data.total){
        that.setData({
          pagenum: that.data.pagenum+1,
          loading: true
        })
        // 再次获取新的值
        var data = that.initial()
      }else{
        if(!that.data.finishedLoading){
          that.setData({
            finishedLoading: true
          })
        }
      }
    },
  }
})

lazyr.json

{
  "component": true,
  "usingComponents": {
    "mp-loading": "weui-miniprogram/loading/loading"
  }
}

lazyr.wxml

<view class="work">
  <view class="work-header-f">
    <view class="work-header">
      <text>固定</text>
    </view>
    <view class="work-header-t">
    </view>
  </view>

  <view wx:if="{{ total > 0}}">
    <scroll-view scroll-y="true" style='height:calc(100vh - 130rpx)' 
      class="{{ total>pagesize? '' : 'lazyload'}}"
      bindscrolltolower="getScroll">
      <view wx:for="{{recycleList}}" wx:key="index" class="undeal-item list_item_box" id="undeal{{id}}">
        <view class="undeal-item-info">
          <view class="undeal-item-info-oneline">
            <view class="undeal-item-info-left">
              <view class="undeal-item-info-left-label">编号</view>
              <view class="undeal-item-info-left-value">{{item.Number}}</view>
            </view>
            <view class="undeal-item-info-right">
              <text class="undeal-item-info-right-label">创建时间</text>
              <text class="undeal-item-info-right-value">{{item.CreateTime}}</text>
            </view>
          </view>
          <view class="undeal-item-info-twoline">
            <view class="undeal-item-info-left">
              <text class="undeal-item-info-left-label item-label-style">所属区域</text>
              <text class="undeal-item-info-left-value item-style">{{item.RegionName}}</text>
            </view>
            <view class="undeal-item-info-left">
              <text class="undeal-item-info-left-label item-label-style">目的地</text>
              <text class="undeal-item-info-left-value item-style">{{item.Address}}</text>
            </view>
          </view> 
        </view>
      </view>
      <mp-loading wx:if="{{!finishedLoading}}" class="loading-style" type="dot-gray" show="{{loading}}"></mp-loading>
      <text wx:else class="loading-txt">已经到底了...</text>
    </scroll-view>
  </view>

  <view wx:else class="nodatab {{currentStatus == 0? '': 'lazyload-p'}}">
    <text>暂无内容</text>
  </view>

</view>

lazyr.wxss

.work{
  margin-top: 0rpx;
  height: 100vh;
  background-color: lightgray;
}

.work-header{
  width: 100%;
  height: 120rpx;
  position: fixed;
  z-index: 1000;
  float: left;
  top: 0rpx;
  left: 0;
  background-color: red;
  padding: 19rpx 40rpx 4rpx 40rpx;
}

.work-header-t{
  width: 100%;
  height: 120rpx;
}

.lazyload{
  height: 100% !important;
  width: 100%;
  padding-bottom: calc(env(safe-area-inset-bottom) / 2);
}

/* 基本信息 */
.undeal-item{
  width: 100%;
  height: 240rpx;
  margin-top: 10rpx;
  background-color: #fff;
}

.undeal-item-info{
  padding: 0 26rpx 0rpx 38rpx;
  display: flex;
  flex-direction: column;
}

.undeal-item-info-oneline,
.undeal-item-info-twoline{
  margin-top: 16rpx ;
  font-size: 22rpx;
  display: flex;
  justify-content: space-between;
}

.undeal-item-info-oneline{
  color: #237AE4;
}

.undeal-item-info-left{
  flex: 1;
  display: flex;
}

.undeal-item-info-right{
  flex: 1;
  display: flex;
}

.undeal-item-info-left-label{
  width: 110rpx;
}

.undeal-item-info-right-label{
  width: 120rpx;
}

.undeal-item-info-left-value,
.undeal-item-info-right-value{
  justify-content: flex-end;
}

.item-label-style{
  color: #666;
}

.item-style{
  color: #333;
}

/* loading样式 */
.loading-style{
  display: block;
  padding-top: 40rpx;
  padding-bottom: 40rpx;
}

.loading-txt{
  font-size: 20rpx;
  padding-bottom: 10rpx;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  background-color: lightgray;
}

微信小程序 - 最新详细实现列表上拉懒加载及“到底了“功能示例，数据列表下拉滑动页面触底后请求接口懒加载数据，自动计算分页/总条数、判断分页懒加载是否继续请求接口数据，以及数据没有了底部提示用户没有了
王佳斌
08-18 4017
微信小程序，vue2，vue3，列表，懒加载，触底加载，上拉页面触发加载，列表懒加载如何判断是否还需要继续请求接口，如何知道数据加载已经没有了停止继续请求，分页判断，列表滚动触底更新实现，页面滚动到底部后请求数据填充到data中，小程序上拉加载和下拉刷新，如何分页加载数据，实现上拉加载功能示例加载更多数据/触底加载/点击加载更多数据，数据分页请求，onReachBottom()，不生效，不触发的情况，列表下拉加载判断是否到底了，我是有底线的，到底啦，自动计算，用户滑动屏幕加载数据功能，滚动条触底，如何通过小
xiaoxiaoxiao_lazyload-实现微信小程序图片懒加载特效.zip
09-23
数据接口:https://api.getweapp.com/vendor/lightstao/searchkeyhttps://api.getweapp.com/vendor/lightstao/product/search微信小程序中，懒加载特效让人头疼不已，因为小程序完全没法操作dom，所以位置的操作在小程序中，变得极其的难~~先看特效：我们将其拆分为如下几个步骤进行讲解~~1）如何获取图片的位置高度先看一张图：通过上图可以知道，图片位置高度其实可以通过img.height margin值算出。js代码：arrHight[i] = Math.floor(i/2)*(img.height   margin-bottom);为何是Math.floor(i/2)呢，因为同一排两张图片高度一样，比如i=0和i=1，通过Math.floor得出值都为0，所以可以保证同一排的两张图片位置高度是同一个值。2）替换默认图片先看效果图片：wxml代码：<image src="{{arr[index] ? productArr[index].Image : 'default.jpg'}}"></image>思路很明显，一开始arr[index]中都是false，所以默认都是default图片但是随着往下移动，有些arr[index]的值变为true，所以替换默认图片js代码：for (var i = 0; i < this.data.productArr.length; i ) {   if (arrHight[i] < scrollTop) {       if (arr[i] == false) {           arr[i] = true;       }   } }思路相当清晰，无需多言~~3）懒加载中渐显特效先看效果：wxss代码：.product_image{   opacity: 0;   width: 100%;   height: 70%;   transition: opacity 1s linear 2s; } .loaded{     opacity: 1; }其实就是opacity的一个过渡动画而已，so easy~~作者：小小小是我
小程序懒加载技术解析
BLUESKYHOST的博客
09-04 351
wxml <view class="content"> <block wx:key="{{img}}" wx:for="{{img}}"> <view class="pic-list"> //listIndex大于item.index时，图片显示 <image src="{{ listIndex > index ?...
微信小程序 懒加载
qq_41709082的博客
02-21 668
微信小程序 懒加载 1.需要使用到 wx小程序中的 createIntersectionObserver ， relativeToViewport ，observe 等一系列 API ，API使用方法详情 官网: https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createIntersectionObserver.html...
微信小程序-懒加载
Etherege_x的博客
04-12 938
微信小程序基于Json-server-懒加载 懒加载 - 一次请求5条数据，触底再次请求 current:1, //定义当前页数 total:0, //定义总数据条数 wx.request({ // 首次请求商品列表 url: 'http://localhost:3000/goods?_page=1&amp;_limit=5', success:(res)=>{ ...
小程序---懒加载
xiasnn的博客
11-11 2537
因为列表页的图片太多，导致性能降低,所以决定用懒加载优化一下。所谓懒加载，就是图片没有显示的时候用占位图，等到显示的时候，将展位图改成真正要展示的图片。 一、onPageScroll（监听页面滚动） 提到懒加载，第一个想到的当然是onPageScroll啦。 首先，选一张占位图，并且在data中声明一下图片的高度和一个跟列表长度一样的false数组（这边为什么全部是false？因为要让图片全部先用占位图占着，等到显示的时候改为true）。 data: { damoHeight :'110',
小程序瀑布流组件实现翻页与图片懒加载
10-15
【小程序瀑布流组件实现翻页与图片懒加载】是指在微信小程序中开发一个瀑布流布局的组件，同时具备分页加载和图片延迟加载的功能。瀑布流布局，又称瀑布流式布局，常见于电商等需要展示大量图片信息的场景。它的特点...
详解性能更优越的小程序图片懒加载方式
10-18
性能更优越的小程序图片...此外，作者还提到了自己封装的一个简单库，方便开发者调用，以实现更高级的图片懒加载功能。通过学习和应用这些更优越的图片懒加载方式，开发者能够为用户提供更流畅、更快速的页面加载体验。
小程序实现图片模糊预加载--超详情教程
03-29
最近在做的小程序项目设计大量图片的展示，小程序已经提供了图片的懒加载功能，但是由于图片本身比较大加上要展示的图片比较多，如何以一个比较友好的方式展示未加载完成的过程就是一个必须解决的问题了。...
微信小程序组件集合图片上传裁剪上划刷新图片懒加载
08-10
通过以上技术，开发者可以构建出具有图片上传、裁剪、上划刷新和图片懒加载等功能的微信小程序应用，为用户提供流畅且丰富的交互体验。在实际开发过程中，需要注意性能优化，如合理使用Promise、避免阻塞主线程、...
小程序实现滚动加载（懒加载）
2303_76218115的博客
04-10 4760
小程序是一项很受欢迎的技术，随着其能力的不断增强，越来越多的人开始使用小程序来完成各种任务。当我面面临一个页面有非常多的数据时，该如何处理呢，显然一次性全部加载完，会非常消耗性能的，为了解决这些问题从而出现了一种叫滚动加载的数据处理方式，也被称为“无限滚动”或“懒加载”，它可以使你的页面在不刷新的情况下连续加载更多数据。在本文中，我们将讨论如何在小程序中实现滚动加载。
小程序懒加载
qq_62700434的博客
10-03 417
this是指向的意思，就是指向文件然后跟他请求数据this.renderSwiper()指向renderSwiper请求数据。//...的意思就是保留前面的数据不做更改，（this.data.goodlist）与(res)进行比较。//good里面读取到（前后端交互）里，每次读取this指向的代码个，且最多读取（）后端交互数据）次。
微信小程序 懒加载
热门推荐
weixin_38047955的博客
07-03 2万+
今天给大家带来小程序懒加载的办法，来提高页面的体验性。 理念：加入滚动，当页面滚动的时候计算列表数据的高度来判断该区域数据图片是否加载显示 1.首先我们要在wxml要显示的列表里加入滚动条 然后。。。 wxml: <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="
微信小程序实现图片懒加载的4种方案
笔记、经验、日常分享
03-22 3976
可以创建一个自定义组件，将图片的 URL 和是否显示图片的状态封装在组件内部，然后在页面中使用自定义组件来实现图片的懒加载。创建一个自定义组件，例如lazy-image。在自定义组件的 WXML 文件中，使用 image 组件来显示图片，并使用 wx:if 条件渲染来判断图片是否需要显示。
小程序 列表懒加载数据
最新发布
qq_31356861的博客
07-31 401
小程序 列表懒加载数据。
小程序入坑记：懒加载
03-06 765
小程序可以说是非常火热了，开发周期短，页面简洁，数据控制方便，可以说结合了三大框架的特点 小程序的目录结构： 页面以index为例 utils：工具类目录，供全局调用。在utils中封装一个tools工具类（axios获取请求） class Tools { constructor() { } axios(method, url, data) { return new...
小程序的（页面懒加载、下拉刷新、上拉加载更多以及页码结合）
ch2362710931的博客
08-02 933
在页面中可以使用navigator来进行跳转navigator标签中可以写内容也可以进行循环，在生命周期函数–监听页面加载(onLoadfunction(options){})中options存放的一般为页面传过来的id或者item值并且根据请求接口的方法在生命周期函数–监听页面加载中写入wx.request({url"详情页的接口数据"接收过来的数据通过success(res)=>{}函数来进行渲染进data中的对象中})如果接收过来的对象中有div标签种类的就使用小程序渲染富文本标签中进行接收。...
小程序图片懒加载
weixin_42593599的博客
09-19 498
Page({ data:{ // text:"这是一个页面" hidden: false, //搜索名称 searchName: null, //pageindex pageIdx: 1, //产品列表 productArr:[], clientHeight:0, arr:[], arrHight:[] }, onLoad:function(...
小程序图片懒加载实现与完美方案
本文档主要介绍了如何在微信小程序中实现图片懒加载功能，以提高用户体验和页面性能。图片懒加载是一种常见的前端优化技术，它确保只有当用户滚动到图片所在的可视区域时，才会加载图片，从而减少初始页面加载时间。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值