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


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代码实例
Jun 15 Javascript
jQuery的.live()和.die() 使用介绍
Sep 10 Javascript
js substr、substring和slice使用说明小记
Sep 15 Javascript
Jquery插件之打造自定义的select标签
Nov 30 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
Mar 18 Javascript
简述AngularJS相关的一些编程思想
Jun 23 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
Nov 07 Javascript
AngularJS 支付倒计时功能实现思路
Jun 05 Javascript
详解js的作用域、预解析机制
Feb 05 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
Oct 14 Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 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
基于文本的访客签到簿
2006/10/09 PHP
PHP获得用户使用的代理服务器ip即真实ip
2006/12/31 PHP
PHP下通过file_get_contents的代理使用方法
2011/02/16 PHP
国产PHP开发框架myqee新手快速入门教程
2014/07/14 PHP
php命令行写shell实例详解
2018/07/19 PHP
PHP 命名空间和自动加载原理与用法实例分析
2020/04/29 PHP
PHP7原生MySQL数据库操作实现代码
2020/07/03 PHP
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
网页整体变灰白色(兼容各浏览器)实例
2013/04/21 Javascript
jquery列表拖动排列(由项目提取相当好用)
2014/06/17 Javascript
基于编写jQuery的无缝滚动插件
2014/08/02 Javascript
提升PHP安全:8个必须修改的PHP默认配置
2014/11/17 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
浅析JS原型继承与类的继承
2016/04/07 Javascript
AngularJS延迟加载html template
2016/07/27 Javascript
微信小程序 教程之数据绑定
2016/10/18 Javascript
JS设置时间无效问题的解决办法
2017/02/18 Javascript
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
解决ionic和angular上拉加载的问题
2017/08/03 Javascript
浅谈Angular HttpClient简单入门
2018/05/04 Javascript
jQuery实现图片下载代码
2019/07/18 jQuery
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
详解Typescript 内置的模块导入兼容方式
2020/05/31 Javascript
python采用getopt解析命令行输入参数实例
2014/09/30 Python
PyCharm在win10的64位系统安装实例
2017/11/26 Python
Python给你的头像加上圣诞帽
2018/01/04 Python
Python实现的计算器功能示例
2018/04/26 Python
解决django-xadmin列表页filter关联对象搜索问题
2019/11/15 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
学生的自我鉴定范文
2013/10/24 职场文书
大专学生推荐信范文
2013/11/19 职场文书
洗发露广告词
2014/03/14 职场文书
店铺转让协议书(2014版)
2014/09/23 职场文书
党的群众路线对照检查材料思想汇报
2014/09/25 职场文书
小学班长竞选稿
2015/11/20 职场文书
python OpenCV学习笔记
2021/03/31 Python