詳解微信小程序回到頂部的兩種方式

更新時(shí)間：2019年05月09日 11:25:56 作者：sxs1995

這篇文章主要介紹了詳解微信小程序回到頂部的兩種方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

在做微信小程序開發(fā)時(shí)，遇到一個(gè)問(wèn)題，要如何實(shí)現(xiàn)返回頂部的功能，下面就用2種方法實(shí)現(xiàn)

一,使用view形式的回到頂部

HTML：

<image src='../../img/button-top.png' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop"></image>

CSS：

/* 返回頂部 */
.goTop{
 height: 80rpx;
 width: 80rpx;
 position: fixed;
 bottom: 50rpx;
 background: rgba(0,0,0,.3);
 right: 30rpx;
 border-radius: 50%;
}

JS：

 // 獲取滾動(dòng)條當(dāng)前位置
 onPageScroll: function (e) {
  console.log(e)
  if (e.scrollTop > 100) {
   this.setData({
    floorstatus: true
   });
  } else {
   this.setData({
    floorstatus: false
   });
  }
 },

 //回到頂部
 goTop: function (e) { // 一鍵回到頂部
  if (wx.pageScrollTo) {
   wx.pageScrollTo({
    scrollTop: 0
   })
  } else {
   wx.showModal({
    title: '提示',
    content: '當(dāng)前微信版本過(guò)低，無(wú)法使用該功能，請(qǐng)升級(jí)到最新微信版本后重試。'
   })
  }
 },

二.使用scroll-view形式的回到頂部

<scroll-view scroll-y scroll-top='{{topNum}}' bindscroll="scrolltoupper">
<image src='../../img/button-top.png' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop"></image>

CSS：

/* 返回頂部 */
.goTop{
 height: 80rpx;
 width: 80rpx;
 position: fixed;
 bottom: 50rpx;
 background: rgba(0,0,0,.3);
 right: 30rpx;
 border-radius: 50%;
}

JS：

 data:{
  topNum: 0
 }

 // 獲取滾動(dòng)條當(dāng)前位置
 scrolltoupper:function(e){
  console.log(e)
  if (e.detail.scrollTop > 100) {
   this.setData({
    floorstatus: true
   });
  } else {
   this.setData({
    floorstatus: false
   });
  }
 },

 //回到頂部
 goTop: function (e) { // 一鍵回到頂部
  this.setData({
   topNum: this.data.topNum = 0
  });
 },

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

您可能感興趣的文章:

微信小程序?qū)崿F(xiàn)一鍵回到頂部功能

相關(guān)文章

微信小程序自定義導(dǎo)航欄功能的實(shí)現(xiàn)
本文介紹了微信小程序自定義導(dǎo)航欄功能的實(shí)現(xiàn)方法,首先,需要去掉原生導(dǎo)航欄,可以通過(guò)在page.json中去掉navigationBarTitleText并加上"navigationStyle":"custom"來(lái)實(shí)現(xiàn),然后,可以使用組件封裝來(lái)實(shí)現(xiàn)自定義導(dǎo)航欄的功能,感興趣的朋友一起看看吧
2025-01-01
JavaScript設(shè)計(jì)模式策略模式案例分享
這篇文章主要介紹了JavaScript設(shè)計(jì)模式策略模式案例分享，策略設(shè)計(jì)模式就是指一個(gè)問(wèn)題匹配多個(gè)解決方法，不一定要用到哪一個(gè)，而且有可能隨時(shí)增加多個(gè)方案
2022-06-06
Javascript this 的一些學(xué)習(xí)總結(jié)
相信有C++、C#或Java等編程經(jīng)驗(yàn)的各位，對(duì)于this關(guān)鍵字再熟悉不過(guò)了。由于Javascript是一種面向?qū)ο蟮木幊陶Z(yǔ)言，它和C++、C#或Java一樣都包含this關(guān)鍵字，接下來(lái)我們將向大家介紹Javascript中的this關(guān)鍵字
2012-08-08
javascript實(shí)現(xiàn)顯示和隱藏div方法匯總
本文章通過(guò)幾個(gè)簡(jiǎn)單的實(shí)例告訴你如何來(lái)實(shí)例關(guān)于隱藏與顯示div層及關(guān)閉層與隱藏的區(qū)別分析哦，有需要的同學(xué)可以參考一下本文章。
2015-08-08
p5.js入門教程之平滑過(guò)渡(Easing)
本篇文章主要介紹了p5.js入門教程之平滑過(guò)渡(Easing)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
再次談?wù)揓avascript中的this
javascript中的this應(yīng)用非常廣泛，對(duì)js中this總是似是而非的感覺，今天小編豁然開朗，然后再次給大家談?wù)搄s中的this關(guān)鍵，感興趣的朋友跟著小編一起看看吧
2016-06-06
JavaScript使用addEventListener添加事件監(jiān)聽用法實(shí)例
這篇文章主要介紹了JavaScript使用addEventListener添加事件監(jiān)聽的方法,實(shí)例分析了addEventListener方法的相關(guān)使用技巧,需要的朋友可以參考下
2015-06-06
淺談JavaScript 的執(zhí)行順序
JavaScript是一種描述型腳本語(yǔ)言，它不同于java或C#等編譯性語(yǔ)言,它不需要進(jìn)行編譯成中間語(yǔ)言,而是由瀏覽器進(jìn)行動(dòng)態(tài)地解析與執(zhí)行。如果你不能理解javaScript語(yǔ)言的運(yùn)行機(jī)制，或者簡(jiǎn)單地說(shuō)，你不能掌握javascript的執(zhí)行順序，那你就猶如伯樂(lè)駕馭不了千里馬
2015-08-08
JS深拷貝的4種實(shí)現(xiàn)方法
對(duì)于js中的對(duì)象的深拷貝在項(xiàng)目的開發(fā)中比較常用到,本文就來(lái)介紹一下JS深拷貝的4種實(shí)現(xiàn)方法,具有一定的參考價(jià)值,感興趣的可以了解一下
2023-10-10
微信小程序日程預(yù)約功能實(shí)現(xiàn)
本文介紹了如何使用微信小程序開發(fā)一個(gè)日程預(yù)約系統(tǒng),該系統(tǒng)包括頂部日期選擇器、中部的canvas繪制區(qū)和底部的數(shù)據(jù)回顯區(qū),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧
2025-02-02