慕课热搜01

uniapp过滤器使用

创建一个过滤器：

在入口函数注册过滤器

// 注册过滤器
import * as filters from "./filters/index.js"

Object.keys(filters).forEach(key=>{
	Vue.filter(key,filters[key])
})

使用过滤器：

onPageScroll , uniapp监听滚动

钩子函数 onPageScroll 监听页面滚动高度，，，
uni.pageScrollTo({ scrollTop:130 }) : uniapp设置页面滚动高度

uniapp获取dom节点

// 在当前vue页面中查找
const query = uni.createSelectorQuery().in(this)
					query.selectAll(`.hot-list-item-${this.currentIndex}`).boundingClientRect((res)=>{
						// 这个res就是实际的dom节点
					}).exec()

swiper使用

swiper用到的方法：

• @animationfinish ： swiper每次切换都会有一次切换动画，，这个是在swiper自身切换动画完成后，执行
• @change ： 改变swiper执行的方法

swiper用到的属性：

• current： 当前swiper的序号，默认为0，，swiper默认展示序号为0的页面，，如果需要swiper展示其他序号页面，需要修改current属性

<swiper class="swiper" :current="currentIndex" :style="{height:currentSwiperHeight+'px'}"
			@animationfinish="onSwiperEnd"
			@change="onSwiperChange"
		>
			<swiper-item v-for="(tabItem,tabIndex) in tabData">
				{{tabIndex}}
				<view>
					<uni-load-more status="loading" v-if="isLoading"></uni-load-more>
					
					<block v-else>
						<hot-list-item v-for="(item,index) in listData[currentIndex]" :key="index"
							:class="'hot-list-item-'+tabIndex"
							:data="item"
							:ranking="index+1"
						></hot-list-item>
					</block>
				</view>
			</swiper-item>
		
		</swiper>

用到的uniapp组件

• uni-load-more : loading加载

考虑的问题

• swiper 和 tab切换的联动
• tab点击跟随滑动
• swiper加载数据动态计算高度