微信小程序> 微信小程序“返回顶部”实现

微信小程序“返回顶部”实现

浏览量:3118 时间: 来源:夜空划过的流星

转载原文来自:https://segmentfault.com/q/1010000009512609

需求:页面的信息分页获取,当滑动到底部(onReachBottom)时加载更多信息(下一页),当内容足够多的时候,有返回顶部按钮较好,虽然小程序本身有返回顶部的交互(IOS点击顶部状态栏,安卓双击导航栏),但可能有的用户不知道这个交互,因此,会有添加“返回顶部”按钮的需求;

实现方式:搜过了实现方案,有通过scroll-view来监听scroll,点击返回按钮时改变其scroll-top的方式(见此处),大致实现如下:

xx.jsPage({  data: {    scrollTop: 0,    floorstatus: false  },  goTop: function(e){    this.setData({      scrollTop: 0    })  },  scroll: function(e) {    if(e.detail.scrollTop > 500) {      this.setData({        floorstatus: true      });    } else {      this.setData({        floorstatus: false      });    }  },  getMore: function() {    ...  }})
xx.wxml<scroll-view scroll-y="true" bindscroll="scroll" scroll-top="{{scrollTop}}" bindscrolltolower="getMore" style="position:absolute; top:0; left:0; right:0; bottom:0;">  ...页面的内容</scroll-view><view class="widget-goTop" bindtap="goTop" wx:if="{{ floorstatus }}">  <view class="gotop-wrap">    <view class="icon icon-top"></view> <view>顶部</view>  </view></view>

xx.wxss/* 返回顶部 */.widget-goTop {   position: fixed;   bottom: 125px;   right: 5px;   background: rgba(0,0,0,0.48);   border-radius: 50%;   overflow: hidden;   z-index: 500; } .widget-goTop .gotop-wrap {   display:flex;  flex-direction:column;  align-items:center;  justify-content:center;  width: 50px;   height: 50px;   font-size: 12px;   color: #fff;   border-radius: 50%;   background-color: rgba(0,0,0,0.8);   -webkit-background-size: 50px auto; }

以上方案存在的问题:

  • 加载更多:同样的请求可能被不定次数地重复运行,因为bindscrolltolower多次被触发,但每次其被触发的请求未完成,于是便又发起了仍是获取该页数据的请求,导致重复获取数据;
    解决方法:这个问题可以通过在发起请求前确认当前无请求正在进行解决,比如加一个isLoading,当请求发起时其为true,请求成功后重置为false,要发起请求前确保isLoading为false,以此避免重复请求同一页数据。

问题:除了上述加载更多这个问题,用此方法实现返回顶部,经测试,数据较多页时,会出现数据显示慢,页面部分内容空白;页面可能卡住;不知道这些问题跟这个实现方案有没有关系,不采用此方案,是否有其他方案可实现“返回顶部”? (总感觉非要加一个scroll-view包裹来实现,似乎不是最好的方案)


补充:小程序后续已经加了页面滚动函数wx.pageScrollTo(OBJECT)以及获取WXML节点信息的相关函数,通过这两个可实现让页面滚动至顶部或其他位置;


原文地址:https://segmentfault.com/q/1010000009512609



版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