小程序标题的加载效果怎么做?

小程序标题的加载效果怎么做?,第1张

相对来说还是比较简单的.图片列表展示数据是一个数组,在后台请求回来数据时我们定义一个和图片列表数组长度一样的数组arr,里面的元素都是布尔值false;再定义一个数组arrHeight用于存放每个图片相对于顶部的高度值。通过滚动监听每个图片高度值是否小于滚动条高度,从而改变数值arr里对应的布尔值。然后页面的image组件通过对src设置三目运算来判断是展示默认图片还是实际图片。我也是即速应用里的即速问答摘抄过来的,ask.jisuapp.cn

里面涉及到的api我就不详说了,可以去小程序开发文档查具体用法。以下是具体代码:

html代码:

js代码:

注:第28行的延时实际上是等待image组件加载图片然后初始化获取单个图片高度,image组件有一个bindload属性,但是这个属性是有一个图片加载就会执行一次,在这里做获取就会获取N次,不利于性能优化

第50行的i/2是因为每行有两张图片,这两张的高度是一样的,所以Math.floor(i / 2),加10是我上下图片之间的margin值

第57行如果不加上  app.globalData.windowHeight 那效果就是一滚动加载的不是底部的两张图片而是顶部的两张图片,大家可以试一下效果

在此图片懒加载效果已实现,这里并不是滚动到了某张图片的位置然后向后台请求图片数据再加载出来,其实本质上图片早就已经全部加载了,只是通过滚动到位置再显示,达到懒加载的效果,希望能对你们有所帮助。

halo~大家好.最近使用uniapp开发了小程序,引入了框架为 uView .

商品详情页的图片,是采用富文本标签进行返回,但是考虑到网络优化,需要做一个图片的懒加载

先使用正则表达式,获取所有图片地址,然后push到richTextList数组中.

接下来使用uView的组件<u-image>进行循环渲染即可.

微信文件夹下image、image2是微信表情图片的缓存文件夹,emoji是表情,1a,32,8c为对方人名。

微信聊天记录中的表情图片、微信下载的表情包、收藏的表情图片都会自动存储到这2个文件夹内。

这些文件可以删除的,打不开是因为这些图片经过了加密处理,不能直接打开的,以防您手机被盗后存储卡被单独拿出导致您的个人信息被泄露。

扩展资料:

image组件默认宽度300px、高度225px 注2:image组件中二维码/小程序码图片不支持长按识别,仅在wx.previewImage中支持长按识别。

image图片的属性和类型说明:

src    String    图片资源地址,支持云文件ID(2.2.3起)  

mode    String    'scaleToFill' :图片裁剪、缩放的模式  

lazy-load    Boolean    false:图片懒加载。只针对page与scroll-view下的image有效    1.5.0  

binderror    HandleEvent:当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong'}  

bindload    HandleEvent:当图片载入完毕时,发布到 AppService 的事件名,事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/7819155.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-10
下一篇 2023-04-10

发表评论

登录后才能评论

评论列表(0条)

保存