小程序 WXS响应事件(超出两屏显示返回顶部按钮)

小程序 WXS响应事件(超出两屏显示返回顶部按钮)

两种解决办法:

view页面形式实现:

<wxs module="test" src="./test.wxs"></wxs> // 引入wxs<scroll-viewbindscroll="onPageUpdate"style='height:100%;'scroll-yscroll-with-animation="true" >
</scroll-view>
<!-- 返回顶部按钮 -->
<view bindtap="scrollTop" class="back-top-btn"><view class="back-top-btn-box"><text>回到</text><text>顶部</text></view>
</view>
Page({data: {windowHeight: app.globalData.windowHeight, // 屏幕高度},//滚动条监听onPageUpdate: (e) => {// 页面滚动超过两屏显示返回顶部if (e.scrollTop > this.data.windowHeight * 2) {this.setData({ isRoll: true })} else {this.setData({ isRoll: false})}},/*** 返回顶部*/scrollTop() {if (wx.pageScrollTo) {wx.pageScrollTo({ scrollTop: 0 })} else {wx.showModal({title: '提示',content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'})}}
})
.back-top-btn {position: fixed;bottom: 60rpx;right: 30rpx;
}

scroll-view形式实现

<wxs module="test" src="./test.wxs"></wxs>
<scroll-viewbindscroll="{{test.funcA}}"data-window-height="{{windowHeight}}"scroll-top='{{scrollTop}}'style='height:100%;'scroll-yscroll-with-animation="true" >
</scroll-view>
<!-- 返回顶部按钮 -->
<view bindtap="scrollTop" class="back-top-btn"><view class="back-top-btn-box"><text>回到</text><text>顶部</text></view>
</view>
var funcA = function (e, ins) {var scrollTop = e.detail.scrollTopvar windowHeight = e.currentTarget.dataset.windowHeight// 超出两屏显示返回顶部按钮if (scrollTop > windowHeight*2) {ins.selectComponent('.back-top-btn').setStyle({display:'block'})} else {ins.selectComponent('.back-top-btn').setStyle({display: 'none'})
}
module.exports = {funcA: funcA
}JS文件
Page({data: {windowHeight: app.globalData.windowHeight, // 屏幕高度},/*** 返回顶部*/scrollTop() {this.setData({scrollTop: 0});}
})
.back-top-btn {position: fixed;bottom: 60rpx;right: 30rpx;display: none;
}
app.js
onLaunch(options) {wx.getSystemInfo({success: (res) => {this.globalData.windowHeight = res.windowHeight;this.globalData.windowWidth = res.windowWidth;this.globalData.ratio = res.windowWidth / 375;this.globalData.rpx = Number((res.windowWidth / 750).toFixed(4));if (res.model.search('iPhone X') != -1) {this.globalData.isIphoneX = true;}if (res.platform == 'ios') {this.globalData.isIos = true;}},});
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/401624.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

BP网络识别26个英文字母matlab

wx供重浩&#xff1a;创享日记 对话框发送&#xff1a;字母识别 获取完整源码源工程文件 一、 设计思想 字符识别在现代日常生活的应用越来越广泛&#xff0c;比如车辆牌照自动识别系统&#xff0c;手写识别系统&#xff0c;办公自动化等等。本文采用BP网络对26个英文字母进行…

C#多线程写日志

由于程序是3层架构的&#xff0c;所有多线程记录日志成了比较棘手的问题&#xff0c;以前还真就没有在意过写日志的问题&#xff0c;认为不过是写文件罢了~~&#xff01;如今发现原来要实现文件共享&#xff0c;并且能够使多线程同时操作日志还不能相互冲突&#xff0c;真的很麻…

PWA(Progressive Web App)入门系列:Sync 后台同步

前言 当我们在一些地下停车场&#xff0c;或者在火车上、电梯等无法避免的信号不稳定的场所&#xff0c;使用网站应用处理一些表单操作或者上传数据的操作时&#xff0c;面临的将是网络连接错误的响应&#xff0c;使用户的操作白费。 而此刻 PWA 的 Sync API 就很好的解决了这…

PWA(Progressive Web App)入门系列:安装 Web 应用

前言 在传统的 Web 应用中&#xff0c;通常只能通过在浏览器的地址栏里输入相应的网址才能进行访问&#xff0c;或者把网页地址创建到桌面上通过点击&#xff0c;然后在浏览器里打开。 传统模式下&#xff0c;图标、启动画面、主题色、视图模式、屏幕方向等等都无法去自定义和…

「工具」IndexDB 版备忘录

前言 工作日常需要做一些备忘录&#xff0c;记录一些要做的事。在 Mac 上有使用系统的备忘录&#xff0c;但功能偏弱且文本格式调整不方便。再就是使用浏览器找专门的备忘录网站&#xff0c;功能是满足了&#xff0c;但是链路长&#xff0c;没有桌面软件直接。 所以最后干脆自…

「工具」PWA Manifest图标及 favicon.ico 生成工具

PWA 其中有一个能力就是把网站安装到系统桌面&#xff0c;以原生应用的体验来运行网站&#xff0c;使用户无需再找开浏览器输入网址进入网站&#xff0c;而是可以直接点击安装好的应用直接运行&#xff0c;给使网站访问缩短路径及增加网站的曝光度。 其中有一个问题就是需要生…

各种浏览器缓存浅析

前言 目前浏览器的缓存类型众多&#xff0c;HTTP Cache、Disk Cache、Memory Cache、ServiceWorker Cache、Push Cache 等等&#xff0c;这些缓存是如何产生的&#xff1f;命中优先级是怎么样&#xff1f;又该如何去使用它们&#xff1f; Disk Cache、Memory Cache Disk Cac…

[工具]TS 视频合并工具

简介 当下载 m3u8 资源时&#xff0c;通常产生的是多个 ts 视频文件&#xff0c;所以需要借助某些工具来将这些 ts 视频片段整合为一个视频文件。 本软件主要解决的就是这个问题&#xff0c;底层基于ffmpeg&#xff0c;可正常运行在 Windows 和 Mac 平台。不仅可以合并 ts 为单…

[会议分享]2020全球软件大会分享-PWA在项目中的最佳实践

大会地址&#xff1a;https://www.bagevent.com/event/1233659# PPT下载&#xff1a;https://download.csdn.net/download/lecepin/12871373

「浏览器插件」非常好用的JSON-View

Chrome 商店&#xff1a;地址 下载地址&#xff1a;地址 Github&#xff1a;https://github.com/lecepin/lp-json-view 查看/格式化 二合一。 功能 自动识别 JSON 内容&#xff0c;并在页面右下角创建切换按钮。支持展开/折叠节点。支持全部展开、全部折叠、展开一二三层节点…

Github Action 快速构建 Electron 应用

前言 在开发 Electron 应用时&#xff0c;比较耗时的部分应该是构建打包的过程&#xff0c;像用 electron-builder 这种打包工具来说&#xff0c;它会根据你要打包的系统来下载应用的系统镜像打包工具&#xff0c;由于这些镜像的源文件托管在 Github 上&#xff0c;且 nodejs …

「浏览器插件」网址小尾巴终结者

前言 在我们日常的开发调试中&#xff0c;会在 URL 上添加一些特殊的小尾巴 用来显示调试界面或者开启一些特殊功能&#xff0c;当你接触了越来越多的系统后&#xff0c;你需要使用的小尾巴就变得越来越多&#xff0c;记忆和使用成本非常大&#xff0c;以及含有小尾巴的网址 在…

什么是低代码?

低代码 是一种软件开发方法&#xff0c;可以减少手工编码的过程&#xff0c;尽可能快的交付应用程序。 低代码平台 是工具的合集&#xff0c;这些工具可以通过建模和图形界面来进行应用程序的可视化开发。低代码使开发人员可以跳过手工编码&#xff0c;从而加快了应用程序的开…

什么是 LOW-CODE ?

低代码平台的特征 可视化建模工具 使用可视化方法和模型创建应用程序比使用代码进行开发要快。具有可视化建模功能的低代码平台&#xff0c;使用内置的组件&#xff0c;以任何人都可读的形式表示任何信息&#xff0c;从没有技术技能的常规企业用户到专业开发人员。 开箱即用…

简简单单 上传下载

背景 我们经常会有手机向电脑传文件 或者 电脑像手机传文件的需求。 而通常的解决方案是&#xff1a;手机上安装一个聊天软件&#xff08;如微信&#xff09;&#xff0c;电脑上安装一个聊天软件&#xff0c;然后自己给自己传输&#xff0c;然后进行下载。 这种方式是很麻烦的…

「VSCode插件」提效工具 - 快捷面板

前言 做为一个开发人员&#xff0c;在日常的开发过程中&#xff0c;经常会在 Terminal 中输入各种命令&#xff0c;如&#xff1a;npm i、npm start、git init、rm -rf、node_modules 等命令&#xff0c;看似方便&#xff0c;实则高频率的输入很烦人。那有什么方法可以把这些高…

VSCode摸鱼插件 — FreeWindow

背景 在一些不是很忙的时候&#xff0c;想高效利用下时间&#xff0c;看看书丰富一下自己&#xff0c;但是大庭广众下长时间看一本实体书&#xff0c;或者看手机的电子书&#xff0c;或者在电脑上看网页书都不太合适&#xff0c;显得自己很闲的样子&#xff0c;那该如何看起来…

在线生成文本图片 CFC函数计算版

百度云函数计算 CFC 运行环境。 使用 sharp 图处理&#xff08;文档&#xff09;。 使用 图片参数&#xff1a; widthheightrgba 文本参数&#xff1a; textfColorfSizefTopfLeft {HTTP触发器地址}?width1000&height300&fSize120&fColor%23d9333f&text奥利…

调试利器:浏览器 Logger

1. 前言 在一些业务系统中&#xff0c;由于集成的平台产物或工具较多&#xff0c;而这些产物的 log 不收敛&#xff0c;很多时候打开控制台就是满屏的 log&#xff0c;自己的 log 需要在满屏的 log 中查找&#xff0c;或者在 log 上加一些前缀用 Filter 去过滤&#xff0c;严重…

主动型页面性能利器:Page Status

1. 背景 当页面出现性能问题&#xff0c;如加载慢、页面卡顿等现象时&#xff0c;大多是用户主观上的感受。而要真正客观的去评测性能和定位问题原因&#xff0c;通常需要专业的前端同学通过 DevTools 中的 Performance 等工具来查看&#xff08;如图 1 所示&#xff09;&…