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


Posted in Javascript onJuly 12, 2017

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

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

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

Javascript 相关文章推荐
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
Apr 24 Javascript
IE innerHTML,outerHTML所引起的问题
Jun 04 Javascript
javascript 计算两个整数的百分比值
Dec 26 Javascript
用JS实现一个TreeMenu效果分享
Aug 28 Javascript
js浮点数精确计算(加、减、乘、除)
Dec 26 Javascript
jQuery实现友好的轮播图片特效
Jan 12 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
Dec 13 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
Jan 20 Javascript
javascript 跨域问题以及解决办法
Jul 17 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
Nov 11 Javascript
Vue组件的使用及个人理解与介绍
Feb 09 Javascript
PHP 502bad gateway原因及解决方案
Nov 13 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
Jul 12 #Javascript
JQuery EasyUI的一些常用组件
Jul 12 #jQuery
JavaScript严格模式下关于this的几种指向详解
Jul 12 #Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 #jQuery
详解如何用webpack打包一个网站应用项目
Jul 12 #Javascript
利用node.js实现自动生成前端项目组件的方法详解
Jul 12 #Javascript
AngularJS实现select的ng-options功能示例
Jul 12 #Javascript
You might like
php smarty模版引擎中的缓存应用
2009/12/02 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
JavaScript中的prototype和constructor简明总结
2014/04/05 Javascript
HTML页面登录时的JS验证方法
2014/05/28 Javascript
jquery常用的12个小功能
2016/07/22 Javascript
微信小程序 教程之wxapp 视图容器 view
2016/10/19 Javascript
基于datepicker定义自己的angular时间组件的示例
2018/03/14 Javascript
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
vue实现记事本功能
2019/06/26 Javascript
小程序实现分类页
2019/07/12 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
[59:48]LGD vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
windows上安装Anaconda和python的教程详解
2017/03/28 Python
Python中对象的引用与复制代码示例
2017/12/04 Python
selenium+python实现自动化登录的方法
2018/09/04 Python
python如何从文件读取数据及解析
2019/09/19 Python
wxPython之wx.DC绘制形状
2019/11/19 Python
解决Tensorboard 不显示计算图graph的问题
2020/02/15 Python
Django基于客户端下载文件实现方法
2020/04/21 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
Python实现画图软件功能方法详解
2020/07/28 Python
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
深入剖析webstorage[html5的本地数据处理]
2016/07/11 HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
2016/04/19 HTML / CSS
美国最大的电子宠物训练产品制造商:PetSafe
2018/10/12 全球购物
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
eBay奥地利站:eBay.at
2019/07/24 全球购物
化学系大学生自荐信范文
2014/03/01 职场文书
《夹竹桃》教学反思
2014/04/20 职场文书
保证金退回承诺函格式
2015/01/21 职场文书
2015年发展党员工作总结报告
2015/03/31 职场文书
债务纠纷起诉书
2015/05/20 职场文书
解除处分决定书
2015/06/25 职场文书
入党转正申请自我鉴定
2019/06/25 职场文书
python如何正确使用yield
2021/05/21 Python