介绍
这篇文章给大家分享的是有关微信小程序中如何点击返回顶层的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
wxml代码:
& lt; scroll-view scroll-y 风格=案叨?,1000 rpx;“, scroll-top=?0”, enable-back-to-top=皌rue", scroll-top=皗{scrollTop.scroll_top}}“, bindscroll=皊crollTopFun"比; & lt; block  wx:=皗{sortArr}}“比; & lt; template 是=皊pL", https://www.yisu.com/zixun/data="{{项}}"> 模板> 块> 滚动视图> <视图类=" findOur fliexBox "> <接触按钮类型=癲efault-light”大??5”会议在北京=" weapp "> 接触按钮>客服视图> <视图类=" callOur fliexBox“bindtap="电话">电话视图> <视图类=" fliexBox”风格="底:150 rpx;边界:固体1 px绿色;“天气:如果=" {{scrollTop。goTop_show}} goTopFun“catchtap=>顶层视图>
js代码:
var app =, getApp (); 页面({ 数据:{ 隐藏:,真的, 列表:[], scrollTop: { scroll_top: 0, goTop_show:假 }, scrollHeight: 0, floorstatus:没错, sortArr:( { id:, 1, img:“. ./. ./图片/2. jpg" 标题:,“君御豪园住宅“, 作品简介:,“杭州不限购不限贷口住宅“, 钱:5000年,, vperson: 115年,, tperson: 0 } ), }, scrollTopFun: function (e), { console.log (e.detail); if (e.detail.scrollTop 祝辞,300),{//触发gotop的显示条件, this.setData ({ & # 39;scrollTop.goTop_show& # 39;:真实 }); },{else this.setData ({ & # 39;scrollTop.goTop_show& # 39;:假 }); } }, goTopFun: function (e), { var _top =, this.data.scrollTop.scroll_top;//发现设置scroll-top值不能和上一次的值一样,否则无效,所以这里加了个判断, if (_top ==, 0), { 时间=_top 1; },{else 时间=_top 0; } this.setData ({ & # 39;scrollTop.scroll_top& # 39;: _top }); },/* * *,生命周期函数——监听页面加载 */onLoad: function (选项),{ var that =,; wx.getSystemInfo ({ 成功:function (res), { that.setData ({ scrollHeight: res.windowHeight }); } }); }, })
wxs代码:
.fliexBox { 宽度:100 rpx; 高度:50 rpx; background - color: # 5 db13b; 颜色:# ffffff; text-align:中心; 位置:,固定; 右:0 rpx; 底部:85 rpx; border - radius: 20 rpx 0 rpx 0 rpx 20 rpx; 字体大小:26 rpx; 行高:50 rpx; 透明度:6; } .callOur { 底部:20 rpx; } 接触按钮{ 透明度:0; 位置:绝对的; }
主要是需要把滚动视图组件的高度设置起来而且不能是百分比如100%这样,可以是rpx,这样才可以监测到滑动的距离。
感谢各位的阅读!关于“微信小程序中如何点击返回顶层”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!