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

    2019-03-27 17:32:45
    wxml <button class='goTop' hidden='{{!...wx:if 与 hidden 都可以控制微信小程序中元素的显示与否。 wx:if 是遇 true 显示,hidden 是遇 false 显示。 他们还有一层细微的区别: wx:if 在隐藏的时候不渲染,...

    wxml

    <button class='goTop' hidden='{{!floorstatus}}' bindtap="goTop">回到顶部</button>
    
    wx:if 与 hidden 都可以控制微信小程序中元素的显示与否。
    
    wx:if 是遇 true 显示,hidden 是遇 false 显示。
    
    他们还有一层细微的区别:
    
    wx:if 在隐藏的时候不渲染,而 hidden 在隐藏时仍然渲染,只是不呈现。
    
    所以如果频繁切换的话,用 wx:if 将会消耗更多资源,因为每次呈现的时候他都会渲染,每次隐藏的时候,他都会销毁。
    
    如果切换并不频繁的话,用 wx:if 相对来说较好些,因为它会避免初始就一下渲染那么多。
    
    总结
    
        频繁切换:用 hidden。
        偶尔切换:用 wx:if。
    
    

    wxss

    .goTop{
      height: 80rpx;
      width: 80rpx;
      position: fixed;
      bottom: 50rpx;
      background:#808080;
      right: 30rpx;
      border-radius: 50%;
    }
    

    js

    
    Page({
      data: {
        floorstatus: false
      },
      // 获取滚动条当前位置 
      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
          })
        }
      }
    })
    
    展开全文
  • 微信小程序回到顶部

    2020-12-19 15:25:03
    -- 回到顶部 --> <scroll-view scroll-y scroll-top='{{topNum}}' bindscroll="scrolltoupper"> <view class="gotop" hidden='{{!cangotop}}' catchtap="goTop"> <view>^</view> <...

    1.wxml

     <!-- 回到顶部 -->
      <scroll-view scroll-y scroll-top='{{topNum}}' bindscroll="scrolltoupper">
        <view class="gotop" hidden='{{!cangotop}}' catchtap="goTop">
          <view>^</view>
        </view>
      </scroll-view>
    

    2.wxss

    .gotop{
      position:fixed;
      right:30rpx;
      bottom:50rpx;
      height:70rpx;
      width:70rpx;
      border-radius: 50%;
      display:flex;
      flex-direction:row;
      align-items:center;
      justify-content:center;
      text-align:center;
      color:white;
      font-size:21rpx;
      font-weight:bold;
      background:#FB5979;
      }
    

    3.js

     // 获取滚动条当前位置
      onPageScroll: function (e) {
        if (e.scrollTop > 100) { //页面距离大于100px,则显示回到顶部控件
          this.setData({
            cangotop: true
          });
        } else {
          this.setData({
            cangotop: false
          });
        }
      },
      //回到顶部,内部调用系统API
      goTop: function (e) { // 一键回到顶部
        if (wx.pageScrollTo) {
    
          //   //wx.pageScrollTo(OBJECT)
          //   基础库 1.4.0 开始支持,低版本需做兼容处理
          // 将页面滚动到目标位置。
          //   OBJECT参数说明:
          //   参数名	类型	必填	说明
          // scrollTop	Number	是	滚动到页面的目标位置(单位px)
          //   duration	Number	否	滚动动画的时长,默认300ms,单位 ms
          wx.pageScrollTo({
            scrollTop: 0
          })
        } else {
          wx.showModal({
            title: '提示',
            content: '当前微信版本过低,暂无法使用该功能,请升级后重试。'
          })
        }
      },
    
    展开全文
  • 主要介绍了详解微信小程序回到顶部的两种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 微信小程序回到顶部的两种方式

    万次阅读 多人点赞 2018-04-26 13:34:40
    一,使用view形式的回到顶部 HTML: &amp;lt;image src='../../img/button-top.png' class='goTop' hidden='{{!floorstatus}}' bindtap=&quot;goTop&quot;&amp;gt;&amp;lt;/image&amp;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
        });
      },
    
    展开全文
  • 属性,因此它是一直固定在页面的右下角位置的 三、回到顶部方法 top(){ wx.pageScrollTo({ scrollTop: 0 }) } 直接在绑定的方法中加入如上代码即可 四、技术难点 在一开始加上fixed属性后,图片会被隐藏。...

    一、前端代码

    <view class="top" bindtap="top"><image src="/static/icon/top.png" class="top_image"></image></view>

    在前端你的内容下添加一个图片容器,绑定事件以及样式

    .top{
      display: flex;
      position: fixed;
      bottom: 20rpx;
      right: 20rpx;
      width: 60rpx;
      height: 60rpx;
    }
    .top_image{
      width: 60rpx;
      height: 60rpx;
    }

    二、实现效果

    因为使用了position: fixed;属性,因此它是一直固定在页面的右下角位置的

    三、回到顶部方法

      top(){
        wx.pageScrollTo({
          scrollTop: 0
        })
      }

    直接在绑定的方法中加入如上代码即可

    四、技术难点

    在一开始加上fixed属性后,图片会被隐藏。我搜索了许多资料,大多都是说层级问题,需要加上z-index来确定层级。但是不需要这么麻烦,紧接着在position: fixed;下跟上固定的位置(top left bottom right)即可正常显示。

    js中跳转代码,大多也是去确定滑动条的位置然后再去跳转,代码量较多。现在直接使用wx.pageScrollTo即可直接跳转。wx.pageScrollTo详情点击这里

    五、总结

    跳转的方法也是从学习前人经验总结而来,希望大家多多去读代码,理解后再去改进。将其变成自己的东西,才是学习的根本目的!对你有帮助的话,请点赞支持!感谢您的阅读!

    展开全文
  • }, goTop:function(e){ if (wx.pageScrollTo) { wx.pageScrollTo({ scrollTop: 0 }) } else { wx.showModal({ title: '提示', content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。...
  • 微信小程序回到顶部,底部

    千次阅读 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(“打印当前页面滚动的距离=”+e) console.log(e) if (e.scrollTop > 100) {//页面距离大于...
  • 微信小程序回到顶部的简单方法

    千次阅读 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...
  • <scroll-view class="scroll_view" scroll-top="{{topNum}}" scroll-y > 内容 </scroll-view> // js page({ data: { topNum : 0 }, toTop() { // 回到顶部 this.setData({ topNum:0 }) }, })

空空如也

空空如也

1 2 3 4 5 6
收藏数 120
精华内容 48
关键字:

微信小程序回到顶部

微信小程序 订阅