小程序返回顶部

最新推荐文章于 2024-05-07 09:50:33 发布
最新推荐文章于 2024-05-07 09:50:33 发布
阅读量1.3k 收藏 4
点赞数
分类专栏： 微信小程序 文章标签： 小程序返回顶部
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hangGe0111/article/details/86236957
版权

1.wxml

<!-- 返回首页 -->
<view class='backHoem' bindtap='backHoem'></view>

2.wxss

/****** 返回首页 ******/
.backHoem{
  width: 118rpx;
  height: 118rpx;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHYAAAB2CAYAAAAdp2cRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjI0Nzc2MjdGMTI0MTExRTk5MUFFRTU0QzQ1MzJGMzE0IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjI0Nzc2MjgwMTI0MTExRTk5MUFFRTU0QzQ1MzJGMzE0Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjQ3NzYyN0QxMjQxMTFFOTkxQUVFNTRDNDUzMkYzMTQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjQ3NzYyN0UxMjQxMTFFOTkxQUVFNTRDNDUzMkYzMTQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4MRMVMAAAR4ElEQVR42uyda2wU1xWAz+yOzdq8DNg8SmInvGwapESUJCRtE+VXKpGGKkopBMqPRILAj1YQKTwi5UfyI00lQCJRWtI/eQAlqYogDWqRStKoaRoKREl41K5pzfJo/ADjEBsv9u7c3jN43dnxfZw7u7O7tvdKo5md184935xzzz33zr3WRx99BMM4WSHfnw1XwdgleIH/m5XAhgvSKpC2WsUM2h5GMK08wmWKezLCM7DRDDYoTIt4HysLzbQE+5kBwIJDtosQqGXwOyhkRoBgaaAwQ8hspIK1As
最低0.47元/天 解锁文章
hangGe0111
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
总结-微信小程序自定义顶部导航(超详细)附加效果图
easttour的博客
10-25 1万+
一、在需要设置头部导航栏的页面中通过json配置 "navigationStyle":"custom" ，自定义导航栏，只保留胶囊按钮，效果如下： 二、做完上面的步骤，基本上就可以自定义导航栏了，当然，这还没完，从页面上可以看出，页面里的内容被挡住了，可以通过页面样式加上内边距内容就出来了： 三、可以看出这个内边距是固定死了的，不同的手机型号头部那条栏目高度可能不一致，所以为了我们适配更多型号，我们需要计算3个值： 1. 整个导航栏的高度； 2. 胶囊按钮与顶部的距离； 3...
H5+微信小程序中顶部导航设置：app-plus
bjt1015999的博客
02-26 4267
H5+微信小程序中顶部导航设置：app-plus，通过titleNView下的各种配置实现，主要是考虑两者的兼容问题
微信小程序返回到顶部功能的简单实现
coldriversnow的专栏
11-14 767
到此这篇关于微信小程序返回到顶部功能的文章就介绍到这了,更多相关微信小程序返回到顶部内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
告别繁琐滑动，微信小程序一键回到顶部功能
Shids_的博客
09-28 6476
告别繁琐滑动，微信小程序一键回到顶部功能
微信小程序交互增强：实现上拉加载、下拉刷新与一键返回顶部【代码示例】
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-07 1276
至此，我们已经实现了微信小程序中上拉加载、下拉刷新及一键返回顶部三大交互功能。这些功能不仅能提升用户体验，也是现代Web应用不可或缺的一部分。你是否在实际开发中遇到过特别的挑战？或是有更高效、创意的实现方式？欢迎在评论区分享你的见解和经验，让我们共同探讨，不断优化小程序的交互体验。欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。DTcode7的博客首页。
微信小程序自定义顶部导航栏
实习打字猿的博客
08-21 6538
微信小程序自定义顶部导航栏
6行代码实现微信小程序页面返回顶部效果
10-17
通过以上代码，我们实现了微信小程序页面返回顶部的功能。用户点击“顶部”按钮时，页面会平滑地滚动到顶部，提供了良好的用户体验。在实际开发中，可以根据需求调整样式和功能，例如添加更多交互效果或优化动画性能...
小程序自定义顶部（可以是图片或标题），带返回箭头和回到首页
01-02
标题所提到的"小程序自定义顶部（可以是图片或标题），带返回箭头和回到首页"，正是针对这一需求的一种实现方式。下面我们将详细探讨如何在小程序中实现这样的自定义顶部。 1. **自定义导航栏**：微信小程序提供了...
微信小程序系列之自定义顶部导航功能
01-21
具备基础 vue框架：vue官方文档 mpvue框架：mpvue官方文档 全局配置 •找到全局的app.json文件，在配置中添加如下内容： navigationStyle: custom window: { backgroundTextStyle: light, ...
小程序组件之自定义顶部导航实例
12-10
【小程序组件自定义顶部导航】在微信小程序的开发中，为了满足用户日益增长的多样化和个性化需求，开发者经常需要对顶部导航进行定制，以提供更好的交互体验。自定义顶部导航通常涉及界面设计、功能实现以及不同设备...
微信小程序实现点击返回顶层的方法
08-30
本篇文章将详细讲解如何在微信小程序中实现这一功能。 首先，我们要了解微信小程序中的基本组件及其属性。在这个例子中，`<scroll-view>` 是一个可滚动视图组件，用于展示大量内容。`scroll-y` 属性表示允许垂直...
微信小程序——自定义顶部菜单navigationBar方式（可详细了！）
热门推荐
朕的博客
03-16 1万+
前言：
微信小程序回到顶部的简单方法
夜空下的凝视
06-17 2084
wxml中： <image src='../../img/top.png' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop"></image> wxss中： /* 返回顶部 */ .goTop{ height: 80rpx; width: 80rpx; position: fixed; bott...
uniapp写小程序顶部胶囊部分计算，布局顶部页面更美观
weixin_69666355的博客
03-27 1526
在开发uniapp小程序时，有默认的导航栏，但有时候的需求是不需要顶部的导航部分，比如：我的这个页面顶部就是个搜索框，还有就是安卓和ios默认的导航栏样式是不一样的，ios（默认导航文字在中间），安卓（默认导航文字在左边），所以为了样式的统一都是自己写顶部导航的样式，所以我们就要用到微信提供的获取各个机型胶囊栏距离顶部的距离 wx.getMenuButtonBoundingClientRect()2.顶部搜索的样式html 设置padding-top值 变量titleHeight。
微信原生小程序自定义顶部导航
qq_45219069的博客
06-09 2209
都2023了，自定义顶部导航应该不是什么新鲜事了，这里只是简单记录下微信自己也提供了自定义顶部导航，大概看了下，可配置的也不少，所以看需求了，如果简单可以采用微信提供的，老规矩，先看效果。
微信小程序页面回到顶端的方式
m0_52387040的博客
04-05 5643
文章目录前言一、用scroll-view标签实现回到顶端二、用pageScrollTo回到顶端总结 前言 <scroll-view> </scroll-view> wx.pageScrollTo({ duration: 0, }) 当没有scroll-view标签的时候 wx.pageScrollTo是可以实现回到顶端的 但是有scroll-view标签的时候wx.pageScrollTo就会失效了 但是wx.pageScrollTo可以控制回到顶端动画的
微信小程序：一键回到顶部功能（原生）
一些平时在开发过程中遇到的常见问题，分享给大家
12-24 543
微信小程序官方参考文档说明，可查看。
微信小程序 返回顶部
05-27
要在微信小程序中添加“返回顶部”功能，可以使用以下步骤： 1. 在 WXML 文件中添加一个“返回顶部”按钮，并绑定一个点击事件。 ```html <view class="back-to-top" bindtap="backToTop"> <image src="/images/back-to-top.png"></image> </view> ``` 2. 在对应的 JS 文件中编写“返回顶部”功能的实现代码。 ```javascript Page({ data: { scrollTop: 0 }, // 点击“返回顶部”按钮 backToTop: function() { this.setData({ scrollTop: 0 }); }, // 监听页面滚动事件 onPageScroll: function(e) { if (e.scrollTop > 100) { this.setData({ showBackTop: true }); } else { this.setData({ showBackTop: false }); } } }) ``` 3. 在 CSS 文件中设置“返回顶部”按钮的样式。 ```css .back-to-top { position: fixed; bottom: 100rpx; right: 20rpx; width: 80rpx; height: 80rpx; background-color: #fff; border-radius: 50%; box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.3); opacity: 0; transition: opacity 0.5s ease-in-out; z-index: 999; } .back-to-top image { width: 40rpx; height: 40rpx; } .back-to-top.show { opacity: 1; } ``` 4. 在 WXML 文件中添加一个“scroll-view”组件，并设置其“scroll-top”属性为“scrollTop”变量的值。 ```html <scroll-view scroll-y="true" scroll-top="{{scrollTop}}"> <!-- 省略内容 --> </scroll-view> ``` 5. 在对应的 JS 文件中监听页面滚动事件，并根据页面滚动的位置来控制“返回顶部”按钮的显示和隐藏。 ```javascript Page({ data: { scrollTop: 0, showBackTop: false }, // 点击“返回顶部”按钮 backToTop: function() { this.setData({ scrollTop: 0 }); }, // 监听页面滚动事件 onPageScroll: function(e) { if (e.scrollTop > 100) { this.setData({ showBackTop: true }); } else { this.setData({ showBackTop: false }); } } }) ``` 这样就可以实现“微信小程序返回顶部”的功能了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值