微信小程序如何实现点击返回顶层
这篇文章将为大家详细讲解有关微信小程序如何实现点击返回顶层,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
10年积累的成都网站制作、成都做网站、外贸营销网站建设经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先建设网站后付款的网站建设流程,更有新乐免费网站建设让你可以放心的选择与我们合作。
wxml代码:
客服 电话 顶层
js代码:
var app = getApp(); Page({ data: { hidden: true, list: [], scrollTop: { scroll_top: 0, goTop_show: false }, scrollHeight: 0, floorstatus:true, sortArr:[ { id: 1, img: "../../images/2.jpg", title: "君御豪园住宅", introduction: "杭州不限购不限贷口住宅", money: 5000, vperson: 115, tperson: 0 } ], }, scrollTopFun: function (e) { console.log(e.detail); if (e.detail.scrollTop > 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代码:
.fliexBox{ 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,这样才可以监测到滑动的距离。
关于“微信小程序如何实现点击返回顶层”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
网站栏目:微信小程序如何实现点击返回顶层
网页URL:http://myzitong.com/article/gcoccp.html