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


Posted in Javascript onDecember 28, 2018

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

效果预览:

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;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的固定表头和列头的代码
May 03 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
Apr 25 Javascript
jquery动态添加删除div 具体实现
Jul 20 Javascript
jQuery原理系列-常用Dom操作详解
Jun 07 Javascript
angularJs中datatable实现代码
Jun 03 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
Nov 28 Javascript
关于Vue单页面骨架屏实践记录
Dec 13 Javascript
vue移动端实现红包雨效果
Jun 23 Javascript
vue中关闭eslint的方法分析
Aug 04 Javascript
Node.js API详解之 Error模块用法实例分析
May 14 Javascript
vue watch监控对象的简单方法示例
Jan 07 Vue.js
使用webpack和rollup打包组件库的方法
Feb 25 Javascript
微信小程序下拉框组件使用方法详解
Dec 28 #Javascript
微信小程序实现星级评价效果
Dec 28 #Javascript
微信小程序实现日历效果
Dec 28 #Javascript
Mint UI实现A-Z字母排序的城市选择列表
Dec 28 #Javascript
axios携带cookie配置详解(axios+koa)
Dec 28 #Javascript
微信小程序日历/日期选择插件使用方法详解
Dec 28 #Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
Dec 28 #Javascript
You might like
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
ThinkPHP实现多数据库连接的解决方法
2014/07/01 PHP
提高代码性能技巧谈—以创建千行表格为例
2006/07/01 Javascript
jQuery代码优化 遍历篇
2011/11/01 Javascript
JS正则验证邮箱的格式详细介绍
2013/11/19 Javascript
jquery获取一个元素下面相同子元素的个数代码
2014/07/31 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
jQuery过滤选择器用法分析
2015/02/10 Javascript
JavaScript实现重置表单(reset)的方法
2015/04/02 Javascript
vue基于mint-ui实现城市选择三级联动
2020/06/30 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
2018/09/14 Javascript
js实现select下拉框选择
2020/01/11 Javascript
vue实现计算器功能
2020/02/22 Javascript
Python的ORM框架中SQLAlchemy库的查询操作的教程
2015/04/25 Python
Python入门_浅谈数据结构的4种基本类型
2017/05/16 Python
Python 实现数据库(SQL)更新脚本的生成方法
2017/07/09 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
python爬虫之urllib3的使用示例
2018/07/09 Python
Python实现自动访问网页的例子
2020/02/21 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
浅谈Python线程的同步互斥与死锁
2020/03/22 Python
德国宠物用品、宠物食品及水族馆网上商店:ZooRoyal
2017/07/09 全球购物
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
英国卫浴商店:Ergonomic Design
2019/09/22 全球购物
建筑装饰学院室内设计专业个人自我评价
2013/12/07 职场文书
心得体会范文
2014/01/04 职场文书
问卷调查计划书
2014/01/10 职场文书
晚会主持词开场白
2014/03/17 职场文书
幼儿园六一儿童节活动方案
2014/08/26 职场文书
少先队活动总结
2014/08/29 职场文书
群众路线批评与自我批评发言稿
2014/10/16 职场文书
英语邀请函范文
2015/02/02 职场文书
我的中国梦主题教育活动总结
2015/05/07 职场文书
地雷战观后感
2015/06/09 职场文书
利用python进行数据加载
2021/06/20 Python
mysql查看表结构的三种方法总结
2022/07/07 MySQL