脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微信小程序页面返回顶部

6行代码实现微信小程序页面返回顶部效果

 更新时间：2018年12月28日 16:21:24   作者：豆i浆  
这篇文章主要为大家详细介绍了6行代码实现微信小程序页面返回顶部效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序页面返回顶部的具体代码，供大家参考，具体内容如下

效果预览：

js部分：

Page({
 data: {
  topNum: 0
 },

 returnTop: function () {
  this.setData({
   topNum: this.data.topNum = 0
  });
 }
})

wxml部分：

<scroll-view scroll-y scroll-with-animation='true' scroll-top='{{ topNum }}'>
 <view>1</view>
 <view>1</view>
 <view>1</view>
 <view>1</view>
 <view>1</view>
 <view>1</view>
 <view>1</view>
 <view>1</view>
 <view>1</view>
 <view>1</view>
</scroll-view>

<view class='top' catchtap='returnTop'>顶部</view>

wxss部分:

page{
 width: 100%;
 height: 100%;
}

scroll-view{
 height: 100%;
 width: 100%;
}

view{
 width: 100%;
 height: 200px;
 text-align: center;
 line-height: 200px;
 font-weight: 600;
}

view:nth-child(odd){
 background-color: red;
}

.top{
 width: 50px;
 height: 50px;
 position: fixed;
 right: 10px;
 bottom: 10px;
 z-index: 1;
 background-color: yellow;
 color: red;
 text-align: center;
 line-height: 50px;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • JS弹出窗口代码大全(详细整理)

    JS弹出窗口代码大全(详细整理)

    如何利用网页弹出各种形式的窗口，我想大家大多都是知道些的，但那种多种多样的弹出式窗口是怎么搞出来的，平时利用业余时间整理了一些，需要的朋友可以参考一下
    2012-12-12
  • js数组如何添加json数据及js数组与json的区别

    js数组如何添加json数据及js数组与json的区别

    在JSON中，有两种数据结构：对象和数组。本篇文章给大家介绍js数组如何添加json数据以及js数组和json的区别，涉及到js json数组添加相关知识，感兴趣的朋友可以参考下本篇文章
    2015-10-10
  • 原生js拖拽(第一课 未兼容)拖拽思路

    原生js拖拽(第一课 未兼容)拖拽思路

    第一步点击需要拖动的元素,在点击下的元素被选中，进行move移动,当鼠标弹起的时候，停止动作.点击元素oDIV的时候，可用的是oDIV区域，而move和up则是全局区域
    2013-03-03
  • JavaScript实现的斑马线表格效果【隔行变色】

    JavaScript实现的斑马线表格效果【隔行变色】

    这篇文章主要介绍了JavaScript实现的斑马线表格效果,通过javascript针对table表格的遍历与运算实现隔行变色功能,非常简单实用,需要的朋友可以参考下
    2017-09-09
  • 原生js实现二级联动菜单

    原生js实现二级联动菜单

    这篇文章主要为大家详细介绍了原生js实现二级联动菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-11-11
  • 微信小程序setInterval定时函数新手使用的超详细教程

    微信小程序setInterval定时函数新手使用的超详细教程

    平时开发中为实现倒计时效果可以使用setInterval即可,下面这篇文章主要给大家介绍了关于微信小程序setInterval定时函数新手使用的超详细教程,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • js实现prototype扩展的方法(字符串,日期,数组扩展)

    js实现prototype扩展的方法(字符串,日期,数组扩展)

    这篇文章主要介绍了js实现prototype扩展的方法,实例分析了JavaScript针对字符串、日期、数组等的prototype扩展相关技巧,需要的朋友可以参考下
    2016-01-01
  • 微信小程序实现YDUI的ScrollTab组件

    微信小程序实现YDUI的ScrollTab组件

    这篇文章主要为大家详细介绍了微信小程序实现YDUI的ScrollTab组件，滚动选项卡效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-02-02
  • 解决JS使用fill()进行数组填充遇到的问题

    解决JS使用fill()进行数组填充遇到的问题

    最近在做算法题时,遇到需要创建二维数组并进行初始化的情况,刚开始我使用的是 new Array(n).fill(new Array(n).fill('.')) 进行二维数组的初始化,但无论怎样我都通不过测试用例,所以本文就给大家详细的介绍了如何解决这类问题以及将js中的fill（方法重学一下
    2023-09-09
  • js实现瀑布流效果（自动生成新的内容）

    js实现瀑布流效果（自动生成新的内容）

    本文主要介绍了js实现瀑布流效果：当滚动条接近底部会自动生成新的内容。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03

最新评论