热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

微信小程序返回顶部

wxml代码:<view>第一种方案<view><scroll-viewscroll-top

wxml代码:

第一种方案

  11111
  22
  33
  44
  5555
  666

wxss代码:

page{height:100%}
.note{ padding:10px; background:#f36; border-bottom:1px solid #ddd; color: #fff;}
.block {
  border: 8px solid #71b471;
  margin: 20rpx 20rpx;
  padding: 10rpx;
  background-color: #fff;
  border-radius: 20rpx;
  text-align: center;
  height:700rpx;
}
.top {
  width: 100rpx;
  height: 100rpx;
  line-height: 100rpx;
  /* background-color: #ddd; */
  position: fixed;
  bottom: 40rpx;
  right: 20rpx;
  text-align: center;
  font-size: 50rpx;
  opacity: .8;
  border-radius: 50%;
  border: 1px solid #fff; 
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAEZUlEQVR4Xu1biVEVQRDtjUCIQI1AiACJQIgAicA2AiEC2wiECCQDIQI/ESgRqBGM9bZmcHb/zt+5eg90qrYK6u8c701PX9PbkHJj5r2maY6MMQdEhGePiF7Yx5/9BxHh+UVEm6ZpNsaYOxHB/2qt0RiZmQH0jIheW9Al02yI6JaIrkUEf1dt1QiwO31mjHlbAXQIJCTjyhgDMqpIRjEBAE5E74iIrXhX3aHAYAAvRPSplIgiApj5hIg+Twi8zweIOBeRm1zWswhgZigxAMcZX0KDjgARUKJJLZmABex6CGCWNCQRwMwf7VlPYnnily9E5DJ2zmgCmBkiDw2/hnYlIucxC40iYGXgHe4oEkYJWCn4aBJ2EsDMsLWw8WtulyJyEQIQJMBq+y9rRu6t/TTkKwwSYO38txkdnNq8w0QeDvkJIQK+LsjJqUXGrYgc9wfbIuCJiX4f79ZR6BBgA5vvT0j0h2KHl34A1ScA2vJDLZlb6Dgdq/BIQKXdf7BZHU3sCMSeF0wAhfgoBT4BiOfh6+e2nfY2d9ChfsxcKqnvRQQ+DvkEwOwhlZXVRGTUq8waONCJmU3BeBsROXwkwObwQEBJg1glx+M5E1o/Bcq6pMEv2LS7VsnlRb4OolklV7cD2Z4xBvNkS6sdG+k0dgQUiX/JNszYtz0GjdX+P2dcyJxT74MAJDbnCHrurbvtEqtzEHEKAkpNSs7CW/DOI7NKGInNZzmDFfS5BAFIKb8pGCS1awe86zwTCdcgAMwfpaLIfH8Q/Iwk3IEA2FO4l9rtGhZ37CbH2nhI5SvtBbWXsIUeVewacZcXnVG2lgmSqU7CFAQkgfeOA+4c1UnQJiALfI8EHAc1HaVJQBF4/2wx85WtN4g9ctHvgQAEMCXx9dBk1cB70qBBwoOGGawOXpGE1gzWdoQQDUKB+S3qmqon9nCR+1YA4yJxU6u1jtAkrnBqwmQi89y6wpMEQwsloA2GIFbq4fBCCdh3CRGUn6l6XQsk4F5EDmqmxHYqpgUS0EmJIb9WmhRdGwF/k6JYOTOrHoOFSUAr/sBd82JkzDbvj4XCvRhAUzGjpA6eZYcAWAO4xVppqbYIeowl+7srqo58Pem138h/uM34fznacz+1pSBpqxRexuXtQfB63CrDSTxDBXAxQ+4ukPCU0JSJ0piF13gHH19s1TbvKpKCwtJSiDUApYzRUXx+x3+lTO5YRCDVW22sUHKSUDllKzPezSuU9PSBRioqA0dWl9HsVFRVh2ZSMgtWXKdR8B1PcGzMlZEQBT6JAOsjrKF4OqlYK+oI9LxFOErQC0szkTB1JyFtH5LwZAKsJOAyFSSo3diMHcne73cWfHJ9UhYBnoWYWxrg2+PGedrP5npHwuXqka+f6lhA3KGPUO+YvOtRnmCiCCKjBCJwBY5HK8GKAgsAvykF7vAVHYEQSbbcBUQg+CglA6DhxuJ2KTahEr1/KgQMHBH3Fbn7bH6o4NkVWrvP6NuvxmvtdIiRP3RowHtt7Hx7AAAAAElFTkSuQmCC) no-repeat; background-size: 100%
}
js代码:

