Advertisement

微信小程序列表上拉显示分页内容

阅读量:

在特定页面中,若存在包含大量条目(例如100条)的列表,此时需要引入分页机制。在移动端,常见的分页方式为当用户滑动至页面底部并上拉时触发数据刷新操作。

通过scroll-view组件来实现该功能,其bindscrolltolower事件会在滚动至底部或右侧时被触发。一旦该事件发生,系统将发送请求以获取新的数据内容。在实际开发过程中,由于数据加载速度较快,我特意添加了一个定时器,原因在于希望showLoading加载提示窗口能够持续显示一段时间,从而让用户感知到正在执行刷新操作。此前未添加定时器时,showLoading仅短暂出现,整体交互体验不佳。

最终,在使用scroll-view进行纵向滚动时,必须为组件设定一个固定的高度(如height:93%),同时为page页面设置高度(height:100%),否则bindscrolltolower事件将无法正常触发。

复制代码
 <scroll-view wx:if="{{isShowList}}" class='scrollHeight' scroll-y="true" bindscrolltolower="getMore" lower-threshold='3'>

    
 </scroll-view>
    
    
    
    

提供一段具备合理逻辑结构的代码示例

``

全部评论 (0)

还没有任何评论哟~