javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > uniapp scroll-view页面滑动联动

uniapp 对于scroll-view滑动和页面滑动的联动处理方法

作者:新生代农民工-小王八

这篇文章主要介绍了uniapp 对于scroll-view滑动和页面滑动的联动处理方法,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧

需求

遇到一个需求

解决方案

这个时候可以做一个内页面滑动判断

<!-- scroll-y 做true或者false的判断是否滑动 -->
<view class="u-menu-wrap" style="background-color: #fff;">
					<scroll-view :scroll-y="data.isGo" scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="data.scrollTop"
					 :scroll-into-view="data.itemId">
					</scroll-view>
				</view>
//通过整个页面的滑动 来处理内页面是否滑动
 onPageScroll((e)=>{
	 // e.scrollTop 表示当前页面滚动的距离 单位px
	 console.log('页面滚动距离:', e.scrollTop);
	 if (e.scrollTop == 204) {
	 	data.isGo = true
	 } else {
	 	data.isGo = false
	 }
 })

效果图

商品列表参考代码 :src/pages/template/mallMenu/index2.vue · jry/uview-plus - 码云 - 开源中国 (gitee.com)

到此这篇关于uniapp 对于scroll-view滑动和页面滑动的联动处理的文章就介绍到这了,更多相关uniapp scroll-view页面滑动联动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文