微信小程序页面返回顶部效果

news/2024/7/20 3:02:05 标签: 小程序

给大家分享一个微信小程序页面返回顶部的效果,具体内容如下:
1、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>

2、js代码

Page({
 data: {
  topNum: 0
 },

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

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

以上就是页面返回顶部的全部内容,希望对大家有所帮助。


http://www.niftyadmin.cn/n/1510664.html

相关文章

Nodejs编码转化问题

目前Node.js仅支持hex、utf8、ascii、binary、base64、ucs2几种编码的转换。对于GBK&#xff0c;GB2312等编码&#xff0c;Nodejs自带的toString()方法不支持&#xff0c;因此中文转化的时候需要加载第三方库&#xff0c;主要有两个编码转换库iconv-lite和encoding&#xff0c;…

mysql java测试_java 连接mysql 并测试是否成功

java 连接mysql 并测试是否成功。package com.test.tool;import java.sql.Connection;import java.sql.DriverManager;import java.sql.PreparedStatement;import java.sql.ResultSet;import java.sql.SQLException;import java.sql.Statement;public class JDBCUtlTool {publi…

asp.neti 加密三种方式

public string Get_MD5_Method1(string strSource){System.Security.Cryptography.MD5 md5 new System.Security.Cryptography.MD5CryptoServiceProvider();//获取密文字节数组 byte[] bytResult md5.ComputeHash(System.Text.Encoding.Default.GetBytes(strSource));//转换成…

并查集c++代码_并查集经典-岛屿问题-除法问题

什么是并查集&#xff1a;上次mentor和其他小伙伴开会&#xff0c;对对方说&#xff0c;啊&#xff0c;你用并查集去做啊&#xff0c;并查集电话那头传来一阵沉默。什么是并查集&#xff1f;mentor急了 啊就是一种算法&#xff0c;一种算法。对方。。。算法&#xff1f;&#x…

微信小程序中使用Echarts 折线图、柱形图、饼状图

在做小程序时需要用到图表&#xff0c;今天就研究了下Echarts在小程序中怎么使用。在官方文档上看了下如何使用及基本配置方法&#xff0c;包括如何在json、js中引入&#xff0c;具体配置和引入方法可以多看下Echart官方文档。&#xff08;官方文档地址&#xff1a;https://ech…

mysql 5.6初始化数据库_求高手帮忙解决有关mysql5.6.10安装初始化数据库问题

服务器版本&#xff1a;FreeBSD8.4_64需要原来装有mysql5.1&#xff0c;想再另外一个目录安装一个5.6的版本tar zxvf mysql-5.6.10.tar.gzcd mysql-5.6.10pkg_add -r -v cmake(我这里是源码包安装的)--设置安装路径cmake -DCMAKE_INSTALL_PREFIX/usr/local/mysql2--编译安装mak…

Response.Redirect 打开新窗体的两种方法

普通情况下&#xff0c;Response.Redirect 方法是在server端进行转向&#xff0c;因此&#xff0c;除非使用 Response.Write("<script>window.locationhttp://dotnet.aspx.cc;</script>") 方法外&#xff0c;是不能在新窗体打开所指定的 URL 地址的。可…

iframe嵌套iframe 页面高度自适应

做项目的时候遇到了iframe嵌套iframe 需要页面高度跟随页面内容多少来显示。而且还不能使用iframe自带的scrolling滚动条。 刚开始就算父iframe高度 计算错误&#xff0c;导致页面显示只显示一半的内容。 解决方法是 &#xff1a; 在iframe子页面加载完成时首先将iframe的高度…