微信小程序下拉刷新

今天研究了一下小程序刷新的相关知识,我的需求UI如图所示(点击类目一,类目二刷新列表数据,类目固定在顶部不能滚动,只能滚动列表内容,底部是小程序首页的tab,先要使用微信自带的接口实现下拉刷新):

微信小程序下拉刷新

使用了几个方案,发现几个注意点需要注意一下:

方案一:整个布局只使用一个scroll-view,类目和列表放到该控件下,这种状态下刷新可以,但是类目不能固定在顶部

方案二:整个布局使用一个scroll-view,里面再嵌套使用scroll-view,这种状态下上拉幅度大的时候也会触发下拉刷新事件(估计是多个scroll-view引起的事件冲突)

方案三:不使用scroll-view,全都使用view,自己添加事件判断,显示自定义的loading动画(用户体验很差)

方案四:在方案三的基础上,写两个类目菜单,一个显示一个隐藏,隐藏的通过onPageScroll滚动的位置来控制其显示还是隐藏。