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

  • 一种使用小程序页面配置enablePullDownRefresh,这种时候,view是不能设置高度的,否则页面就不能下拉了。只能是自动填充子视图,它自己会计算高度和滚动的。
  • 一种就是scroll-viewbindscrolltoupperbindscrolltolower事件(这两个事件不能像手机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}}\" item =\"{{item. }}\" itemSub =\"{{item.name}}\" itemThird =\"{{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>
收藏 打印