微信小程序实现点击返回顶层的方法

前端之家收集整理的这篇文章主要介绍了微信小程序实现点击返回顶层的方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

最近在研究微信小程序,被这个返回顶层给坑了一波,下面贴代码

wxml代码

Box">客服 Box" bindtap="call">电话 Box" style=" bottom: 150rpx; border: solid 1px green;" wx:if="{{scrollTop.goTop_show}}" catchtap="goTopFun">顶层

js代码

300) {//触发gotop的显示条件 this.setData({ 'scrollTop.goTop_show': true }); } else { this.setData({ 'scrollTop.goTop_show': false }); } },goTopFun: function (e) { var _top = this.data.scrollTop.scroll_top;//发现设置scroll-top值不能和上一次的值一样,否则无效,所以这里加了个判断 if (_top == 0) { _top = 1; } else { _top = 0; } this.setData({ 'scrollTop.scroll_top': _top }); },/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this; wx.getSystemInfo({ success: function (res) { that.setData({ scrollHeight: res.windowHeight }); } }); },})

wxss代码

Box{ width: 100rpx; height: 50rpx; background-color: #5db13b; color: #ffffff; text-align: center; position: fixed; right: 0rpx; bottom: 85rpx; border-radius: 20rpx 0rpx 0rpx 20rpx; font-size: 26rpx; line-height: 50rpx; opacity: .6; } .callOur{ bottom: 20rpx; } contact-button{ opacity: 0; position: absolute; }

主要是需要把scroll-view 组件的高度设置起来而且不能是百分比 如100%这样,可以是rpx,这样才可以监测到滑动的距离。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/weapp/37906.html

猜你在找的微信小程序相关文章