17行代码解决微信小程序图片延迟加载
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行代码解决微信小程序图片延迟加载的更多相关文章
- 5行代码实现微信小程序图片上传与腾讯免费5G存储空间的使用
本文介绍了如何在微信小程序开发中使用腾讯官方提供的云开发功能快速实现图片的上传与存储,以及介绍云开发的 5G 存储空间的基本使用方法,这将大大提高微信小程序的开发效率,同时也是微信小程序系列教程的视频 ...
- 微信小程序图片上传和裁剪
本篇博客用于解决微信小程序图片裁剪问题 图片裁剪常用于头像选择和图片合成等. 图片裁剪解决方案: 目前网络上知名的微信小程序图片裁剪插件是we-cropper(文末有链接) 操作步骤:下载好we-cr ...
- 解决微信小程序安卓手机访问不到图片,无法显示图片
关于微信小程序不显示图片 通病可能有以下几个可能性: 非本地图片:确定图片资源存在,copy 图片url再浏览器打开,确定图片资源存在且能正常访问 本地图片:确定相对路径或者绝对路径正确 微信小程序图 ...
- 微信小程序--图片相关问题合辑
图片上传相关文章 微信小程序多张图片上传功能 微信小程序开发(二)图片上传 微信小程序上传一或多张图片 微信小程序实现选择图片九宫格带预览 ETL:微信小程序之图片上传 微信小程序wx.preview ...
- 微信小程序图片放大预览
需求:当点击图片时,当前图片放大预览,且可以左右滑动 实现方式:使用微信小程序图片预览接口 我们可以看到api需要两个参数,分别通过下面的data-list和data-src来传到js中 wxml代码 ...
- 如何解决微信小程序界面适配问题-引用-生命周期回调函数-优化机制-样式引入
如何解决微信小程序界面适配问题 .wxss page{ height: 100%; width:750rpx; } this.setData({ imageWidth: wx.getSystemInf ...
- 解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局,为啥到真机就是乱的
解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局,为啥到真机就是乱的 .chart{ width: 100%; text-align: center; } .canvas{ ...
- 解决微信小程序登录与发布的一些问题
解决微信小程序的问题 图片在电脑上显示但在手机上却无法显示的问题 要使用的是本地图片,不想把图片上传到网络再通过https的方式解决,解决方法如下: 1.image src中的图片地址对英文字母大小写 ...
- 解决微信小程序用 SpringMVC 处理http post时请求报415错误
解决微信小程序用 SpringMVC 处理http post时请求返回415错误 写微信小程序时遇到的问题,这个坑硬是让我整了半天 wx.request请求跟ajax类似处理方法一致 小程序端请求代码 ...
随机推荐
- 20165228 2017-2018-2 《Java程序设计》第3周学习总结
20165228 2017-2018-2 <Java程序设计>第3周学习总结 教材学习内容总结 编程语言 面向机器语言:机器能直接识别的语言, 其指令由特定的二进制码表示. 其中汇编语言是 ...
- [err]default argument given for parameter 3 of '***'
err ~/src/helper.cpp: In function ‘cv::Mat align_mean(cv::Mat, cv::Rect, float, float, float, float) ...
- [error]OpenCV Error: Assertion failed (ssize.width > 0 && ssize.height > 0) in resize, file modules/imgproc/src/resize.cpp, line 3289
error OpenCV Error: Assertion failed (ssize.width > && ssize.height > ) terminate call ...
- 【leetcode】7-ReverseInteger
problem: Reverse Integer 注意考虑是否越界: INT_MAX INT_MIN 32bits or 64bits 调整策略,先从简单的问题开始:
- Nginx反向代理与Backend直接配置长连接
使用了Nginx的反向代理配置如下: upstream test{ keepalive 1; server 192.168.1.63:4000; } server { listen 4000; ser ...
- BigDecimal的一些用法
在多功能计算器项目中,计算器和单位换算功能都要求要有20位的精确度,并且要支持超大数,因此double类型就完全不够看了(double类型最多支持16位有效数字,且最大值只支持10^308次方),最后 ...
- css实现三栏布局,两边定宽,中间自适应
1.利用定位实现 css代码如下: .box{overflow: hidden;height: 100px;margin: 10px 0;} .box>div{height: 100%;} #b ...
- day 016 面向对象---类与类的关系
---恢复内容开始--- 一 依赖关系(最轻的一种关系,在方法中引入另一个类的对象) class Elephant: def __init__(self,name): self.name=name ...
- Hive错误:Error: FUNCTION 'NUCLEUS_ASCII' already exists. (state=X0Y68,code=30000)
问题 初始化derby失败: [root@bigdata111 apache-hive-2.3.0-bin]# schematool -dbType derby -initSchemaSLF4J: C ...
- NET Core 实战 Dapper 扩展数据访问
NET Core 实战:基于 Dapper 扩展你的数据访问方法 一.前言 在非静态页面的项目开发中,必定会涉及到对于数据库的访问,最开始呢,我们使用 Ado.Net,通过编写 SQL 帮助类帮我们实 ...