6行代碼實(shí)現(xiàn)微信小程序頁(yè)面返回頂部效果

更新時(shí)間：2018年12月28日 16:21:24 作者：豆i漿

這篇文章主要為大家詳細(xì)介紹了6行代碼實(shí)現(xiàn)微信小程序頁(yè)面返回頂部效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序頁(yè)面返回頂部的具體代碼，供大家參考，具體內(nèi)容如下

效果預(yù)覽：

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JS彈出窗口代碼大全(詳細(xì)整理)
如何利用網(wǎng)頁(yè)彈出各種形式的窗口，我想大家大多都是知道些的，但那種多種多樣的彈出式窗口是怎么搞出來(lái)的，平時(shí)利用業(yè)余時(shí)間整理了一些，需要的朋友可以參考一下
2012-12-12
js數(shù)組如何添加json數(shù)據(jù)及js數(shù)組與json的區(qū)別
在JSON中，有兩種數(shù)據(jù)結(jié)構(gòu)：對(duì)象和數(shù)組。本篇文章給大家介紹js數(shù)組如何添加json數(shù)據(jù)以及js數(shù)組和json的區(qū)別，涉及到j(luò)s json數(shù)組添加相關(guān)知識(shí)，感興趣的朋友可以參考下本篇文章
2015-10-10
原生js拖拽(第一課未兼容)拖拽思路
第一步點(diǎn)擊需要拖動(dòng)的元素,在點(diǎn)擊下的元素被選中，進(jìn)行move移動(dòng),當(dāng)鼠標(biāo)彈起的時(shí)候，停止動(dòng)作.點(diǎn)擊元素oDIV的時(shí)候，可用的是oDIV區(qū)域，而move和up則是全局區(qū)域
2013-03-03
JavaScript實(shí)現(xiàn)的斑馬線表格效果【隔行變色】
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的斑馬線表格效果,通過(guò)javascript針對(duì)table表格的遍歷與運(yùn)算實(shí)現(xiàn)隔行變色功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2017-09-09
原生js實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)菜單
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-11-11
微信小程序setInterval定時(shí)函數(shù)新手使用的超詳細(xì)教程
平時(shí)開(kāi)發(fā)中為實(shí)現(xiàn)倒計(jì)時(shí)效果可以使用setInterval即可,下面這篇文章主要給大家介紹了關(guān)于微信小程序setInterval定時(shí)函數(shù)新手使用的超詳細(xì)教程,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-08-08
js實(shí)現(xiàn)prototype擴(kuò)展的方法(字符串,日期,數(shù)組擴(kuò)展)
這篇文章主要介紹了js實(shí)現(xiàn)prototype擴(kuò)展的方法,實(shí)例分析了JavaScript針對(duì)字符串、日期、數(shù)組等的prototype擴(kuò)展相關(guān)技巧,需要的朋友可以參考下
2016-01-01
微信小程序?qū)崿F(xiàn)YDUI的ScrollTab組件
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)YDUI的ScrollTab組件，滾動(dòng)選項(xiàng)卡效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-02-02
解決JS使用fill()進(jìn)行數(shù)組填充遇到的問(wèn)題
最近在做算法題時(shí),遇到需要?jiǎng)?chuàng)建二維數(shù)組并進(jìn)行初始化的情況,剛開(kāi)始我使用的是 new Array(n).fill(new Array(n).fill('.')) 進(jìn)行二維數(shù)組的初始化,但無(wú)論怎樣我都通不過(guò)測(cè)試用例,所以本文就給大家詳細(xì)的介紹了如何解決這類問(wèn)題以及將js中的fill（方法重學(xué)一下
2023-09-09
js實(shí)現(xiàn)瀑布流效果（自動(dòng)生成新的內(nèi)容）
本文主要介紹了js實(shí)現(xiàn)瀑布流效果：當(dāng)滾動(dòng)條接近底部會(huì)自動(dòng)生成新的內(nèi)容。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
2017-03-03