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

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

  • 一种使用小程序页面配置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}}" 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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值