欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2019年05月09日 11:25:56   作者：sxs1995  
這篇文章主要介紹了詳解微信小程序回到頂部的兩種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

在做微信小程序開發(fā)時，遇到一個問題，要如何實(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)前位置
 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)前微信版本過低，無法使用該功能，請升級到最新微信版本后重試。'
   })
  }
 },

二.使用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)前位置
 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
  });
 },

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

相關(guān)文章

  • js實(shí)現(xiàn)蒙版效果

    js實(shí)現(xiàn)蒙版效果

    這篇文章主要為大家詳細(xì)介紹了比較常見的js蒙版效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-01-01
  • JavaScript函數(shù)apply()和call()用法與異同分析

    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ì)模式之裝飾者模式詳解

    這篇文章主要介紹了深入理解JavaScript系列（29）：設(shè)計(jì)模式之裝飾者模式詳解,裝飾者用用于包裝同接口的對象,不僅允許你向方法添加行為,而且還可以將方法設(shè)置成原始對象調(diào)用（例如裝飾者的構(gòu)造函數(shù)）,需要的朋友可以參考下
    2015-03-03
  • JavaScript適配器模式的應(yīng)用詳解

    JavaScript適配器模式的應(yīng)用詳解

    這篇文章主要介紹了理解JavaScript中的適配器模式,適配器模式即Adapter Pattern，是作為兩個不兼容的接口之間的橋梁。這種類型的設(shè)計(jì)模式屬于結(jié)構(gòu)型模式，下文更多相關(guān)介紹需要的小伙伴可以參考一下
    2022-08-08
  • 利用JavaScript獲取用戶IP屬地方法詳解

    利用JavaScript獲取用戶IP屬地方法詳解

    最近很多平臺都上線了顯示用戶的位置信息的功能，那么這是如何做到的， 據(jù)說這個位置信息的準(zhǔn)確性在通信網(wǎng)絡(luò)運(yùn)營商那里？本文將來探究一下
    2022-05-05
  • 微信小程序?qū)崿F(xiàn)拉鏈?zhǔn)降幕瑒域?yàn)證

    微信小程序?qū)崿F(xiàn)拉鏈?zhǔn)降幕瑒域?yàn)證

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)拉鏈?zhǔn)降幕瑒域?yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-05-05
  • 用js來刷新當(dāng)前頁面保留參數(shù)的具體實(shí)現(xiàn)

    用js來刷新當(dāng)前頁面保留參數(shù)的具體實(shí)現(xiàn)

    本文為大家詳細(xì)介紹下如何使用js來刷新當(dāng)前頁面保留參數(shù)，下面有個不錯的實(shí)現(xiàn)大家可以看看
    2013-12-12
  • TypeScript 引用資源文件后提示找不到的異常處理技巧

    TypeScript 引用資源文件后提示找不到的異常處理技巧

    這篇文章主要介紹了TypeScript 引用資源文件后提示找不到的異常處理,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2020-07-07
  • 微信小程序發(fā)送短信驗(yàn)證碼完整實(shí)例

    微信小程序發(fā)送短信驗(yàn)證碼完整實(shí)例

    這篇文章主要介紹了微信小程序發(fā)送短信驗(yàn)證碼完整實(shí)例，實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼，帶60秒倒計(jì)時功能，無需服務(wù)器端，非常具有實(shí)用價值，需要的朋友可以參考下
    2019-01-01
  • JavaScript基于ChatGPT實(shí)現(xiàn)打字機(jī)消息回復(fù)

    JavaScript基于ChatGPT實(shí)現(xiàn)打字機(jī)消息回復(fù)

    ChatGPT 是一個基于深度學(xué)習(xí)的大型語言模型，處理自然語言需要大量的計(jì)算資源和時間，響應(yīng)速度肯定比普通的讀數(shù)據(jù)庫要慢的多，本文介紹了ChatGPT打字機(jī)消息回復(fù)實(shí)現(xiàn)原理，感興趣的同學(xué)可以跟著小編一起學(xué)習(xí)
    2023-05-05

最新評論