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. chrome插件 - Manifest文件中的 background

    在Manifest中指定background域可以使扩展常驻后台. background可以包含三种属性,分别是scripts.page和persistent. 如果指定了scripts属性,则Chr ...

  2. java多线程和Calendar(日历)常用API

    一.进程与线程 进程是一个可执行的程序一次运行的过程 线程是程序中的一个执行流 一个线程只能属于一个进程,而一个进程可以有多个线程,但至少有一个主线程 二.Calendar import java.u ...

  3. 【error】'isnan' was not declared in this scope

    error问题 'isnan' was not declared in this scope isnan在cmath中被取消宏定义: // These are possible macros impo ...

  4. [LeetCode&Python] Problem 896. Monotonic Array

    An array is monotonic if it is either monotone increasing or monotone decreasing. An array A is mono ...

  5. 测试那些事儿—Linux搭建环境基础步骤

    Linux搭建环境基础步骤 准备工具:SecureCRT工具(Linux工具,连接服务器)FTP传输工具(上传文件到服务器)MySQL连接工具 安装包(以下文件均为压缩包rpm格式和tar.gz):J ...

  6. XXS level4

    (1)查看PHP源代码 <?php ini_set("display_errors", 0); $str = $_GET["keyword"]; $str ...

  7. python简单实现目录对比

    [root@localhost python]# cat dircmptest.py #!/usr/bin/python import filecmp path1="/root/python ...

  8. linux后台运行之&和nohup区别,模拟后台守护进程

    先来看一下&的使用 root@BP:~# cat test.sh #!/bin/bash while true do echo "linux">/dev/null d ...

  9. Arrays类的使用

    定义 : 此类包含用来操作数组(比如排序和搜索)的各种方法.使用需要导入import java.util.Arrays;包 1.sort方法(对数组进行升序排列) public class Array ...

  10. oracle-pl/sql之二

    java 触发器 包 你可以编写用户定义的函数(用pl/sql,java,c)来提供在sql中或sql内置函数中不可用的功能 有时,我们会发现有些功能通过PL/SQL完成会很麻烦,而通过C/C++语言 ...