微信小程序实现一键回到顶部功能

2025-07-07 11:17:13

做微信小程序的时候遇到了这个问题要求列表页要做一个实现上拉一定距离后显示一键返回顶部的点击可以一下子回到列表顶部。

遇到问题不要慌

面向百度编程 ----上代码

.wxml文件代码

<!-- 返回顶部  -->
            <view class='goTop' hidden='{{!scrollTop}}' bindtap="goTop">
            返回顶部  //这里可以换成一个图标
            </view>

.wxss文件代码

.goTop{
    height: 80rpx;
    width: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 200rpx;
    background: rgba(0,0,0,.3);
    right: 80rpx; 
    border-radius: 50%;
    z-index: 9;
    }

.js文件代码

Page({

  /**
   * 页面的初始数据
   */
  data: {
    scrollTop: false,
  },
  //回到顶部

goTop: function (e) {
  // 一键回到顶部
  if (wx.pageScrollTo) {
  
  wx.pageScrollTo({ scrollTop: 0 })
  
  } else {
  
  wx.showModal({
  
  title: '提示', content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
  
  })
  } 
},
  // 获取滚动条当前位置
  onPageScroll: function (e) {
  
    if (e.scrollTop > 200) {
    
      this.setData({
        scrollTop: true
      });
      
    } else {
    
      this.setData({
        scrollTop: false
      });
      
    }
  }
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

详解微信小程序回到顶部的两种方式

在做微信小程序开发时,遇到一个问题,要如何实现返回顶部的功能,下面就用2种方法实现一,使用view形式的回到顶部 HTML: <image src='../../img/button-top.png' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop"></image> CSS: /* 返回顶部 */ .goTop{ height: 80rpx; width: 80rpx; position: fix
微信小程序实现一键回到顶部功能

做微信小程序的时候遇到了这个问题要求列表页要做一个实现上拉一定距离后显示一键返回顶部的点击可以一下子回到列表顶部. 遇到问题不要慌面向百度编程 ----上代码 .wxml文件代码  <view class='goTop' hidden='{{!scrollTop}}' bindtap="goTop"> 返回顶部 //这里可以换成一个图标 </view&g
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例

本文实例讲述了微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能.分享给大家供大家参考,具体如下: 顶部滚动选项卡话不多说,直接上代码 pages/home/home.wxml <scroll-view scroll-x="true" style='width: 100%; white-space:nowrap; '>  <view class="tab"> <view class=&qu
微信小程序开发一键登录获取session_key和openid实例

微信小程序开发一键登录获取session_key和openid实例思来想去不愿自己的微信小程序是个单机版本.自己又不会写后台.现在借助leancloud可以实现微信小程序一键登录功能.尝试后,做笔记. 第一步:下载av-weapp.js,放到utils下. 第二步:使用 const AV = require('../../utils/av-weapp.js');路径根据具体情况而定. 第三步:做初始化. AV.init({ appId: 'EJx0NSfY********-gzGzoHsz'
微信小程序系列之自定义顶部导航功能

具备基础 vue框架:vue官方文档 mpvue框架:mpvue官方文档全局配置 •找到全局的app.json文件,在配置中添加如下内容: "navigationStyle": "custom" "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", &q
微信小程序--特定区域滚动到顶部时固定的方法

项目要求: 如图所示,当页面滚动到导航条到达搜索栏下方时固定,向上滚动到导航条位置时又恢复原样. 以下是代码展示: 1.wxml <scroll-view style="width:100%;height: 100%;" scroll-y="true" bindscroll="scrollTopFun"> <view class="{{top>130 ? 'topnav' : ''}}"> <
微信小程序实现锚点定位功能的方法实例

前言在小程序开发中,我们经常会遇到滚动列表查看的需求,那么使用锚点定位来实现可以达到交互体验更加友好的效果,我们看下项目中实现的效果: 功能实现采用小程序视图容器组件实现:scroll-view 这里需要注意的是,竖向滚动时,scroll-view需要指定一个固定高度,我们看下WXML代码: <scroll-view style="height:{{autoHeight}};" scroll-y scroll-into-view="{{toView}}"
微信小程序实现带刻度尺滑块功能

摘要: 与自带的slider不同的是,它是通过手势滑动标尺得到取值,而不是通过滑动滑块本身. 效果图场景当一屏显示不下,例如年龄体重选择,金额选择等大区间需要的选择器,相比自带的picker要直观一些. 思路: 先画一个scrollView 2 装进canvas lineTo画刻度线段,lineTo+fill画出三角形游标,fillText描绘文本标签通过bindscroll监听刻度尺触摸事件渲染取值到页面基本布局 <scroll-view scroll-x="true"
微信小程序向左滑动删除功能的实现

微信小程序向左滑动删除功能的实现实现效果图: 实现代码: 1.wxml touch-item元素绑定了bindtouchstart.bindtouchmove事件 <view class="container"> <view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" bindtouchst
微信小程序实现添加手机联系人功能示例

本文实例讲述了微信小程序实现添加手机联系人功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 1)WXML文件 <view bindlongtap="phoneNumTap">{{phoneNum}}</view> 2)JS文件 Page({ data:{ phoneNum:'12345678901'//测试用的号码,并非真实号码 }, // 长按号码响应函数 phoneNumTap:function(){ var that=this; //
微信小程序实现的自定义分享功能示例

本文实例讲述了微信小程序实现的自定义分享功能.分享给大家供大家参考,具体如下: 大家都知道,小程序有分享的功能,可以分享整个程序,也可以自定义分享的内容 onShareAppMessage 在 Page 中定义 onShareAppMessage 函数,设置该页面的分享信息. 只有定义了此事件处理函数,右上角菜单才会显示"分享"按钮用户点击分享按钮的时候会调用此事件需要 return 一个 Object,用于自定义分享内容示例代码: Page({ onShareAppMessag

微信小程序实现一键回到顶部功能

相关推荐

随机推荐