微信小程序 懒加载
来源:互联网 发布:站点数据和格点数据 编辑:程序博客网 时间:2024/05/16 17:15
今天给大家带来小程序懒加载的办法,来提高页面的体验性。
理念:加入滚动,当页面滚动的时候计算列表数据的高度来判断该区域数据图片是否加载显示
1.首先我们要在wxml要显示的列表里加入滚动条
<scroll-view bindscroll="scroll" style="height:{{clientHeight}}px;" scroll-y="true"></scroll-view>
然后。。。
wxml:
<view class="row"><scroll-view bindscroll="scroll" style="height:{{clientHeight}}px;" scroll-y="true"><swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" class="newCourse_bann"> <block wx:for="{{imgUrls}}"> <swiper-item> <image src="{{item}}" class="newCourse_bann_img"/> </swiper-item> </block></swiper> <form bindsubmit="formSubmit" bindreset="formReset"><input type="text" class="search" name='search' placeholder="请输入关键字..." placeholder-style="color:#979797"/><button formType="submit" class="search_sub">搜索</button> </form><view class="mu_item_title"><view class="item_title_line"></view><view class="item_title_ctn"><view class="item_title_ctn_center"><image src="/we7_wxappdemo/resource/images/fire.png" alt="" class="mu_item_title_img"></image><text class="mu_item_title_txt">店铺推荐</text></view></view></view><view class="list_flex"><view class="list_flex_son" wx:for="{{list}}"><navigator url="../detail/detail?id={{item.id}}" hover-class="navigator-hover"><image class="list_flex_son_img product_image {{arr[index]? 'loaded':''}}" src="https://wechat.ixunluo.com/weishopcs/attachment/{{arr[index]?item.thumb:'images/default.jpg'}}"></image><view class="list_flex_son_title">{{item.title}}</view></navigator><view class="list_flex_son_row"><text class="sfsr_price">¥{{item.marketprice}}</text><text class="sfsr_tbprice">淘宝价:{{item.productprice}}元</text></view></view></view><!-- footer end--></scroll-view></view>
核心js代码:
//计算窗口高度 wx.getSystemInfo({ success: function(res) { self.setData({ clientHeight: res.windowHeight }); } })
//高度算法 var arr = []; var length = Array.from(res.data.data).length; var isD = length % 2 == 0 ? true : false ; var arrHight = []; for(var i = 0; i < length ; i++){ arr[i] = false; arrHight[i] = Math.floor(i/2)*(320/750)*520;
for (var i = 0; i < this.data.list.length; i++) { if (arrHight[i] < scrollTop) { if (arr[i] == false) { arr[i] = true; } } }
scroll: function(e){ var seeHeight = this.data.clientHeight; //可见区域高度 var arrHight = this.data.arrHight; var event = e; var scrollTop = event.detail.scrollTop; var arr = this.data.arr; // console.log(scrollTop) for (var i = 0; i < this.data.list.length; i++) { if (arrHight[i] < scrollTop) { if (arr[i] == false) { arr[i] = true; // arr[i*2] arr[i*2+1] } //n = i + 1; } //arr[i] = true; } this.setData({ arr : arr }) }
完整js:
var app = getApp();Page({ data: { GZtate: true, // 轮播 imgUrls: [ '/we7_wxappdemo/resource/images/lunbo1.jpg', '/we7_wxappdemo/resource/images/lunbo2.jpg', '/we7_wxappdemo/resource/images/lunbo3.jpg' ], indicatorDots: false, interval: 5000, duration: 1000, autoplay: true, // over list:[], clientHeight:0, arr:[], arrHight:[] },onLoad: function (options) { // 页面初始化 options为页面跳转所带来的参数 const self = this; wx.getSystemInfo({ success: function (res) { self.setData({ clientHeight: res.windowHeight }); } }) // console.log(options) var tarrHight = []; app.util.request({ 'url': 'entry/wxapp/list', data: { category: options.category ? options.category : '', }, 'cachetime': '30', success(res) { //console.log(res); self.setData({ list: res.data.data }) // var arr = []; var length = Array.from(res.data.data).length; var isD = length % 2 == 0 ? true : false; for (var i = 0; i < length; i++) { arr[i] = false; tarrHight[i] = Math.floor(i / 2) * (320 / 750) * 520; } self.setData({ arr: arr, list: Array.from(res.data.data), arrHight: tarrHight }) // console.log(self.data.arr) // }, }) for (var i = 0; i < self.data.list.length; i++) { if (tarrHight[i] < self.data.scrollTop) { if (arr[i] == false) { arr[i] = true; } } } // 上拉加载 //点击搜索按钮,触发事件 self.setData({ listPageNum: 1, //第一次加载,设置1 List: [], //放置返回数据的数组,设为空 isFromlist: true, //第一次加载,设置true listLoading: true, //把"上拉加载"的变量设为true,显示 listLoadingComplete: false //把“没有数据”设为false,隐藏 }) self.fetchlist(); },scroll: function (e) { //console.log(this.data); var seeHeight = this.data.clientHeight; //可见区域高度 var arrHight = this.data.arrHight; var event = e; var scrollTop = event.detail.scrollTop; var arr = this.data.arr; // console.log(scrollTop) for (var i = 0; i < this.data.list.length; i++) { if (arrHight[i] < scrollTop) { if (arr[i] == false) { arr[i] = true; // arr[i*2] arr[i*2+1] } //n = i + 1; } //arr[i] = true; } this.setData({ arr: arr, scrollTop:scrollTop }) },
效果图:
阅读全文
0 0
- 微信小程序 懒加载
- 微信小程序--图片懒加载
- 微信小程序 加载提示
- 微信小程序分页加载
- 微信小程序 加载网页 加载web-view
- 微信小程序 加载 HTML 标签
- 微信小程序ajax异步加载
- 微信小程序图片的加载
- 微信小程序图片的加载
- 微信小程序wxss加载动画
- 微信小程序 加载 HTML 标签
- 微信小程序--下拉流加载
- 微信小程序下拉加载更多
- 微信小程序--瀑布流加载
- 程序加载
- 微信小程序加载更多,点击查看更多
- 微信小程序如何加载本地图片
- 微信小程序入门五上滑加载下拉刷新
- 机器学习实战第三章——决策树(源码解析)
- python log取对数
- Java面试题(十)
- JS的内置对象(Date、String、Array、Math、Event)
- 文件格式之lmdb
- 微信小程序 懒加载
- CI中session的过期时间
- java.time.LocalDateTime
- Javascript手把手教你做商品放大镜效果
- C#网络编程(基本概念和操作)
- Centos7 vnc断电后黑屏问题解决方案
- java去除两个数组中相同的元素
- sphinx4的数据处理器的构建
- Leetcode--60. Permutation Sequence