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 this 和 $(this) 的区别
Aug 23 Javascript
JQuery 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
基于jquery的jqDnR拖拽溢出的修改
Feb 12 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
Jul 15 Javascript
JS中prototype关键字的功能介绍及使用示例
Jul 21 Javascript
JS小功能(button选择颜色)简单实例
Nov 29 Javascript
获取鼠标在div中的相对位置的实现代码
Dec 30 Javascript
完美解决axios在ie下的兼容性问题
Mar 05 Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
Vue项目实现换肤功能的一种方案分析
Aug 28 Javascript
基于vue-cli3创建libs库的实现方法
Dec 04 Javascript
JS面向对象之单选框实现
Jan 17 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
PHP入门
2006/10/09 PHP
PHP加速 eAccelerator配置和使用指南
2009/06/05 PHP
用sql命令修改数据表中的一个字段为非空(not null)的语句
2010/06/04 PHP
php 获取全局变量的代码
2011/04/21 PHP
php输出xml格式字符串(用的这个)
2012/07/12 PHP
析构函数与php的垃圾回收机制详解
2013/10/28 PHP
php文件上传的两种实现方法
2016/04/04 PHP
innerHTML,outerHTML,innerTEXT三者之间的区别
2007/01/28 Javascript
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
Html5的placeholder属性(IE兼容)实现代码
2014/08/30 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
2014/09/03 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
2016/01/26 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
three.js 入门案例详解
2018/01/23 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
2019/09/18 Javascript
[33:23]Secret vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
对命令行模式与python交互模式介绍
2018/05/12 Python
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
浅谈python中str字符串和unicode对象字符串的拼接问题
2018/12/04 Python
python requests使用socks5的例子
2019/07/25 Python
Python使用Pandas对csv文件进行数据处理的方法
2019/08/01 Python
python已协程方式处理任务实现过程
2019/12/27 Python
HTML5中使用postMessage实现Ajax跨域请求的方法
2016/04/19 HTML / CSS
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
瑞士设计师家具和家居饰品网上商店:Bruno Wickart
2019/03/18 全球购物
公司寄语大全
2014/04/10 职场文书
学前班评语大全
2014/05/04 职场文书
会计主管岗位职责
2015/04/02 职场文书
大学考试作弊检讨书
2015/05/06 职场文书
商务宴会祝酒词
2015/08/11 职场文书
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS
python中的None与NULL用法说明
2021/05/25 Python