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滚动的更多相关文章

  1. 第50天:scrollTo小火箭返回顶部

    scrollTo(x,y)//可把内容滚动到指定的坐标scrollTo(xpos,ypos)//x,y值必需 1.固定导航栏 <!DOCTYPE html> <html lang=& ...

  2. 微信小程序自定义顶部导航

    注释:自定义导航需要自备相应图片 一.设置自定义顶部导航 Navigation是小程序的顶部导航组件,当页面配置navigationStyle设置为custom的时候可以使用此组件替代原生导航栏. 1 ...

  3. 原生JS实现返回顶部和滚动锚点

    ;(function (window,doc,undefined) { function rollingAnchor(){ this.timer =''; } rollingAnchor.protot ...

  4. 关于微信小程序返回页面时刷新页面的实现

    在小程序开发中,我们通常会遇到这样的需求:提交某个表单成功后跳转该表单详情页面,但是返回时需要跳转回到首页(注意:我这里的首页是提交表单页的前一个页面),而不能再返回提交表单的页面,并且要在首页中刷新 ...

  5. robotframework,移动端(小程序)自动化,滚动屏幕的方法

    场景描述: 小程序端定位元素有无法定位弹出层内容的问题(自动化工具只能识别到背景主层,无法识别到弹出层) 解决思路: 1.弹出层元素与背景主层元素位置一致,当点击出弹出层时,在定位背景主层即可定位到弹 ...

  6. 小程序-云开发 bindscroll滚动事件执行setData()方法,导致scroll-view视图抖动

    需求描述 想做一个类似京东小程序首页功能列表左右滑动的效果,效果图如下 遇到的问题 1. 如何让scroll-view显示两行 做过小程序开发的都知道,scroll-view要么显示一行,可以左右滚动 ...

  7. 微信小程序-返回并更新上一页面的数据

    小程序开发过程中经常有这种需求,需要把当前页面数据传递给上一个页面,但是wx.navigateBack()无法传递数据. 一般的办法是把当前页面数据放入本地缓存,上一个页面再从缓存中取出. 除此之外还 ...

  8. 微信小程序实现顶部、底部联动滑动

    这个场景一般用于展示数据时,数据过多,每条一行显示不下,表头可以横向滑动,下面要显示的数据部分横向纵向都可以滑动.表头或下面数据部分横向滑动的时候,两部分可以进行联动 具体效果像这样(随便写的丑样式布 ...

  9. 微信小程序回到顶部的两种方式

    一,使用view形式的回到顶部 <image src='../../img/button-top.png' class='goTop' hidden='{{!floorstatus}}' bin ...

随机推荐

  1. LED类代码

      /* led.c文件 标题: 点亮一个了LED灯 电路:开发板中P2口已接到LED灯的阴极 */ #include <reg52.h> #include "led1.h&qu ...

  2. 20172302 《Java软件结构与数据结构》实验三:查找与排序实验报告

    课程:<Java软件结构与数据结构> 班级: 1723 姓名: 侯泽洋 学号:20172302 实验教师:王志强老师 实验日期:2018年11月19日 必修/选修: 必修 实验内容 (1) ...

  3. python 字符串的一些方法

    总结:# split 分割 ********# strip 脱 默认脱头尾的空格 ********# replace 替换 ********# join 插入 拼接 ********# format ...

  4. apache hive 1.0.0发布

    直接从0.14升级到1.0.0,主要变化有: 去掉hiveserver 1 定义公共的API,比如HiveMetaStoreClient 当然,也需要使用新的beeline cli客户端. 不过最值得 ...

  5. 关于在win8系统下用VMware 9.0装系统导致物理机不断重启的解决办法

    一.问题描述 前段时间将操作系统换成了Win8,安装上VMware 9.0英文版.然后在VMware中安装centos系统,结果每次到安装系统的时候,物理机系统就会莫名其妙地自动重启,毫无征兆地出现, ...

  6. EBS MOAC

    alter session set nls_language='SIMPLIFIED CHINESE';alter session set nls_language ='AMERICAN'; exec ...

  7. vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)

    我发现好多倒计时的插件,刷新都会变成从头再来,于是自己用vue2.0写了一个,测试通过,直接上代码 如下是组件代码: <template> <span :endTime=" ...

  8. Redis系列--内存淘汰机制(含单机版内存优化建议)

    https://blog.csdn.net/Jack__Frost/article/details/72478400?locationNum=13&fps=1 每台redis的服务器的内存都是 ...

  9. android 制作9.png图

    9.png图片与.png图片的具体不同之处.9.png图片的四周与普通的png图片相比多了一个像素位的白色区域,该区域只有在图片被还原和制造的时候才能看到,当打包后无法看见,并且图片的总像素会缩小2个 ...

  10. 让 Python 更加充分的使用 Sqlite3

    我最近在涉及大量数据处理的项目中频繁使用 sqlite3.我最初的尝试根本不涉及任何数据库,所有的数据都将保存在内存中,包括字典查找.迭代和条件等查询.这很好,但可以放入内存的只有那么多,并且将数据从 ...