快捷導(dǎo)航

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

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

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

在做微信小程序開(kāi)發(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)文章

js實(shí)現(xiàn)蒙版效果
這篇文章主要為大家詳細(xì)介紹了比較常見(jiàn)的js蒙版效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-01-01
JavaScript函數(shù)apply()和call()用法與異同分析
這篇文章主要介紹了JavaScript函數(shù)apply()和call()用法與異同,結(jié)合實(shí)例形式分析了apply()和call()的功能、區(qū)別、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2018-08-08
深入理解JavaScript系列（29）：設(shè)計(jì)模式之裝飾者模式詳解
這篇文章主要介紹了深入理解JavaScript系列（29）：設(shè)計(jì)模式之裝飾者模式詳解,裝飾者用用于包裝同接口的對(duì)象,不僅允許你向方法添加行為,而且還可以將方法設(shè)置成原始對(duì)象調(diào)用（例如裝飾者的構(gòu)造函數(shù)）,需要的朋友可以參考下
2015-03-03
JavaScript適配器模式的應(yīng)用詳解
這篇文章主要介紹了理解JavaScript中的適配器模式,適配器模式即Adapter Pattern，是作為兩個(gè)不兼容的接口之間的橋梁。這種類型的設(shè)計(jì)模式屬于結(jié)構(gòu)型模式，下文更多相關(guān)介紹需要的小伙伴可以參考一下
2022-08-08
利用JavaScript獲取用戶IP屬地方法詳解
最近很多平臺(tái)都上線了顯示用戶的位置信息的功能，那么這是如何做到的，據(jù)說(shuō)這個(gè)位置信息的準(zhǔn)確性在通信網(wǎng)絡(luò)運(yùn)營(yíng)商那里？本文將來(lái)探究一下
2022-05-05
微信小程序?qū)崿F(xiàn)拉鏈?zhǔn)降幕瑒?dòng)驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)拉鏈?zhǔn)降幕瑒?dòng)驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-05-05
用js來(lái)刷新當(dāng)前頁(yè)面保留參數(shù)的具體實(shí)現(xiàn)
本文為大家詳細(xì)介紹下如何使用js來(lái)刷新當(dāng)前頁(yè)面保留參數(shù)，下面有個(gè)不錯(cuò)的實(shí)現(xiàn)大家可以看看
2013-12-12
TypeScript 引用資源文件后提示找不到的異常處理技巧
這篇文章主要介紹了TypeScript 引用資源文件后提示找不到的異常處理,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-07-07
微信小程序發(fā)送短信驗(yàn)證碼完整實(shí)例
這篇文章主要介紹了微信小程序發(fā)送短信驗(yàn)證碼完整實(shí)例，實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼，帶60秒倒計(jì)時(shí)功能，無(wú)需服務(wù)器端，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2019-01-01
JavaScript基于ChatGPT實(shí)現(xiàn)打字機(jī)消息回復(fù)
ChatGPT 是一個(gè)基于深度學(xué)習(xí)的大型語(yǔ)言模型，處理自然語(yǔ)言需要大量的計(jì)算資源和時(shí)間，響應(yīng)速度肯定比普通的讀數(shù)據(jù)庫(kù)要慢的多，本文介紹了ChatGPT打字機(jī)消息回復(fù)實(shí)現(xiàn)原理，感興趣的同學(xué)可以跟著小編一起學(xué)習(xí)
2023-05-05