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

 更新时间:2017年07月12日 16:23:43   作者:好想再胖十斤  
这篇文章主要为大家详细介绍了微信小程序实现点击返回顶层的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

wxml代码:

<scroll-view scroll-y style="height: 1000rpx;" scroll-top="50" enable-back-to-top="true" scroll-top="{{scrollTop.scroll_top}}" bindscroll="scrollTopFun">
<block wx:for="{{sortArr}}">
<template is="spL" data="{{item}}"></template>
</block>
</scroll-view> 
<!-- 联系客服 -->
<view class="findOur fliexBox"><contact-button type="default-light" size="15" session-from="weapp"></contact-button>客服</view>
<!-- 拨打电话 -->
<view class="callOur fliexBox" bindtap="call">电话</view>
<view class="fliexBox" style=" bottom: 150rpx; border: solid 1px green;" wx:if="{{scrollTop.goTop_show}}" catchtap="goTopFun">顶层</view>

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,这样才可以监测到滑动的距离。

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

相关文章

  • Js中parseInt的使用及注意事项

    Js中parseInt的使用及注意事项

    parseInt是一种字符串转数字的,下面这篇文章主要给大家介绍了关于Js中parseInt的使用及注意事项的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-01-01
  • 基于javascript实现碰撞检测

    基于javascript实现碰撞检测

    这篇文章主要为大家详细介绍了基于javascript实现碰撞检测,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • Node.js API详解之 zlib模块用法分析

    Node.js API详解之 zlib模块用法分析

    这篇文章主要介绍了Node.js API详解之 zlib模块用法,结合实例形式分析了Node.js API中zlib模块基本功能、函数使用方法与操作注意事项,需要的朋友可以参考下
    2020-05-05
  • JS+DIV+CSS排版布局实现美观的选项卡效果

    JS+DIV+CSS排版布局实现美观的选项卡效果

    这篇文章主要介绍了JS+DIV+CSS排版布局实现美观的选项卡效果,通过简单的div+css布局结合JavaScript切换页面样式实现美观的选项卡效果,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • JavaScript实现文件下载的超简单两种方式分享

    JavaScript实现文件下载的超简单两种方式分享

    这篇文章主要为大家详细介绍了JavaScript实现文件下载的超简单两种方式,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-12-12
  • JavaScript之解构赋值的理解

    JavaScript之解构赋值的理解

    今天小编就为大家分享一篇关于JavaScript之解构赋值的理解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • 微信小程序scroll-view锚点链接滚动跳转功能

    微信小程序scroll-view锚点链接滚动跳转功能

    这篇文章主要介绍了微信小程序scroll-view锚点链接滚动跳转功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • 微信小程序实现活动报名登记功能(实例代码)

    微信小程序实现活动报名登记功能(实例代码)

    这篇文章主要介绍了微信小程序实现活动报名登记,本篇将介绍使用微信小程序实现发起一个活动报名的设计,以此为基础,我们可以掌握微信小程序表单的基本用法,进而在诸如疫情信息登记、出入报备等场景中使用小程序进行开发,满足相关的需求,需要的朋友可以参考下
    2022-09-09
  • JavaScript栏目列表隐藏/显示简单实现

    JavaScript栏目列表隐藏/显示简单实现

    隐藏侧边栏,并将图片换成右箭头图片;显示侧边栏,并将图片换成左箭头,这样的效果想必大家都很熟悉吧,接下来实现下,感兴趣的朋友可以参考下哈
    2013-04-04
  • javascript之通用简单的table选项卡实现(二)

    javascript之通用简单的table选项卡实现(二)

    上篇中的选项卡存在这样的问题:把逻辑封装在table.js中,不够灵活,也就是说如果某个选项卡是实现异步请求或者跳转,而非div的显隐切换,那么就得修过table.js来达到目的,显然不是我所需要的。
    2010-05-05

最新评论