整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          微信小程序返回到頂部功能的簡單實現

          微信小程序返回到頂部功能的簡單實現

          更新時間:2022年11月18日 12:13:31 作者:前端若水

          在做微信小程序開發時,遇到一個問題,要如何實現返回頂部的功能,下面這篇文章主要給大家介紹了微信小程序返回到頂部功能的簡單實現,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

          目錄

          業務需求

          今天公司的PM給我提了個需求,微信小程序需要做一個返回頂部的功能,返回頂部的按鈕也是需要滑動到頁面指定內容顯示過后才出現的,微信小程序中沒有a標簽,我通過查看小程序文檔結合思路將此功能實現

          頁面結構

          我們一個頁面中有一個nav類名的返回頂部元素,和一個text類名盒子用于作為顯示返回頂部元素的界點

          
            返回頂部
            
            
              展示頂部返回按鈕
            
          

          樣式

          頁面大盒子我們使用背景顏色漸變色給一個高度用于做出滾動的效果,然后將返回頂部的按鈕和頁面中的內容設置下樣式

          /* 頁面大盒子樣式 */
          .page {
            width: 100%;
            height: 1500px;
            background: linear-gradient(to bottom, red, blue, #fff, yellow);
            padding-top: 700rpx;
          }
          /* 返回頂部按鈕樣式 */
          .nav {
            position: fixed;
            right: 10rpx;
            bottom: 50rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 70rpx;
            height: 100rpx;
            padding: 10rpx;
            background: rgb(216, 148, 148);
            border-radius: 10rpx;
          }
          /* 內容樣式 */
          .text {
            margin-top: 500rpx;
            color: #fff;
          

          頂部返回微信程序小程序在哪_小程序返回頂部代碼_微信小程序 返回頂部

          display: flex; justify-content: center; align-items: center; }

          實現邏輯

          我們通過頁面加載獲取到頁面內容距離頂部的高度,然后將此高度設置為指定滑動距離,然后再通過方法去監聽頁面滑動控制返回頂部變量的改變,以此控制返回頂部按鈕的顯示與隱藏,然后在給返回頂部按鈕綁定一個backTop方法,點擊返回頂部按鈕就通過微信小程序的API控制頁面直接返回頂部

          Page({
            data: {
              //滑動的指定距離,用于作為返回頂部標記改變的界點
              top: 0,
              // 返回頂部標記,頂部標記為true則返回頂部按鈕顯示,頂部標記為false,則返回頂部按鈕不展示
              isTop: false
            },
            /**
             * @function 返回頂部執行方法
             */
            backTop() {
              //這是微信小程序給我們提供的頁面滾動API方法
              wx.pageScrollTo({
                // 頁面滾動的距離
                scrollTop: 0,
                // 滾動動畫執行時間,我們這里就讓他執行100毫秒
                duration: 100
              })
            },
            /**
             * 
             * @function 監聽頁面滑動
             */
            onPageScroll(e) {
              // 使用ES6的方式頁面滾動的event對象中的滾動距離scrollTop變量解構出來
              let {
                scrollTop
              } = e;
              // 將滑動的指定距離變量和是否顯示返回頂部按鈕標記也解構出來
              let {
                top,
                isTop
              } = this.data;
              // 判斷當前滾動的距離是否大于等于我們設定的滑動的指定距離且當前返回頂部按鈕標記為false
              if (scrollTop >= top && !isTop) {
                // 進入則表示滑動達到了指定位置,我們將返回頂部標記改為true將返回頂部按鈕進行展示出來
                this.setData({
                  isTop: true
                })
              } else {
                // 如果上述條件則表示要么是未達到執行位置或者已經返回頂部標記為true了,所以我們這里需要在判斷一下,當前的滾動距離是否小于我們設定的指定滑動距離和當前返回頂部標記是否為true,這樣我們就只判斷當前滑動到指定位置和滑動小于指定位置,如果大于滑動指定位置我們就不做處理
                if (scrollTop <= top && isTop) {
                  // 如果小于滑動指定距離,我們就將返回頂部按鈕顯示標記改為false
                  this.setData({
                    isTop: false
                  })
                }
              }
            },
            /**
             * @function 獲取元素
             *  @return {number} id
             */
            query(id, fn) {
              // 通過微信的方式進行獲取元素對象進行操作,接受值為id,我們用回調函數進行處理
              let query = wx.createSelectorQuery();
              query.select(id).boundingClientRect()
              query.selectViewport().scrollOffset()
              query.exec(fn)
            },
            onLoad() {
              // 我們將當前頁面中的內容id傳遞進去,通過內容距離頂部的高度,設置滑動的指定距離
              this.query("#pos", (e) => {
                let {
                  top
                } = e[0];
                this.setData({
                  top
                })
              })
            }
          })

          總結

          到此這篇關于微信小程序返回到頂部功能的文章就介紹到這了,更多相關微信小程序返回到頂部內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持腳本之家!


          主站蜘蛛池模板: 亚洲bt加勒比一区二区| 国产精品无码一区二区三区毛片| 日韩免费无码视频一区二区三区| 精品亚洲福利一区二区| 精品一区二区三区在线视频| 午夜肉伦伦影院久久精品免费看国产一区二区三区 | 精品人妻中文av一区二区三区| 高清一区二区三区| 人妻夜夜爽天天爽一区| 国产大秀视频在线一区二区| 日韩亚洲AV无码一区二区不卡 | A国产一区二区免费入口| 日本无卡码免费一区二区三区| 精品不卡一区二区| 无码国产精品一区二区免费式直播| 亚洲色精品aⅴ一区区三区| 久久精品国产一区二区三区| 色综合视频一区二区三区 | 无人码一区二区三区视频| 亚洲一区精品伊人久久伊人 | 97人妻无码一区二区精品免费| 骚片AV蜜桃精品一区| 日韩一区二区在线观看视频| 中文字幕在线看视频一区二区三区 | 成人久久精品一区二区三区| 怡红院一区二区在线观看| 欧洲精品一区二区三区| 波多野结衣一区在线| 亚洲国产成人久久一区WWW| 中文字幕一区二区在线播放| 熟妇人妻一区二区三区四区| 久久久久久综合一区中文字幕| 亚洲乱码日产一区三区| 色噜噜狠狠一区二区三区果冻 | 精品国产免费一区二区| 一区二区在线视频观看| 日韩精品无码视频一区二区蜜桃| 国产一区二区三区在线2021| 中文字幕精品一区二区日本| 成人区人妻精品一区二区不卡| 国产成人久久一区二区不卡三区|