小程序Scroll-view上拉滚动刷新数据

最新推荐文章于 2025-06-24 17:35:41 发布

Rechal_Mei

最新推荐文章于 2025-06-24 17:35:41 发布

阅读量3.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：小程序文章标签：小程序scroll-view上拉刷新数据

本文链接：https://blog.youkuaiyun.com/Rechal_Mei/article/details/85836678

本文介绍如何在小程序中利用Scroll-view组件实现上拉滚动时刷新数据，不依赖原生生命周期函数。通过监听bindscrolltolower事件，结合wxml、wxss和js文件配置，实现定制化的上拉刷新效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序Scroll-view上拉滚动刷新数据

因为项目需求，我需要做一个上拉刷新，但是我不是小程序的原生刷新生命周期函数事件

小程序scroll-view，有一个滚到底部触发事件bindscrolltolower加粗样式
在这里插入图片描述
把自己需要滚动的内容放在这个scroll-view之间，然后。给scroll-view一个滚动高度
首先先看一下效果图吧

order.wxml页面

  <scroll-view class='scroll' scroll-y="{
  
  {true}}" bindscrolltolower="scrolltolower">
          <view class="tabs">
            <block wx:for="{
  
  { tabs }}" wx:key='{
  
  { index }}'>
              <view bind:tap="changeTab" data-index='{
  
  { index }}' class="tab {
  
  { tabindex === index ? 'active' : '' }}">{
  
  { item }}</view>
            </block>
          </view>
          <view style="height: 80rpx"></view>
          <view>
            <block wx:for="{
  
  { goods }}" wx:key="{
  
  { index }}">
              <view class="content">
                <view class="conbg">
                  <view class="con-top">
                    <view class="shopname iconfont icon-right ellipsis">{
  
  { item.shopName }}</view>
                    <view class="good-status" wx:if="{
  
  {item.goodStatus==0}}">卖家未发货</view>
                    <view class="good-status" wx:if="{
  
  {item.goodStatus==1}}">卖家已发货</view>
                  </view>
                  <view class="goodinfo">
                    <!-- 商品图 -->
                    <image class="goodimg" src="{
  
  { item.goodImg }}" mode="scaleToFill"></image>
                    <!-- 商品信息 -->
                    <view class="good-info">
                      <view