uniapp中页面和scrollview两种滚动到顶部原来这么优雅

这篇具有很好参考价值的文章主要介绍了uniapp中页面和scrollview两种滚动到顶部原来这么优雅。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

uniapp滚动到顶部,前端uniapp常用功能学习,uni-app,前端,javascript,微信小程序,vue.js文章来源地址https://www.toymoban.com/news/detail-587428.html

页面

// 返回顶部
			getTotop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 100,
				});
			},
			//滚动监听
			onPageScroll(e) { //根据距离顶部距离是否显示回到顶部按钮
				this.flag = e.scrollTop > 650;
				// this.skuMaskInnerClass = "kr-animate animate-fast animate-fadeInUpBigGotop";
			},

scrollview

<scroll-view scroll-y="true" class="nft_info" @scrolltolower='scrolltolower' @scroll="getScroll"
			:scroll-top="scrollTop">

<scroll-view>


getTotop() {
				// this.scrolltops = 0;
				//优化版
				this.scrollTop = this.oldScrollTop;
				//当视图渲染结束 重新设置为0
				this.$nextTick(() => {
					this.scrollTop = 0
				});
			},
			// scroll-view 触发事件
			getScroll(event) {
				this.oldScrollTop = event.detail.scrollTop;
				// this.scrolltops = event.target.scrollTop;
				// if (event.target.scrollTop > 300) {
				// 	this.isTotop = true;
				// } else {
				// 	this.isTotop = false;
				// }
				this.flag = event.target.scrollTop > 300;
			},

到了这里,关于uniapp中页面和scrollview两种滚动到顶部原来这么优雅的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp 滚动页面到指定位置

    小程序业务中,通常会有用户点击某个按钮或者tab标签,然后页面滚动到相连内容位置 this.scrollTop = res.top;  这么写是因为我用了scroll-view   一般写法

    2024年02月12日
    浏览(41)
  • uniapp将页面滚动到目标位置

    这里分享其中两种方式,仅供参考~ 方式一:使用 pageScrollTo 方式二:使用 scroll-view 注意: 如果页面需要 下拉刷新 交互,此方式不适合。详情请看

    2024年02月11日
    浏览(84)
  • 记录--原来前端部署这么简单

    有个朋友说前端技能大家大部分都会,就是部署项目这一块经验都比较稀缺,一直很想学一下。所以在这里写一篇简单的从零开始部署前端项目的全过程,感兴趣的掘友们或者想自己搭建项目部署的可以看一下这篇。 首先我们需要进行环境搭建主要就是 服务器 和 nginx配置

    2024年02月05日
    浏览(56)
  • uniapp中页面滚动锚点位置及滚动到对应高度显示对应按钮

    可以把页面代码和组件代码放自己项目里跑一下 页面代码 吸顶按钮组件代码

    2024年04月11日
    浏览(35)
  • uniapp 禁止遮罩层下的页面滚动

    使用 @touchmove.stop.prevent=\\\"toMoveHandle\\\" 事件修饰符 若需要禁止蒙版下的页面滚动,可使用 @touchmove.stop.prevent=\\\"moveHandle\\\",moveHandle 可以用来处理 touchmove 的事件,也可以是一个空函数。将这个方法直接丢到弹窗的最外层 view 就好了,虽然在编译器上的滚轮依旧可以滚动,但真机环

    2024年02月11日
    浏览(47)
  • KMP算法原理原来这么简单

    我觉得这句话说的很好: kmp算法关键在于:在当前对文本串和模式串检索的过程中,若出现了不匹配,如何充分利用已经匹配的部分,来继续接下来的检索。 暴力解法就是两层for循环,每次都一对一的匹配,如果匹配错误就文本串开始位置加1,继续下一次 前缀表的作用就是

    2023年04月21日
    浏览(47)
  • 监听uniapp小程序页面滚动到底部实现数据加载

    使用微信小程序自带的生命周期事件:onReachBottom,可以监听到页面滚动到底部的时候。 修改获取数据的分页页数,配和uniapp组件加载更多,就可以实现下拉加载刷新的过程。 下面是示例 1.在data中初始化分页的页数  2.在监听到页面滚动到底部时,修改页数,调用获取数组的

    2024年02月12日
    浏览(39)
  • uniApp禁止遮罩弹窗下的页面滚动

    最近用 uniApp 开发一款软件,页面是可以滚动的长列表,自定义组件弹窗遮罩出来后,滑动屏幕,页面也跟着滚动。研究了网上的解决办法 在遮罩层的最外层的 view 元素中加入 @touchmove.stop.prevent=\\\"moveHandle\\\" 或 @catchtouchmove=\\\"moveHandle\\\" 亲有效,但不太理想,会导致弹窗和底层页面

    2024年02月14日
    浏览(49)
  • 物联网网关,原来是这么回事,感谢!

    《高并发系统实战派》-- 你值得拥有 物联网网关是连接物联网设备和互联网的重要桥梁,它负责将物联网设备采集到的数据进行处理、存储和转发,使其能够与云端或其他设备进行通信。物联网网关的作用是实现物联网设备与云端的无缝连接和数据交换。 不要物联网网关行

    2024年02月08日
    浏览(50)
  • 【uniapp】禁止遮罩层下的页面滚动解决办法

    不少朋友在日常工作中都会遇到需要自定义弹窗的时候,当开启弹窗后,却发现存在弹窗下的页面依旧可以被触发滚动的问题,以下是相关的解决方法。 根据是否打开的弹窗状态,对最外层 view 设置 height 和 overflow: 这个方法通过对页面设置高度来限制底层页面滚动的问题,

    2024年02月07日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包