小程序返回顶部top滚动
wxjs
const app = getApp();
Page({
data:{
// top标签显示(默认不显示)
backTopValue:false
},
// 监听滚动条坐标
onPageScroll: function (e) {
//console.log(e)
var that = this
var scrollTop = e.scrollTop
var backTopValue = scrollTop > ? true : false
that.setData({
backTopValue: backTopValue
})
}, // 滚动到顶部
backTop:function(){
// 控制滚动
wx.pageScrollTo({
scrollTop:
})
}, })
wxss
/*浮窗返回顶部*/
.backTop{width: 60rpx; height:60rpx;background: #fff;position: fixed; right: 20rpx ; bottom: 130rpx; border-radius: 30rpx;box-shadow: 0px 0px 3px #; line-height: 60rpx; text-align: center}
.backTop text{font-size: 45rpx; }
wxml
<!--浮窗 Top-->
<view class="backTop" bindtap='backTop' wx:if="{{backTopValue ==true}}"><text class='iconfont icon-top li-ico'></text></view>
效果:滚动到一定距离后显示Top样式
小程序返回顶部top滚动的更多相关文章
- 第50天:scrollTo小火箭返回顶部
scrollTo(x,y)//可把内容滚动到指定的坐标scrollTo(xpos,ypos)//x,y值必需 1.固定导航栏 <!DOCTYPE html> <html lang=& ...
- 微信小程序自定义顶部导航
注释:自定义导航需要自备相应图片 一.设置自定义顶部导航 Navigation是小程序的顶部导航组件,当页面配置navigationStyle设置为custom的时候可以使用此组件替代原生导航栏. 1 ...
- 原生JS实现返回顶部和滚动锚点
;(function (window,doc,undefined) { function rollingAnchor(){ this.timer =''; } rollingAnchor.protot ...
- 关于微信小程序返回页面时刷新页面的实现
在小程序开发中,我们通常会遇到这样的需求:提交某个表单成功后跳转该表单详情页面,但是返回时需要跳转回到首页(注意:我这里的首页是提交表单页的前一个页面),而不能再返回提交表单的页面,并且要在首页中刷新 ...
- robotframework,移动端(小程序)自动化,滚动屏幕的方法
场景描述: 小程序端定位元素有无法定位弹出层内容的问题(自动化工具只能识别到背景主层,无法识别到弹出层) 解决思路: 1.弹出层元素与背景主层元素位置一致,当点击出弹出层时,在定位背景主层即可定位到弹 ...
- 小程序-云开发 bindscroll滚动事件执行setData()方法,导致scroll-view视图抖动
需求描述 想做一个类似京东小程序首页功能列表左右滑动的效果,效果图如下 遇到的问题 1. 如何让scroll-view显示两行 做过小程序开发的都知道,scroll-view要么显示一行,可以左右滚动 ...
- 微信小程序-返回并更新上一页面的数据
小程序开发过程中经常有这种需求,需要把当前页面数据传递给上一个页面,但是wx.navigateBack()无法传递数据. 一般的办法是把当前页面数据放入本地缓存,上一个页面再从缓存中取出. 除此之外还 ...
- 微信小程序实现顶部、底部联动滑动
这个场景一般用于展示数据时,数据过多,每条一行显示不下,表头可以横向滑动,下面要显示的数据部分横向纵向都可以滑动.表头或下面数据部分横向滑动的时候,两部分可以进行联动 具体效果像这样(随便写的丑样式布 ...
- 微信小程序回到顶部的两种方式
一,使用view形式的回到顶部 <image src='../../img/button-top.png' class='goTop' hidden='{{!floorstatus}}' bin ...
随机推荐
- linux下自定义域名访问本机部署的应用
在linux系统下,用weblogic部署了两套应用,创建了两个虚拟主机,一个主机指向www.test1.com, 另一个虚拟主机指向www.test2.com. 一套应用指定一台虚拟主机. 修改/e ...
- Ubuntu下升级Git以及获取ssh keys的代码
今天开始用的git,记下获取ssh keys 的代码 ? 1 2 3 ssh-keygen -t rsa -C "your_email@example.com" # Enter f ...
- AVL树平衡旋转详解
AVL树平衡旋转详解 概述 AVL树又叫做平衡二叉树.前言部分我也有说到,AVL树的前提是二叉排序树(BST或叫做二叉查找树).由于在生成BST树的过程中可能会出现线型树结构,比如插入的顺序是:1, ...
- Error-MVCr:找到了多个与 URL 匹配的控制器类型。如果多个控制器上的特性路由与请求的 URL 匹配,则可能会发生这种情况。
ylbtech-Error-MVCr:找到了多个与 URL 匹配的控制器类型.如果多个控制器上的特性路由与请求的 URL 匹配,则可能会发生这种情况. 1.返回顶部 1. 找到了多个与 URL 匹配的 ...
- Linux及Arm-Linux程序开发笔记(零基础入门篇)
Linux及Arm-Linux程序开发笔记(零基础入门篇) 作者:一点一滴的Beer http://beer.cnblogs.com/ 本文地址:http://www.cnblogs.com/bee ...
- 熬之滴水成石:最想深入了解的内容--windows内核机制(6)
58 进程和线程(3) 说完进程再说说线程,线程相比于进程其实有更多可说的内容.首先实现线程调用的数据结构是个栈,该栈记录了调用方法的信息这里面也包括了函数调用及返回的地址.线程肯定是属于某个进程,其 ...
- 海量数据拆分到nosql系统的一种方案
获取某用户的好友最新动态. 我们大体上来说先按照用户ID将用户的好友一致性哈希到几个mongodb集群,然后把用户的最新信息也存储到mongodb中.然后利用消息系统保持数据库中的数据和mongdb中 ...
- Golang——垃圾回收GC(2)
1 垃圾回收中的重要概念 1.1 定义 In computer science, garbage collection (GC) is a form of automatic memory manag ...
- 11G新特性 -- 块介质恢复性能增强(block media recovery)
块介质恢复性能增强(block media recovery) :只是恢复受损的块.不需要将受损的数据文件offline.针对受损的数据块,使用备份中好的数据块进行restore和recover,避免 ...
- MySQL -- 异步I/O
linux上,innodb使用异步IO子系统(native AIO)来对数据文件页进行预读和写请求.行为受到参数innodb_use_native_aio控制.默认是开启的,且只是适用于linux平台 ...