动态实现瀑布流

动态实现瀑布流

1.首先获取动态高度

根据标签动态获取，首先需要封装

export default{
	getRect(selector){
		return new Promise((resolve) => {
			// uni.createSelectorQuery获取元素节点,小程序里wx.createSelectorQuery Vue里在元素上添加ref属性，使用$refs来获取到该元素
			let view = uni.createSelectorQuery().select(selector);
			view.fields({
				size: true,
				rect: true,
				scrollOffset:true
			}, (res) => {
				resolve(res);
			}).exec();
		})
	}
}

在main中说明

import Tool from '@/common/util/Tool.js'
Vue.prototype.$Tool = Tool

根据id动态获取

calScrollViewHeight() {
				this.$Tool.getRect("#nav").then(res => {
					console.log(res);
					this.oldHeight = res.top
					this.height = res.height
				})
				this.$nextTick(function() {
					// 循环 栏目category_
					for (let index in this.categoryList) {
						const category = this.categoryList[index]
						this.$Tool.getRect('#category_' + category.id).then(res => {
							category.top_height = res.top
							this.categoryList[index] = category
						})
					}
				})
			},

监听页面滚动

// 监听页面滚动,同时控制顶部tab现隐
			onPageScroll(e) {
				if (this.getMore) return;
				this.getMore = true;

				for (const index in this.categoryList) {
					const item = this.categoryList[index]
					if (e.scrollTop > item.top_height - this.screenHeight - 60) {
						this.$set(this, 'categoryCurrent', index)
					}
				}
				this.getMore = false;

				//显示导航条
				if (this.oldHeight < e.scrollTop + this.height) {

					this.is_block_category = true

				} else {

					this.is_block_category = false

				}
			}
		},

根据索引滑动到制定高度

categoryTabsChange(index) {
				this.categoryCurrent = index;

				switch (index) {
					case 0:
						//商品
						uni.pageScrollTo({
							scrollTop: this.categoryList[index].top_height - 98,
							duration: 100
						})
						break;

					case index:
						//详情
						uni.pageScrollTo({
							scrollTop: this.categoryList[index].top_height,
							duration: 100
						})
						break;
				}
			},