在小程序中有两种实现刷新的方式,
- 一种使用小程序页面配置
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>