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

本文介绍如何在小程序中利用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 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值