小程序返回到顶部

Myth丶恋晨 2022-12-29 09:35 154阅读 0赞

1.  wxml

<scroll-view scroll-y lower-threshold="100" id="scroller" bindscrolltolower="scrollToLower" bindscroll="scrollPosition" scroll-with-animation="true" 开启动画 scroll-top="{ {topPosition}}" 设置滚动到顶部的值 style="height:100vh">
    	<view wx:for="{ {listData}}" wx:key="{ {index}}">
    	 {
       {item.title}}
    	</view> 
    </scroll-view>
    
    //返回顶部按钮
    <view class="toTop" hidden="{ {showBackTop}}" bindtap='onBackTop'>toTop</view>

2.wxss

.toTop{ 
      position: fixed;
      right: 20rpx;
      bottom: 20px;
      width: 160rpx;
      height: 50rpx;
      background-color: red;
    }

3.js

Page({ 
    data:{ 
      showBackTop: true,//默认隐藏
      topPosition:0 //返回到的位置
    },
    scrollPosition(e) {  //监听容器滚动
        // 1.获取滚动的距离
        const position = e.detail.scrollTop;
        // 2.设置是否显示：滚动1000px显示‘返回顶部’按钮，否则隐藏
        if(position>1000){ 
          this.setData({ 
            showBackTop: false,
          })
        }else{ 
          this.setData({ 
            showBackTop: true,
          })
        }
      },
      //返回顶部
      onBackTop() { 
        // wx.pageScrollTo({ 
        // scrollTop: 0,
        // duration: 0
        // })
        this.setData({ 
          showBackTop: true,
          topPosition: 0
        })
      },
    })

发表评论取消回复

表情：

评论列表（有 0 条评论，154人围观）

还没有评论，来说两句吧...

相关阅读

相关小程序返回到顶部

1. wxml <scroll-view scroll-y lower-threshold="100" id="scroller" bindscrolltolowe

Myth丶恋晨/ 2022年12月29日 09:35/ 0 赞/ 155 阅读

相关【小程序】返回到顶部的实现方式

> `前言` 返回到顶部的实现方式：[https://github.com/dcloudio/uni-app/blob/master/docs/component/scrol

冷不防/ 2022年11月22日 00:23/ 0 赞/ 156 阅读

相关 uniapp小程序页面来回点击回到顶部

客户要求，小程序页面过长，来回点击，页面必须回到顶部。在onShow里加上这个就好了 onShow() { setTimeout(() => {

梦里梦外;/ 2022年11月21日 11:54/ 0 赞/ 406 阅读

相关【微信小程序】2021--回到顶部

returnTop(){ console.log('回到顶部-->') if (wx.pageScrollTo) {

淡淡的烟草味﹌/ 2022年10月11日 15:54/ 0 赞/ 196 阅读

相关微信小程序回到顶部的简单方法

wxml中： <image src='../../img/top.png' class='goTop' hidden='{ {!floorstatus}

本是古典何须时尚/ 2022年10月02日 05:58/ 0 赞/ 160 阅读

相关返回顶部

点击返回顶部，简单易学效果图： ![Center][] 第一步：将返回按钮fixed到具体位置后隐藏第二步：当浏览器滚动条大于多少像素时显示按钮，小于多少时隐

拼搏现实的明天。/ 2022年08月18日 12:23/ 0 赞/ 310 阅读

相关返回顶部效果!

刚刚需要为网页添加一个返回顶部的效果，又懒得自己写，百度了一下找到两个还不错的。这里分享给大家。 <!DOCTYPE html> <html lang="en"> <

妖狐艹你老母/ 2022年06月04日 06:15/ 0 赞/ 319 阅读

相关带动画的回到返回顶部

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

淩亂°似流年/ 2022年04月12日 02:43/ 0 赞/ 236 阅读

相关小程序回到顶部

onPageScroll: function (e) { // console.log(e) if (e.scrollTop > 100

左手的ㄟ右手/ 2021年12月12日 02:11/ 0 赞/ 337 阅读

相关实现返回顶部-wepy小程序-前端梳理

<script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3

﹏ヽ暗。殇╰゛Y/ 2021年09月19日 10:16/ 0 赞/ 357 阅读