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 相关文章推荐
学习YUI.Ext基础第一天
Mar 10 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
Apr 06 Javascript
js操作iframe兼容各种主流浏览器示例代码
Jul 22 Javascript
jquery实现图片按比例缩放示例
Jul 01 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
Mar 03 Javascript
jquery中attr和prop的区别分析
Mar 16 Javascript
超赞的动手创建JavaScript框架的详细教程
Jun 30 Javascript
Ajax与服务器(JSON)通信实例代码
Nov 05 Javascript
基于Javascript倒计时效果
Dec 22 Javascript
JavaScript插入排序算法原理与实现方法示例
Aug 06 Javascript
详解Vue中的基本语法和常用指令
Jul 23 Javascript
jQuery实现电梯导航模块
Dec 22 jQuery
微信小程序下拉框组件使用方法详解
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
php读取javascript设置的cookies的代码
2010/04/12 PHP
PHPCMS的使用小结
2010/09/20 PHP
在Nginx上部署ThinkPHP项目教程
2015/02/02 PHP
php结合正则批量抓取网页中邮箱地址
2015/05/19 PHP
CodeIgniter配置之database.php用法实例分析
2016/01/20 PHP
[原创]php简单隔行变色功能实现代码
2016/07/09 PHP
出现“不能执行已释放的Script代码”错误的原因及解决办法
2007/08/29 Javascript
Js 订制自己的AlertBox(信息提示框)
2009/01/09 Javascript
两个Javascript小tip资料
2010/11/23 Javascript
javascript日期转换 时间戳转日期格式
2011/11/05 Javascript
js字符串转成JSON
2013/11/07 Javascript
javascript数组详解
2014/10/22 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
2015/03/23 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
JS冒泡事件与事件捕获实例详解
2016/11/25 Javascript
JS正则表达式判断有效数实例代码
2017/03/13 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
Webpack执行命令参数详解
2017/06/17 Javascript
node前端模板引擎Jade之标签的基本写法
2018/05/11 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
2020/09/21 Javascript
Python中扩展包的安装方法详解
2017/06/14 Python
Django def clean()函数对表单中的数据进行验证操作
2020/07/09 Python
提高python代码运行效率的一些建议
2020/09/29 Python
Python3获取cookie常用三种方案
2020/10/05 Python
实例讲解HTML5的meta标签的一些应用
2015/12/08 HTML / CSS
HTML中meta标签及Keywords
2020/04/15 HTML / CSS
AE美国鹰日本官方网站: American Eagle Outfitters
2016/12/10 全球购物
大学生求职推荐信
2013/11/27 职场文书
医学专业大学生求职的自我评价
2013/11/27 职场文书
经销商订货会主持词
2014/03/27 职场文书
初三学生评语大全
2014/04/24 职场文书
学生会竞选演讲稿学习部
2014/08/25 职场文书
2014党员民主评议个人思想剖析发言
2014/09/19 职场文书
四风对照检查材料范文
2014/09/27 职场文书
工作经历证明书范文
2014/11/02 职场文书
上课迟到检讨书
2015/05/06 职场文书