uniapp 对于scroll-view滑动和页面滑动的联动处理方法
更新时间：2024年08月15日 09:37:53 作者：新生代农民工-小王八
这篇文章主要介绍了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页面滑动联动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了微信小程序实现banner图轮播效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-02-02
这篇文章主要为大家详细介绍了laydate.js日期时间选择插件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
JavaScript语句错误throw、try及catch实例解析
这篇文章主要介绍了JavaScript语句错误throw、try及catch实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-08-08
深入理解JavaScript Promise链式调用与错误处理机制
在JavaScript的异步编程中,Promise是一个非常重要的概念,它允许我们以链式的方式处理异步操作,使得代码更加清晰和易于管理,本文将通过一系列代码示例,深入探讨Promise的链式调用和错误处理机制,需要的朋友可以参考下2024-09-09
在 TypeScript 中，映射类型可以帮助我们避免编写重复的代码，它可以根据现有类型和定义的一些规则来创建新类型。本文我们就来看一下什么是映射类型以及如何构建自己的映射类型2022-08-08
本文将使用 canvas 创建一个躲避小行星游戏。另外将重点介绍的两个方面是：如何使用 JavaScript 来检测键盘输入，以及如何在游戏中使用和处理 HTML5 音频。希望你能够喜欢2022-08-08
这篇文章主要为大家详细介绍了JS实现商品筛选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要介绍了JavaScript队列数据结构详解，队列是一种先进先出的数据结构，队列中允许两种基础操作，也就是插入和删除，也就是入队和出队2022-07-07
输入有效信息时会有一些提示语，比如“请输入用户名”和“请输入密码”等语言，这篇文章就为大家介绍js实用技巧之输入框提示语句的实现方法，感兴趣的小伙伴们可以参考一下2016-07-07
JavaScript自动设置IFrame高度的小例子，需要的朋友可以参考一下2013-06-06
最新评论