微信小程序 回到顶部按钮滚动到特定位置出现与点击回跳功能
WXML:
<!-- 返回顶部悬浮 --> <view class="to_top_view" bindtap="toTop" hidden="{{!showToTop}}"> <image src="/resources/images/carBuying/to_top.png" mode="widthFix"></image> </view>
JS:
data: { showToTop: false }, /** * 方法区 */ // 点击回到顶部 toTop() { wx.pageScrollTo({ scrollTop: 0, duration: 500, }) }, /** * 用户滚动页面时 */ onPageScroll(e) { if (e.scrollTop > 780) { this.setData({ showToTop: true }) } else { this.setData({ showToTop: false }) } }
WXSS:
.to_top_view { display: flex; justify-content: center; align-items: center; position: fixed; right: 3%; bottom: 1%; width: 100rpx; height: 100rpx; z-index: 1; }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 提示词工程——AI应用必不可少的技术