微信小程序瀑布流布局实现技巧

微信小程序瀑布流布局可以让我们在展示图片、商品等方面有更丰富的呈现方式。本文将从选取图片源、图片宽度处理、动态设置页面高度、滚动加载等几个方面为大家介绍微信小程序瀑布流布局的实现技巧。

一、选取图片源

在实现瀑布流布局时，必不可少的要素就是选取响应式图片。我们可以通过API调用网络上的图片，也可以在本地保存一定规格比例的图片，这样利用CSS设置大小可以自适应各种尺寸。举个例子，从淘宝开放平台接口调用商品信息，我们需要获取到每个商品的信息，其中最重要的信息就是商品图片的链接。根据链接我们可以抓取图片生成响应式图片，以最大程度上提高图片加载速度，提高用户体验。 下面是微信小程序使用API获取网络图片的实现代码： ``` wx.downloadFile({ url: 'https://example.com/图片链接', success: function (res) { if (res.statusCode === 200) { console.log('下载图片成功') return res.tempFilePaths } console.log('下载图片失败') } }) ```

二、图片宽度处理

在瀑布流布局中，每个图片的宽度要需要保持一致，而高度是根据图片的实际高度自动计算。因此在处理宽度时，需要考虑到图片的数量不一定是偶数，需要在保持宽度一致的情况下，让左右两侧的图片宽度比较接近，最好不要出现左边很窄，右边很宽的情况。 下面是图片宽度处理的示例代码: ``` const screenWidth = wx.getSystemInfoSync().screenWidth;// 获取屏幕宽度 const styleList = [] const widths = [100, 200, 300, 400]// 定义瀑布流每个item的宽度，这里取4个不同大小的宽度值 for (let i = 0; i < 50; i++) {// 在循环中计算每个item的宽度和位置 let tempStyle = '' if (i % 2 === 0) { const width = widths[Math.floor(Math.random() * widths.length)] tempStyle = `width: ${width}px;position: absolute;left: ${i % 2 === 0 ? screenWidth / 2 - width / 2 : screenWidth / 2}px;top: ${i / 2 * 200}px;` } else { const width = widths[Math.floor(Math.random() * widths.length - 1) + 1] tempStyle = `width: ${width}px;position: absolute;left: ${i % 2 === 0 ? screenWidth / 2 : screenWidth / 2 - width / 2}px;top: ${Math.ceil(i / 2 - 1) * 200}px;` } styleList.push(tempStyle) } console.log(styleList) ```

三、动态设置页面高度

瀑布流布局中，需要根据图片高度动态设置页面高度，避免出现空白或者重叠的情况。通过遍历图片高度获取每一列的高度，再取出高度最大的那一列作为页面高度。 下面是动态设置页面高度的示例代码： ``` let heightList = [] let column = 3 let index = 0 for (let i = 0; i < 50; i++) { wx.createSelectorQuery().select(`#item-${i}`).boundingClientRect(res => { heightList[index] = heightList[index] ? heightList[index] + res.height : res.height if (i === 49) {//最后一个元素，循环结束后设置页面高度 let max = heightList[0] for (let j = 0; j < heightList.length; j++) { if (heightList[j] > max) { max = heightList[j] } } let scrollTop = e.detail.scrollTop this.setData({ scrollTop: scrollTop, pageHeight: max * (Math.ceil(i / column)) }) } if ((i + 1) % column === 0) { index = 0 } else { index++ } }).exec() } ```

四、滚动加载

虽然瀑布流布局可以在页面上优美地展示出图片，但是由于图片的数量可能会很多，一次性全部加载也容易导致页面卡顿，甚至崩溃。因此采用滚动加载的方式，让用户在滚动页面到底部时再加载部分图片，这样就不会一下子把所有图片都加载出来。 下面是滚动加载的示例代码： ``` onPageScroll: function (e) { const scrollTop = e.scrollTop const windowHeight = wx.getSystemInfoSync().windowHeight const pageHeight = this.data.pageHeight if (scrollTop + windowHeight > pageHeight - 5) {//滚动到底部时，设置isLoadMore为true，加载新数据 if (!this.data.isLoadMore && this.data.hasMoreData) { this.setData({ isLoadMore: true }) wx.showLoading({ title: '加载中' }) setTimeout(() => { this.setData({ isLoadMore: false, list: this.data.list.concat([{ url: 'https://example.com/新的图片链接' }])// 这里添加新图片地址，可以结合API实现 }) wx.hideLoading() }, 2000) } } } ``` 至此，我们通过选取图片源、图片宽度处理、动态设置页面高度、滚动加载等方面为大家介绍了微信小程序瀑布流布局的实现技巧，希望对大家有所帮助。