小程序 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;}},});
}

小程序 WXS响应事件（超出两屏显示返回顶部按钮）相关推荐

小程序 WXS响应事件（滚动菜单栏tab吸顶）
小程序 WXS响应事件(滚动菜单栏tab吸顶) 解决问题: 小程序页面滚动,tab触顶吸顶解决办法: 1)页面滚动事件中监听处理(不推荐) 缺点:在安卓端性能非常差,吸顶效果反应迟钝,不流畅等问题. ...
Uniapp-微信小程序实现全局事件监听并进行数据埋点
Uniapp-微信小程序实现全局事件监听并进行数据埋点零.前言最近接到需求,领导希望使用微信开放平台上免费的We分析进行数据埋点,但又不希望在现有uniapp开发的微信小程序代码上做侵入式修改,笔 ...
微信小程序开发（五）：小程序中的事件
在往常的web开发中,"事件"是常用的知识,但是在微信小程序中使用"事件"有很大不同. 一个点击事件的例子使用bind在WXML组件中绑定事件,使用data- ...
小程序获取用户信息的两种方法
小程序获取用户信息的两种方法第一种使用 getUserProfile 代码示例第二种使用头像昵称填写相信大家之前也经常使用open-data获取用户的头像和昵称吧,但微信的这个改编意味着我们要 ...
[微信小程序]微信小程序点击事件返回值的target分析
微信小程序点击事件返回值的target分析测试过程在微信小程序中创建以下图片然后在调试中点击下面第5个. console返回两个e 第一个e是第5块小块的e 第二个e是下面全部9小块组成的大块的 ...
微信小程序列表实现文字内容超出隐藏并显示全文/收起按钮
微信小程序列表实现文字内容超出隐藏并显示全文/收起按钮针对这个功能,产品的需求如下由于我们项目是教育类产品所以这里这个功能会用在发动态这里,就像微信朋友圈那样,我们叫班级圈. 用户发班级圈时,可以 ...
关于小程序的bindscrolltolower事件失效，已解决
公司最近在开发一款小程序,我也是刚上手,坑挺多的,特意来记录一下. 关于微信小程序的bindscrolltolower事件失效,我贴一下第一次写的代码. 这样使用bindscrolltolower 事 ...
小程序开发：小程序的底部弹窗（半屏弹窗）
小程序的底部弹窗(半屏弹窗) 我这里主要是使用小程序的原生组件WeUI来完成的,需要引入WeUI组件库.这里就不教如何引入库,需要导入WeUI组件库的请看小程序开发:轻松导入WeUI包主要讲解如何 ...
@所有人，官网下载的微信小程序开发工具安装后黑屏咋办？
@所有人,官网下载的微信小程序开发工具安装后黑屏咋办? 一直这样,重复安装也是这样欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器所展示的欢迎页.如果你想学习如何使 ...

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

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

小程序 WXS响应事件（超出两屏显示返回顶部按钮）相关推荐

最新文章

热门文章