Page({
  data: {
    scrollTop: 0,//滚动初始值
    hidden: true//隐藏
  },
  scrll: function (e) {
    console.log(e.detail);  
    var scrollTop = e.detail.scrollTop
    console.log(scrollTop)
    if (scrollTop > 100) {
      this.setData({
        hidden: false
      })
      console.log(this.data.scrollTop)
    } else {
      this.setData({
        hidden: true
      });
    }
  },
  //返回到顶部
  goTop: function (e) {
    this.setData({
      scrollTop: 0,
      hidden: true
    })
  }

})





推荐阅读
  • 本文介绍了一个从入门到高手的VB.NET源代码,通过学习这些源代码,可以在21天内成为VB.NET高手。文章提供了下载地址,并提醒读者加入作者的QQ群和收藏作者的博客。 ... [详细]
  • web前端工程化之数据绑定
    这篇博客我放了好久都没有来补充了,是因为那时候做前端,有很多东西很迷糊,这些名词都是新的,经过这么长时间的沉淀, ... [详细]
  • idea激活服务器 3月最新注册码
    idea激活服务器3月最新注册码,https:www.yht7.comidea。详细ieda激活码不妨到云海天教程 ... [详细]
  • 微信小程序地图实现展示线路的方法
    这篇文章将为大家详细讲解有关微信小程序地图实现展示线路的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所 ... [详细]
  • 拥抱Android Design Support Library新变化(导航视图、悬浮ActionBar)
    转载请注明明桑AndroidAndroid5.0Loollipop作为Android最重要的版本之一,为我们带来了全新的界面风格和设计语言。看起来很受欢迎࿰ ... [详细]
  • loader资源模块加载器webpack资源模块加载webpack内部(内部loader)默认只会处理javascript文件,也就是说它会把打包过程中所有遇到的 ... [详细]
  • 1、PLSQLDeveloper记住登陆密码在使用PLSQLDeveloper时,为了工作方便希望PLSQLDeveloper记住登录Oracle的用户名和密码&#x ... [详细]
  • vb.net面试题,请大家帮忙,谢谢。如果需要讲详细一点,那就加我QQ531412815第4题,潜在的错误,这里的错误不是常规错误,属于那种只有在运行是才知道的错误:Catchex ... [详细]
  • 一、前言元素定位可以说是学自动化测试中必会技能之一,也可以说是通往自动化之路的开门钥匙。就元素定位方法,除了我们常用并熟知的8种元素定位方法之外,还有一种定位方法可以说是一种特殊的 ... [详细]
  • 十一、jqPlot饼图和圆环图Abstract饼图和圆环图是将数据分解成各个组成 ... [详细]
  • 简单的文字打印机效果很久没写过juqey,看招聘信息里面都是什么精通jquey、react、vue诸如此类。。。精通离我很远,熟练也不敢说。也就是简简单单的貌似掌握。看见一个博客里 ... [详细]
  • 微信小程序实现简易计算器功能_javascript技巧
    这篇文章主要为大家详细介绍了微信小程序实现简易计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的 ... [详细]
  • 微信小程序实现星级评分与展示
    这篇文章主要为大家详细介绍了微信小程序实现星级评分与展示,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的 ... [详细]
  • 本文介绍了C#中数据集DataSet对象的使用及相关方法详解,包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成,以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读,读者可以了解到DataSet对象在C#中的重要性和使用方法。 ... [详细]
  • npminstall-Dbabelcorebabelpreset-envbabelplugin-transform-runtimebabelpolyfillbabel-loader ... [详细]
author-avatar
不奸不散遇
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有