一、wxml页面:catchtap阻止冒泡事件。

  1. <view class="gotop" hidden='{{!cangotop}}'catchtap="goTop">
  2. <view>回到顶部</view>
  3. </view>

二、在scroll-view形式下回到顶部

  1. <scroll-view scroll-y scroll-top='{{topNum}}' bindscroll="scrolltoupper">
  2. <view class="gotop" hidden='{{!cangotop}}'catchtap="goTop">
  3. <view>回到顶部</view>
  4. </view>
  5. </scroll-view>

JS页面代码段:

    1. data:{
    2. topNum: 0
    3. }
    4. // 获取滚动条当前位置
    5. scrolltoupper:function(e){
    6. console.log(e)
    7. if (e.detail.scrollTop > 100) {
    8. this.setData({
    9. cangotop: true
    10. });
    11. } else {
    12. this.setData({
    13. cangotop: false
    14. });
    15. }
    16. },
    17. //回到顶部
    18. goTop: function (e) {  // 一键回到顶部
    19. this.setData({
    20. topNum:0
    21. });
    22. },

小程序scroll-view实现回到顶部的更多相关文章

  1. 微信小程序中两种回到顶部按钮的效果实现

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

  2. 微信小程序 -- scroll view

    效果图:横向滚动和纵向滚动 scroll view使用方法文档,前面已经介绍查找文档方法,此处不再赘述 一.横向滚动 创建一个页面scroll-nav 然后,在.wxml文件中排版 <!--水平 ...

  3. 关于微信小程序获取view的动态高度填坑

    wx.createSelectorQuery().select('#box').boundingClientRect(function (rect) { width = rect.width heig ...

  4. 【微信小程序】view顶部固定或底部固定 + scroll-view中的元素view也可以使用position:fixed;固定选中元素位置

    1.顶端固定核心代码如下: <view class="page__hd" style="position:fixed; top:0;width: 750rpx;&q ...

  5. 微信小程序scroll标签的测试

    一:testscroll.wxml的代码如下.testview.js自动生成示例代码 //testscroll.wxml <view class="section__title&quo ...

  6. 小程序获取view元素的高度

    页面wxml <!--page/index/index.wxml--> <view id='demo'> <text>哈哈哈哈哈</text> < ...

  7. 微信小程序将view动态填满全屏

    一.在app.js利用官方方法获取设备信息,将获取到的screenHeight.windowHeight度量单位统一由rpx换算为px 注:官方文档给出 [rpx换算px (屏幕宽度/750)  ][ ...

  8. 关于小程序去除view/navigator 点击后默认阴影效果

    hover:class  :定义容器在被触发时的样式 通常无用,但若不去除则影响用户体验: 为避免被覆盖,约定在wxss底部添加class,比如: <!-- wxml --> <na ...

  9. 小程序的tabar顶部和底部导航的区别

    最近有人说小程序的底部tabar放在顶部会出现问题,那么先看看如何放在顶部吧:图片效果: 这里呢,在官方文档是有说明,tabbar 的属性设置里面有个position属性,position只支持bot ...

  10. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

随机推荐

  1. Iterator模式C++实现

    原文链接 #include <iostream> using namespace std; typedef int DATA; class Iterator; // 容器的抽象基类 cla ...

  2. LTC6804读写配置寄存器

    一.写配置寄存器步骤及函数封装 写配置寄存器 1.把CSB拉低至低电平: 2.发送WRCFG命令(0x00 0x01)及其PEC(0x3D 0x6E): 3.发送配置寄存器的CFGR0字节,然后继续发 ...

  3. ES6---面向对象上的简化

    一.ES6---面向对象上的简化 1.单个对象提供了2处简化: 1.1 如果对象的属性来自于对象外的变量,且变量名刚好和属性名相同.则不用写两遍相同的名字, 只要写一遍即可. 1.2 所有对象的方法, ...

  4. 8.1Go并发

    第八章 Go并发 Go语言区别于其他语言的一大特点就是出色的并发性能,最重要的一个特性那就是go关键字. 并发场景: UI小姐姐一边开着PS软件,一边微信疯狂的和产品经理打字交流,后台还听着网易云音乐 ...

  5. 5.8 Go 单元测试

    5.8 Go 单元测试 如果你不想后半生的美好时光都在寻找BUG中度过,那么必须写些程序用来检测产品代码的结果和预期的一样. Go语言的测试依赖于go test测试命令和一组按约定方式编写的测试函数, ...

  6. 关于hadoop3.x MR报错:找不到或无法加载主类 org.apache.hadoop.mapreduce.v2.app.MRAppMaster

    用的apache Hadoop3.X,今天运行MR报错: 找不到或无法加载主类 org.apache.hadoop.mapreduce.v2.app.MRAppMaster 关键需要配置两个配置:ma ...

  7. CF832C

    题目链接:http://codeforces.com/contest/832/problem/C 题目大意: n个人,面向左或者右站在同一条轴上,每个人在轴上的坐标为x,速度为v.请你在某个位置放置一 ...

  8. J2EE项目分类管理中,提交表单数据是二进制形式时,对数据的修改失败。category赋值失败。

    原因: 在条件判断时,对字符串的比较进行了错误比较. 解决方法: A==B,比较的是两个字符串是否是同一个对象. A.equal(B),比较的是两个字符串内容是否相同. 出现错误是用了第一种比较,应该 ...

  9. Vue基础:子组件抽取与父子组件通信

    在工作中承担一部分前端工作,主要使用Vue + Element UI. 随着版本迭代,需求增加,页面往往变得更加臃肿,不易维护.学习子组件的封装和抽取,能更好适应需求. 为什么需要子组件 可复用 将重 ...

  10. python+selenium实现百度关键词搜索自动化操作

    缘起 之前公司找外面网络公司做某些业务相关关键词排名,了解了一下相关的情况,网络公司只需要我们提供网站地址和需要做的关键词即可,故猜想他们采取的方式应该是通过模拟用户搜索提升网站权重进而提升排名. 不 ...