微信小程序开发中瀑布流布局和图片懒加载

微信小程序开发中，瀑布流布局和图片懒加载是两个常用的功能。瀑布流布局可以用于展示图片、商品等等，可以实现页面的动态加载和展示。图片懒加载可以提高小程序的加载速度和性能，减少用户等待的时间。下面将详细介绍这两个功能的实现方法，并提供相应的代码案例。

一、瀑布流布局 瀑布流布局可以实现页面上多个块状元素的自适应布局，每个元素的高度可能不同，根据元素的高度自动调整位置。下面是一个使用瀑布流布局展示图片的案例。

1. 准备工作 首先，我们需要准备一组图片数据，这里简单起见，我们可以在代码中定义一个数组来保存图片的路径。

var imageData = [
  {src: 'image1.jpg', width: 300, height: 400},
  {src: 'image2.jpg', width: 400, height: 300},
  {src: 'image3.jpg', width: 350, height: 450},
  // ...
];

1. 创建页面 在小程序的页面文件中，我们可以使用<view>标签来创建一个瀑布流布局的容器。

<view class="waterfall-container">
  <!-- 这里将展示图片的代码放在一个循环中 -->
  <view wx:for="{{imageData}}" wx:key="{{index}}" class="waterfall-item">
    <!-- 在这里展示图片 -->
    <image src="{{item.src}}" mode="widthFix" />
  </view>
</view>

1. 添加样式 我们需要为瀑布流的容器和每个子元素设置相应的样式。

.waterfall-container {
  display: flex;
  flex-wrap: wrap;
}

.waterfall-item {
  width: 50%; /* 每个子元素占据一半的宽度 */
  margin-bottom: 20rpx;
}

1. 动态计算位置 最后，在小程序的页面逻辑文件中，我们可以使用wx.createSelectorQuery()方法来获取每个图片元素的高度，并动态计算每个子元素的位置。

Page({
  data: {
    imageData: []
  },
  onReady: function() {
    var that = this;
    wx.createSelectorQuery().selectAll('.waterfall-item').boundingClientRect(function(rects) {
      var data = that.data.imageData;
      rects.forEach(function(rect, index) {
        var item = Object.assign({}, data[index], {
          top: rect.top,
          left: rect.left
        });
        data[index] = item;
      });
      that.setData({
        imageData: data
      });
    }).exec();
  }
});

这样，就实现了一个简单的瀑布流布局，在页面加载完成后，图片元素的位置将自动调整。

二、图片懒加载 图片懒加载是指在页面滚动过程中，根据需要再加载图片，而不是一次性加载所有图片。这样可以减少页面的加载时间和数据传输量。下面是一个使用图片懒加载的案例。

1. 准备工作 同样，我们需要准备一组图片数据，并设置图片的占位符。

var imageData = [
  {src: '', placeholder: 'placeholder1.jpg', loaded: false},
  {src: '', placeholder: 'placeholder2.jpg', loaded: false},
  {src: '', placeholder: 'placeholder3.jpg', loaded: false},
  // ...
];

1. 创建页面 在小程序的页面文件中，我们可以使用<image>标签来创建一个图片元素，并设置图片路径和占位符。

<view class="image-container">
  <!-- 这里将展示图片的代码放在一个循环中 -->
  <image wx:for="{{imageData}}" wx:key="{{index}}" src="{{item.loaded ? item.src : item.placeholder}}" data-index="{{index}}" bindload="onImageLoad" class="lazy-image" mode="aspectFill" />
</view>

1. 添加样式 我们需要为图片元素设置相应的样式。

.image-container {
  position: relative;
}

.lazy-image {
  width: 100%;
  visibility: hidden;
}

.lazy-image-loaded {
  visibility: visible;
}

1. 图片懒加载逻辑 在小程序的页面逻辑文件中，我们可以监听页面滚动事件，并根据滚动位置判断是否加载图片。

Page({
  data: {
    imageData: []
  },
  onReady: function() {
    // 获取图片数据
    this.setData({
      imageData: imageData
    });
  },
  onImageLoad: function(e) {
    var index = e.currentTarget.dataset.index;
    var data = this.data.imageData;
    // 标记图片已加载
    data[index].loaded = true;
    this.setData({
      imageData: data
    });
  },
  onPageScroll: function(e) {
    var that = this;
    wx.createSelectorQuery().selectAll('.lazy-image').boundingClientRect(function(rects) {
      rects.forEach(function(rect, index) {
        var data = that.data.imageData;
        if (!data[index].loaded && rect.top - e.scrollTop < e.windowHeight) {
          // 加载图片
          data[index].loaded = true;
          that.setData({
            imageData: data
          });
        }
      });
    }).exec();
  }
});

这样，页面滚动时，只有当图片出现在视口内时才会加载，从而提高了小程序的加载速度和性能。

总结 以上就是关于微信小程序开发中瀑布流布局和图片懒加载的详细介绍和代码案例。瀑布流布局可以实现页面上多个块状元素的自适应布局，每个元素的高度可能不同，根据元素的高度自动调整位置。图片懒加载可以提高小程序的加载速度和性能，减少用户等待的时间。希望对你有帮助！