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 相关文章推荐
Js+XML 操作
Sep 20 Javascript
jquery插件validate验证的小例子
May 08 Javascript
javascript中拼接HTML字符串的最快、最好的方法
Jun 07 Javascript
js代码实现点击按钮出现60秒倒计时
Jan 28 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
May 03 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
Sep 25 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
May 07 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
Oct 15 Javascript
在Webpack中用url-loader处理图片和字体的问题
Apr 28 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
Jun 05 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
Oct 30 Javascript
低门槛开发iOS、Android、小程序应用的前端框架详解
Oct 16 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
中国第一家无线电行
2021/03/01 无线电
php表单提交问题的解决方法
2011/04/12 PHP
php中Smarty模板初体验
2011/08/08 PHP
浅谈PHP调用Webservice思路及源码分享
2014/06/04 PHP
PHP利用Socket获取网站的SSL证书与公钥
2017/06/18 PHP
浅析PHP 中move_uploaded_file 上传中文文件名失败
2019/04/17 PHP
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
jQuery $命名冲突解决方案汇总
2014/11/13 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
2015/01/19 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
WebView启动支付宝客户端支付失败的问题小结
2017/01/11 Javascript
AngularJS Select(选择框)使用详解
2017/01/18 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
Angular.js中angular-ui-router的简单实践
2017/07/18 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
2018/03/02 Javascript
vuex进阶知识点巩固
2018/05/20 Javascript
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
Python实现iOS自动化打包详解步骤
2018/10/03 Python
Python docx库用法示例分析
2019/02/16 Python
我就是这样学习Python中的列表
2019/06/02 Python
Python学习笔记之pandas索引列、过滤、分组、求和功能示例
2019/06/03 Python
Pytorch自己加载单通道图片用作数据集训练的实例
2020/01/18 Python
django中related_name的用法说明
2020/05/20 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
Sunglasses Shop丹麦:欧洲第一的太阳镜在线销售网站
2017/10/22 全球购物
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
init进程的作用
2015/08/20 面试题
安全生产检查通报
2014/01/29 职场文书
班级年度安全计划书
2014/05/01 职场文书
2015年计算机教师工作总结
2015/07/22 职场文书
关于五一放假的通知
2015/08/18 职场文书
python 如何将两个实数矩阵合并为一个复数矩阵
2021/05/19 Python