6行代碼實現(xiàn)微信小程序頁面返回頂部效果
更新時間：2018年12月28日 16:21:24 作者：豆i漿
這篇文章主要為大家詳細介紹了6行代碼實現(xiàn)微信小程序頁面返回頂部效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序頁面返回頂部的具體代碼，供大家參考，具體內(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;
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了javascript實現(xiàn)手動點贊效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-04-04
JavaScript Archive Network 集合...2007-05-05
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)簡易的計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
先來看一下幾個常用瀏覽器的攔截設(shè)置2010-02-02
詳解JavaScript對數(shù)組操作（添加/刪除/截取/排序/倒序）
這篇文章主要介紹了JavaScript對數(shù)組操作，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
JTrackBar水平拖動效果...2007-07-07
上次初步介紹了什么是控制臺，以及簡單的 console.log 輸出信息。最后還有兩個小問題，我們就當(dāng)回顧，來看下怎么操作吧2014-06-06
uniapp中table表格設(shè)置寬度無效的原因以及解決方法
項目中遇到table表格單元格不整齊、錯位等情況,下面這篇文章主要給大家介紹了關(guān)于uniapp中table表格設(shè)置寬度無效的原因以及解決方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了微信小程序開發(fā)之IOS和Android兼容的問題的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-09-09
這篇文章主要為大家詳細介紹了js+canvas實現(xiàn)驗證碼功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07