精华内容
下载资源
问答
  • 微信小程序回到顶部的两种方式

    万次阅读 多人点赞 2018-04-26 13:34:40
    一,使用view形式的回到顶部 HTML: <image src='../../img/button-top.png' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop"></image&gt...

    一,使用view形式的回到顶部
    HTML:

    <image src='../../img/button-top.png' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop"></image>
    

    CSS:

    /* 返回顶部 */
    .goTop{
      height: 80rpx;
      width: 80rpx;
      position: fixed;
      bottom: 50rpx;
      background: rgba(0,0,0,.3);
      right: 30rpx;
      border-radius: 50%;
    }
    

    JS:

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

    二.使用scroll-view形式的回到顶部

    <scroll-view scroll-y scroll-top='{{topNum}}' bindscroll="scrolltoupper">
    <image src='../../img/button-top.png' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop"></image>
    

    CSS:

    /* 返回顶部 */
    .goTop{
      height: 80rpx;
      width: 80rpx;
      position: fixed;
      bottom: 50rpx;
      background: rgba(0,0,0,.3);
      right: 30rpx;
      border-radius: 50%;
    }
    

    JS:

      data:{
    	topNum: 0
      }
      
      // 获取滚动条当前位置
      scrolltoupper:function(e){
        console.log(e)
        let t =  e.detail.scrollTop;
        if (t > 100 && !this.data.floorstatus) {
        	// 避免重复setData
        	this.setData({
    	       floorstatus: true
    	    });
        } 
        
       	if(t <= 100 && this.data.floorstatus){
      	  this.setData({
            floorstatus: false
          });
       	}
      },
    
      //回到顶部
      goTop: function (e) {  // 一键回到顶部
        this.setData({
          topNum: this.data.topNum = 0
        });
      },
    
    展开全文
  • 小程序中经常遇到点击按钮回到顶部的功能,或是刷新页面数据回到顶部,可以使用scroll-view来监听scroll实现该功能wxml:&lt;scroll-viewscroll-top="{{scrollTop}}" scroll-y="true"&...
    小程序中经常遇到点击按钮回到顶部的功能,或是刷新页面数据回到顶部,可以使用scroll-view来监听scroll实现该功能
     
    wxml:
    <scroll-view scroll-top="{{scrollTop}}" scroll-y="true">
    </scroll-view>
     
    js:
    data: {
        scrollTop:0
    }
     
    // 在需要返回顶部的地方设置scrollTop的值为0
    toTop(){
        this.setData({
            scrollTop: 0
        })
    }
     

     

    展开全文
  • 客户要求,小程序页面过长,来回点击,页面必须回到顶部。在onShow里加上这个就好了 onShow() { setTimeout(() => { uni.pageScrollTo({ scrollTop: 0, duration: 0 }); }, 50); }

    客户要求,小程序页面过长,来回点击,页面必须回到顶部。在onShow里加上这个就好了

    onShow() {
    	setTimeout(() => {
    			uni.pageScrollTo({
    				scrollTop: 0,
    				duration: 0
    			});
    		}, 50);
    	}
    
    展开全文
  • 小程序制作回到顶部按钮

    万次阅读 热门讨论 2017-01-08 14:12:07
    在这里我们如果要使用滚动事件的话,小程序规定 最外层一定要使用scroll-view标签进行包裹,然后在设置scroll-y=”true” 意思是允许页面了纵向滚动,scroll-top是滚动到顶部做处理,一般绑定一个

    我们先看一下效果吧,直接上图。

    第一种情况,当页面在顶部的时候,回到顶部按钮是不会出现的。


    这里写图片描述

    第二种情况,当页面在离开顶部一定距离的时候,回到顶部按钮出现


    这里写图片描述

    接下就是对代码的分析了:
    在这里我们如果要使用滚动事件的话,小程序规定 最外层一定要使用scroll-view标签进行包裹,然后在设置scroll-y=“true” 意思是允许页面了纵向滚动,scroll-top是滚动到顶部做处理,一般绑定一个事件,bindscrolltolower同样的原理,滚动到底部做处理,bindscroll表示在滚动的时候出发这个事件。下面WXML内部的话,就是我们回到顶部的按钮设置,我们在点击它时绑定一个事件goTop,让他的滚动高度等于0,这样它就回到顶部了。

    WXML代码:

      <scroll-view class="bigWrap" scroll-y="true" scroll-top="{{scrollTop}}"   bindscroll="scroll" bindscrolltolower= "scrolltolower" style="position: absolute; left: 0; top:0; bottom: 0; right: 0;">
      
         //*********************
    	  <view class="com-widget-goTop" bindtap="goTop" wx:if="{{floorstatus}}">
    	        <view class="icon-gotop">
    	            顶部
    	        </view>
    	  </view>
    	  //*********************
    	  
      </view>
    

    JS代码:

        //回到顶部按钮
        Page({
        data: {
            scrollTop: 0
            },
        goTop: function(e){
            this.setData({
                scrollTop:0
            })
        },
        scroll:function(e,res){
         // 容器滚动时将此时的滚动距离赋值给 this.data.scrollTop
         if(e.detail.scrollTop > 500){
             this.setData({
                floorstatus: true
             });
         }else {
             this.setData({
                floorstatus: false
             });
            }
            })
    

    WXSS代码:

    .bigWrap{
      background:#eee;
    }
    /*goTop回到顶部图标start*/
    .com-widget-goTop {
        position: fixed;
        bottom: 125px;
        right: 5px;
        background: rgba(0,0,0,0.48);
        border-radius: 50%;
        overflow: hidden;
        z-index: 500;
    }
    .com-widget-goTop .icon-gotop{
        background-color: rgba(0,0,0,0.8);
        display: inline-block;
        width: 50px;
        height: 50px;
        line-height: 68px;
        font-size: 12px;
        color: #ffffff;
        text-align: center;
        border-radius: 50%;
        background: url(http://m.dev.vd.cn/static/xcx/v1/goo/w_2-3451cc437e.png) no-repeat center -1110px;
        -webkit-background-size: 50px auto;
    }
    
    
    展开全文
  • (一)上滑隐藏,下滑显示 ...js,回到顶部以后,隐藏回到顶部标识 toTop(){ const that = this wx.pageScrollTo({ scrollTop: 0, }) setTimeout(()=>{ that.setData({ showTop:true }) },100) }
  • 主要为大家详细介绍了6行代码实现微信小程序页面返回顶部效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 小程序回到顶部按钮

    2019-11-04 15:16:46
    .wxml文件 <image src='../../image/dingbu.png' class='goTopss' hidden='{{!floorstatus}}' bindtap="goTop"></image>... topNum: 0, //回到顶部 floorstatus:false, // 是否显示顶部 ...
  • 一,使用view形式的回到顶部 HTML: <image src='../../images/top.jpg' class='goTop' hidden='{{!hiddentop}}' bindtap="goTop"></image> css: .goTop{ height: 80rpx; width: 80rpx; position: ...
  • 微信小程序回到顶部,底部

    千次阅读 2019-08-06 16:51:21
    1.回到顶部 if (wx.pageScrollTo) { wx.pageScrollTo({ scrollTop: 0 }) } 2.到最底部 <view class='data-loading' id="j_page" > 数据加载中... </view> wx.createSelectorQuery()...
  • 一,在view形式下滚动后回到顶部  JS代码片段: // 获取滚动条当前位置 onPageScroll: function (e) { console.log(“打印当前页面滚动的距离... 100) {//页面距离大于100px,则显示回到顶部控件 this.setDat...
  • 微信小程序回到顶部

    2020-12-19 15:25:03
    -- 回到顶部 --> <scroll-view scroll-y scroll-top='{{topNum}}' bindscroll="scrolltoupper"> <view class="gotop" hidden='{{!cangotop}}' catchtap="goTop"> <view>^</view> <...
  • <view class="content">内容</view> <view class="backTop" bindtap='backTop' wx:if="{{backTopValue ==true}}">totop<.../*浮窗返回顶部*/ .content { width: 300rpx; height...
  • 给大家分享一个微信小程序页面返回顶部的效果,具体内容如下: 1、wxml代码 <scroll-view scroll-y scroll-with-animation='true' scroll-top='{{ topNum }}'> <view>1</view> <view>1&...
  • 逆战之回到顶部的实现 HTML: <!-- 返回顶部按钮 --> <!-- 绑定事件 vue v-on:click="" react onCLick={ this.clickFn } minpro 移动端尽量不使用click事件 ,建议使用tap事件,或者使用touch代替click...
  • 小程序回到顶部两种方法

    千次阅读 2019-03-20 19:01:41
    小程序回到顶部 一。 onPageScroll: function (e) { console.log(e) if (e.scrollTop > 50) { that.setData({ buyshow: true, }) } else { that.setData({ buyshow: false, }) } }, 二 <...
  • 微信小程序提供了页面的上下滚动的事件,在页面的js文件中, page({onPageScroll(e) {console.log(e.scrollTop)}}) 但是不是滑动事件,滑动事件需要自己加在view上, <view bindtouchstart='touchStart' bindtouchend...
  • -- 返回顶部 --> <view class="goTop" hidden='{{!floorstatus}}' bindtap="goTop">Top</view> *.wxss /* 返回顶部 */ .goTop{ width: 140rpx; height: 140rpx; line-height: 140rpx; t...
  • <scroll-view class="scroll_view" scroll-top="{{topNum}}" scroll-y > 内容 </scroll-view> // js page({ data: { topNum : 0 }, toTop() { // 回到顶部 this.setData({ topNum:0 }) }, })
  • 问题 使用框架 Taro 在Taro的项目中使用了上拉加载更多的代码, 列表当中和渲染了内容,...但是当上拉加载显示更多数据的时候,整个页面回到顶部,需要重新去扒拉页面回到底部,很不友好。 这种情况也只出现在
  • wxml: <!-- 点击回顶部 --> <image src='/images/top.jpg' class='goTop' hidden='{{showTop}}' bindtap='goTop'></image> wxss: .goTop{position: fixed;... showTop:"false",//回顶部 ...//回顶部.
  • wxml部分: 1 1 1 1 1 1 1 1 1 1 顶部 wxss部分: page{ width: 100%; height: 100%; } scroll-view{ height: 100%; width: 100%; } view{ width: 100%; height: 200px; text-align: center; line-height: 200px; ...
  • 小程序组件-回到顶部

    2020-07-26 10:29:09
    自定义图标,给图标固定位置,点击图标,用goTop() {uni.pageScrollTo({ scrollTop: 0 }) }回到顶部,用 onPageScroll(e) 监听页面滚动。 <template> <view v-if="scrollTop > 0" @click="goTop" ...
  • 这里小程序有个组件是可以实现的,那就是scroll-view组件,他具有很多的属性,其中我们要利用到以下两个属性来处理: scroll-top Number 设置竖向滚动条位置 bindscroll EventHandle 滚动时触发,event.detail = {...
  • 一,在view形式下滚动后回到顶部 JS代码片段: // 获取滚动条当前位置 onPageScroll: function (e) { ... 100) {//页面距离大于100px,则显示回到顶部控件 this.setData({ cangotop: true }); } else { this.s
  • 微信小程序回到顶部的简单方法

    千次阅读 2019-06-17 14:28:46
    wxml中: <image src='../../img/top.png' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop">.../* 返回顶部 */ .goTop{ height: 80rpx; width: 80rpx; position: fixed; bott...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,456
精华内容 4,582
关键字:

小程序回到页面顶部