js 页面

Page({
data: {
realScrollTop: 0,//页面滚动距离
   driveHeight   //屏幕高度可初始化设置
},
scroll(e){
if(e.detail.scrollTop > this.data.realScrollTop){
this.setData({
realScrollTop: e.detail.scrollTop
});
}
}
});

  

wxmal页面

<scroll-view scroll-y="true" scroll-top="{{resetScrollTop}}" bindscroll="scroll" >
<image wx:if="{{realScrollTop+driveHeight*2 > (index*70)}}" src="{{item['img']}}"></image>  
<image wx:else src="{{item['bgm']}}"></image>
</scroll-view>

  

17行代码解决微信小程序图片延迟加载的更多相关文章

  1. 5行代码实现微信小程序图片上传与腾讯免费5G存储空间的使用

    本文介绍了如何在微信小程序开发中使用腾讯官方提供的云开发功能快速实现图片的上传与存储,以及介绍云开发的 5G 存储空间的基本使用方法,这将大大提高微信小程序的开发效率,同时也是微信小程序系列教程的视频 ...

  2. 微信小程序图片上传和裁剪

    本篇博客用于解决微信小程序图片裁剪问题 图片裁剪常用于头像选择和图片合成等. 图片裁剪解决方案: 目前网络上知名的微信小程序图片裁剪插件是we-cropper(文末有链接) 操作步骤:下载好we-cr ...

  3. 解决微信小程序安卓手机访问不到图片,无法显示图片

    关于微信小程序不显示图片 通病可能有以下几个可能性: 非本地图片:确定图片资源存在,copy 图片url再浏览器打开,确定图片资源存在且能正常访问 本地图片:确定相对路径或者绝对路径正确 微信小程序图 ...

  4. 微信小程序--图片相关问题合辑

    图片上传相关文章 微信小程序多张图片上传功能 微信小程序开发(二)图片上传 微信小程序上传一或多张图片 微信小程序实现选择图片九宫格带预览 ETL:微信小程序之图片上传 微信小程序wx.preview ...

  5. 微信小程序图片放大预览

    需求:当点击图片时,当前图片放大预览,且可以左右滑动 实现方式:使用微信小程序图片预览接口 我们可以看到api需要两个参数,分别通过下面的data-list和data-src来传到js中 wxml代码 ...

  6. 如何解决微信小程序界面适配问题-引用-生命周期回调函数-优化机制-样式引入

    如何解决微信小程序界面适配问题 .wxss page{ height: 100%; width:750rpx; } this.setData({ imageWidth: wx.getSystemInf ...

  7. 解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局,为啥到真机就是乱的

    解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局,为啥到真机就是乱的 .chart{ width: 100%; text-align: center; } .canvas{ ...

  8. 解决微信小程序登录与发布的一些问题

    解决微信小程序的问题 图片在电脑上显示但在手机上却无法显示的问题 要使用的是本地图片,不想把图片上传到网络再通过https的方式解决,解决方法如下: 1.image src中的图片地址对英文字母大小写 ...

  9. 解决微信小程序用 SpringMVC 处理http post时请求报415错误

    解决微信小程序用 SpringMVC 处理http post时请求返回415错误 写微信小程序时遇到的问题,这个坑硬是让我整了半天 wx.request请求跟ajax类似处理方法一致 小程序端请求代码 ...

随机推荐

  1. SQL注入之Sqli-labs系列第二十八关(过滤空格、注释符、union select)和第二十八A关

    开始挑战第二十八关(Trick with SELECT & UNION) 第二十八A关(Trick with SELECT & UNION) 0x1看看源代码 (1)与27关一样,只是 ...

  2. SFM(structure from motion)学习记录(一)

    visualSFM用法 添加图片 "File->Open Multi Images". 一次添加多幅图片 "SfM->Load NView Match&quo ...

  3. ios开发常用封装的实用方法

    #pragma mark 获取设备id + (NSString *)getDeviceId { NSString *identifierForVendor = [[UIDevice currentDe ...

  4. #366 A-C

    A. Hulk 题意是给你一个n 输出一个英文字符串,找下规律就发现 当(i!=n&&i%2==1) 输出的是 I hate that (注意大写) 当(i!=n&&i ...

  5. LG4238 【【模板】多项式求逆】

    前言 学习了Great_Influence的递推实现,我给大家说一下多项式求逆严格的边界条件,因为我发现改动一些很小的边界条件都会使程序出错.怎么办,背代码吗?背代码是不可能,这辈子都不会背代码的.理 ...

  6. Node学习笔记:建立TCP服务器和客户端之间的通信

    结构: socket是应用层和传输层的桥梁.(传输层之上的协议所涉及的数据都是在本机处理的,并没进入网络中) 涉及数据: socket所涉及的数据是报文,是明文. 作用: 建立长久链接,供网络上的两个 ...

  7. JS中map和foreach的区别以及some和every的用法

    一.原生JS forEach()和map()遍历 共同点: 1.都是循环遍历数组中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前 ...

  8. vm centos7中用NAT模式配置上网

    第一步:设置虚拟机的NAT相关网络设置:   点击5标致处的“NAT设置”会出现设置6标致处的网关.   第二部:设置操作系统网络设置,右击上图中9标致处的系统,点击设置   第三部:配置操作系统ip ...

  9. Docker网络解决方案-Flannel(转)

    转自https://www.cnblogs.com/kevingrace/p/6859114.html Docker跨主机容器间网络通信实现的工具有Pipework.Flannel.Weave.Ope ...

  10. 时间标准基础知识UTC和ISO8601

    过去世界各地原本各自订定当地时间,但随着交通和电讯的发达,各地交流日益频繁,不同的地方时间,造成许多困扰,于是在西元1884年的国际会议上制定了全球性的标准时,明定以英国伦敦格林威治这个地方为零度经线 ...