微信小程序懒加载测试

wxml

<view wx:if="{{list.length==0}}" style="width: 100%;height: 100px; text-align: center;line-height: 100px;color: #bfbfbf;">空空如也</view>
<view  wx:for="{{list}}" wx:key="item"><image src="{{arry[index] ? 'http://cdn.lorine.cn/'+list[index].art_logo: ''}}" class="{{arry[index] ?'Action':''}}"></image><view>[{{item.art_author}}]{{item.art_title}} ￥{{item.art_price}}</view>
</view>

wxss

image {opacity: 0;width: 100%;height: 300px;transition: opacity 0.4s linear 0.4s;}.Action {opacity: 1;}

 data: {list:[],id:1,damoHeight: '150',//初始高度arry: [false, false, false, false],},onPageScroll: function (res) {var _this = this;var str = parseInt(res.scrollTop / _this.data.damoHeight);_this.data.arry[str] = true;_this.setData({arry: _this.data.arry})},//数据getList(id){var token = wx.getStorageSync('token')wx.request({url: 'http://www.test.com/api/art/list?id='+id+'&token='+token,success:res=>{var list = res.data.data//console.log(list)this.setData({list})}})},onLoad: function (options) {var id = options.id;//console.log(id)this.setData({id})this.getList(id)let _this = this;let num = Math.ceil(wx.getSystemInfoSync().windowHeight / 300);for (let i = 0; i < num; i++) {_this.data.arry[i] = true;};this.setData({arry: _this.data.arry})},

微信小程序懒加载测试相关推荐

微信小程序web-view加载网页字体非常小的问题
一.问题如下图所示,微信小程序web-view加载网页的字体非常小: 二.问题解决,在网页中加上 <meta name=viewport content="width=device-w ...
微信小程序分页加载列表
微信小程序分页加载列表: 项目开发时很多页面都需要用到分页加载列表,为了方便,自己封装了分页加载列表组件,下拉刷新列表,滑动至底部,加载更多组件界面: 可以扫码查看是否符合自己的需求 wxml: & ...
微信小程序分包加载，分包加载的优势
微信小程序分包加载: 有时候我们的小程序太大,首次打开小程序的时候会比较慢,可以进行分包处理,按照功能的划分,拆分成几个分包,让用户在操作小程序的时候按需下载资源(用户在进入某些页面的时候才去下载相应 ...
微信小程序，Eror代码包大小为12497kb,上限为 2048 kb,请删除文件后重试？微信小程序分包加载
微信小程序如何解决预览超过2M的问题?微信小程序分包加载在微信小程序开发过程中有个问题让人很头疼,就是预览的项目不能超过2M,我们的项目通常都会超过这个大小限制.那到底怎么解决呢?其实官方给出了解决 ...
微信小程序列表加载动画示例
微信小程序列表加载动画微信小程序列表加载动画示例实现思路什么是动画? 导航栏设置列表动画加载完整代码demo 微信小程序列表加载动画示例初学微信小程序开发,记录一下.网上找了很久这种效果, ...
微信小程序上传视频到服务器太慢,微信小程序视频播放加载很慢
- 当前 Bug 的表现(可附上截图) - 预期表现 - 复现路径 - 提供一个最简复现 Demo 微信小程序视频播放加载很慢,一直转圈,3分钟后才能播放,而且播放很卡,加了带宽和cdn也没有效果,官 ...
微信小程序踩坑日记-微信小程序首次加载样式错乱问题
微信小程序踩坑日记-微信小程序首次加载样式错乱问题在实际开发项目中,遇到了个棘手的问题,就是在某些因素下,进入小程序发现有些样式发生偏移.错乱等问题问题原因:-未知(估计是组件的问题) ↓ 解决办 ...
微信小程序怎么取mysql_微信小程序如何加载数据库真实数据？
微信小程序要加载网站数据库里面的真实数据,有一个硬性的要求,就是你的网站域名必须是https协议才行,要不然你第一步服务器域名配置你都通过不了,小编我也是前不久申请的https://www.100tx ...
【愚公系列】2022年09月微信小程序-图片加载和全屏适配问题
文章目录前言一.图片加载二.适配机型实现全屏背景图前言在使用图片问题中可能会遇到各种各样的问题,比如图片加载不出来,图片显示在不同机型效果不同,图片加载展示问题等等. 微信小程序image相 ...

微信小程序懒加载测试

微信小程序懒加载测试相关推荐

最新文章

热门文章