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


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 相关文章推荐
jquery 学习笔记 传智博客佟老师附详细注释
Sep 12 Javascript
基于jquery的固定表头和列头的代码
May 03 Javascript
jQuery异步获取json数据方法汇总
Dec 22 Javascript
根据配置文件加载js依赖模块
Dec 29 Javascript
javascript实用方法总结
Feb 06 Javascript
AngularJS入门教程之过滤器用法示例
Nov 02 Javascript
Vue获取DOM元素样式和样式更改示例
Mar 07 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
Mar 17 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
Mar 21 Javascript
jquery实现提示语淡入效果
May 05 jQuery
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
Bootstrap实现的表格合并单元格示例
Feb 06 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 MYSQL 数据备份类
2009/06/19 PHP
解析php中mysql_connect与mysql_pconncet的区别详解
2013/05/15 PHP
PHP-Java-Bridge使用笔记
2014/09/22 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
Laravel find in set排序实例
2019/10/09 PHP
用JQuery 实现AJAX加载XML并解析的脚本
2009/07/25 Javascript
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
轻松创建nodejs服务器(1):一个简单nodejs服务器例子
2014/12/18 NodeJs
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
jquery操作angularjs对象
2015/06/26 Javascript
bootstrap3 兼容IE8浏览器!
2016/05/02 Javascript
浅谈JS中json数据的处理
2016/06/30 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
2017/03/30 jQuery
简单实现jquery隔行变色
2017/11/09 jQuery
bootstrap响应式工具使用详解
2017/11/29 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
python抓取网页图片并放到指定文件夹
2014/04/24 Python
Python基于DES算法加密解密实例
2015/06/03 Python
Python使用sklearn库实现的各种分类算法简单应用小结
2019/07/04 Python
python 命令行传入参数实现解析
2019/08/30 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
Python实现代码块儿折叠
2020/04/15 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
用python实现一个简单的验证码
2020/12/09 Python
CSS3教程:边框属性border的极致应用
2009/04/02 HTML / CSS
英国殿堂级有机护肤品牌:Rodial
2017/04/17 全球购物
PHP面试题大全
2015/10/16 面试题
如何在Shell脚本中使用函数
2015/09/06 面试题
加拿大探亲邀请信
2014/01/28 职场文书
人事专员的职责
2014/02/26 职场文书
司法助理专业自荐书
2014/06/13 职场文书
城市规划应届毕业生自荐信
2014/07/04 职场文书
首席执行官观后感
2015/06/03 职场文书