1. 名称:
    xiaoxiaoxiao_lazyload
  2. 作者:
    站长老左
  3. 来源:
  4. 浏览:
    25409
  5. 下载:
    4956
  6. 最新更新:
    2016-12-18
  7. 收藏3


数据接口:


微信小程序中,懒加载特效让人头疼不已,因为小程序完全没法操作dom,所以位置的操作在小程序中,变得极其的难~~


先看特效:

blob.png



我们将其拆分为如下几个步骤进行讲解~~

1)如何获取图片的位置高度

先看一张图:

图片位置高度

通过上图可以知道,图片位置高度其实可以通过img.height + margin值算出。

js代码:

arrHight[i] = Math.floor(i/2)*(img.height + margin-bottom);

为何是Math.floor(i/2)呢,因为同一排两张图片高度一样,比如i=0和i=1,通过Math.floor得出值都为0,所以可以保证同一排的两张图片位置高度是同一个值。

2)替换默认图片

先看效果图片:

替换默认图片

wxml代码:

<image src="{{arr[index] ? productArr[index].Image : 'default.jpg'}}"></image>
  • 思路很明显,一开始arr[index]中都是false,所以默认都是default图片

  • 但是随着往下移动,有些arr[index]的值变为true,所以替换默认图片

js代码:

for (var i = 0; i < this.data.productArr.length; i++) {
  if (arrHight[i] < scrollTop) {
      if (arr[i] == false) {
          arr[i] = true;
      }
  }
}

思路相当清晰,无需多言~~

3)懒加载中渐显特效

先看效果:

渐渐显示特效

wxss代码:

.product_image{
  opacity: 0;
  width: 100%;
  height: 70%;
  transition: opacity 1s linear 2s;
}
.loaded{
    opacity: 1;
}

其实就是opacity的一个过渡动画而已,so easy~~



作者:小小小是我

共0 条评论
  1. 加载评论

评论内容:

发表评论
  1. 全部组件分类
  2. 瀑布流
  3. 示例
  4. 提示组件(ToolTip)
  5. 下拉刷新、上拉加载
  6. Toast
  7. 选项卡(tab)
  8. 图表
  9. 卡片切换
  10. 菜单
  11. 筛选
  12. 星级评分
  13. 选择器
  14. 滑动删除
  15. 手势密码
  16. Switch
  17. 搜索
  18. 游戏
  19. 弹幕
  20. 懒加载
  21. 布局
  22. 应用模仿
  23. Emoji
  24. 转盘抽奖
  25. 插件
  26. UI库
  27. 动画
  28. 下拉列表
  29. SnackBar
  30. HTML解析
  31. 日历
  32. 点餐小程序
  33. 购物效果
  34. 框架
  35. 渲染引擎
  36. 商城
  37. 吸顶停留
  38. 会议
  39. 分享
  40. 其他
最新评论