(小程序篇)8.图片懒加载

说明：利用小程序里面提供了createIntersectionObserver来实现监听目标元素与视窗的位置变化。

1.代码使用

wx.createIntersectionObserver(Object component, Object options)

2.实现分析

.wxml 图片标签

<image src='{{item.isshow? item.src : item.default}}' class='{{item.isshow? "active" : "default"}}'></image>

.wxss 展示样式

.default{
  transition: all .2s ease-in-out;
  opacity: 0;
}
.active{
  opacity: 1;
}

.js 数组

list:[{ 
    src: "https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3238317745,514710292&fm=26&gp=0.jpg", 
    isshow: false, 
    default: "/images/default/avatar.png"
}]

说明：通过判断isshow的状态显示默认图片还是需要加载的图片。

3.代码实现

说明：我这是在组件中实现的，这里调用是this.createIntersectionObserver() .js 组件js

// 组件的ready方法
ready(){
  let lazyList = this.data.lazyList  // 这是数组列表
  for (let i in lazyList){
    this.createIntersectionObserver().relativeToViewport({bottom: 20}).observe('.box-'+ i, (ret) => {
      if (ret.intersectionRatio > 0){
        lazyList[i].isshow = true 
      }
      this.setData({ // 更新数据
        lazyList
      })
    })
  }
}

.wxml 组件wxml

<block wx:for="{{lazyList}}" wx:key="index">
  <view class="box box-{{index}}"> 
    <view class="first">
      <image src='{{item.isshow? item.src : item.default}}' class='{{item.isshow? "active" : "default"}}'></image>
      <text>nickname</text>
    </view>
    <view class="desc">
      <view class="desc-intro">这是我的描述内容</view>
      <l-button>查看详情</l-button>
    </view>
  </view>
</block>

4.效果展示