小程序move-area和scroll-view一起使用时候，刷新的问题

最新推荐文章于 2024-04-19 10:59:06 发布

爱谁谁12138

最新推荐文章于 2024-04-19 10:59:06 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/wangqiuwei07/article/details/85078067

微信小程序专栏收录该内容

12 篇文章

订阅专栏

本文深入探讨小程序中的两种刷新方式：enablePullDownRefresh和scroll-view的bindscrolltoupper事件。解析move-area组件对刷新的影响及解决策略，提供代码示例帮助开发者理解并应用。

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

在小程序中有两种实现刷新的方式，

一种使用小程序页面配置enablePullDownRefresh，这种时候，view是不能设置高度的，否则页面就不能下拉了。只能是自动填充子视图，它自己会计算高度和滚动的。
一种就是scroll-view的bindscrolltoupper和bindscrolltolower事件（这两个事件不能像手机App那样下拉一段距离以后再刷新吗）
回归题目。当我们用move-area的时候（move-area是根视图的时候，其他情况不会出现刷新问题），给move-area宽度和高度才行。但是一旦设置了move-area高度，enablePullDownRefresh配置就失效了，这个时候只能是bindscrolltoupper的事件。

css:
.body {
  width: 750rpx;
  flex-direction: column;
  /* overflow: hidden; */
  align-items: center; /*垂直居中*/
}

.scroll-view {
  width: 750rpx;
  background-color: #f6f6f6;
}

.block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 750rp;
  margin-left: 30rpx;
  margin-right: 30rpx;
  margin: 20rpx 30rpx 0rpx 30rpx;
  padding: 20rpx;
  border-radius: 10rpx;
  background-color: white;
}

.move-area {
  position: absolute;
  width: 750rpx;
  left: 0;
  top: 0;
}

.move-view-rect {
  width: 120rpx;
  height: 120rpx;
  border-radius: 70rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  background-color: #12b7f5;
}

.move-view-rect :first-child {
  color: white;
  font-size: 10pt;
}

.leavemsg-button {
  width: 620rpx;
  background-color: #12b7f5;
  color: white;
  text-align: center;
  border-radius: 10rpx;
  padding: 20rpx;
  font-size: 16px;
}

html:
<movable-area class="body" style="height:{{scrollHeight}}px">
    <scroll-view class="scroll-view" scroll-y style="height:{{scrollHeight}}px"  bindscrolltoupper="_onRefresh">
      <view class="block" wx:for="{{blockViews}}" wx:for-item="blocItem">
      <!-- orderDetail-Item 有多种type -->
        <v-orderdetail-item wx:for="{{blocItem.list}}" wx:for-item="item" itemData="{{item}}" itemType="{{item.itemType}}" itemTitle="{{item.title}}" itemSubTitle="{{item.name}}" itemThirdTitle="{{item.tel}}" itemOperationBtn="{{item.operbtn}}" itemContent="{{item.name}}" itemOperationCanEdit="{{item.canEdit}}"    bind:detailEvent="onDetailEvent" >
        </v-orderdetail-item>
      </view>
      <view class="block">
        <view class="leavemsg-button" catchtap="onLeaveMsg">订单留言</view>
      </view>
    </scroll-view>
    <movable-view class="move-view-rect" direction="all" x="700" y="500" catchtap="onComplaintClick">
      <text>订单\n投诉</text>
    </movable-view>
  </movable-area>