在小程序中有两种实现刷新的方式,
- 一种使用小程序页面配置
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}}\" 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>
继续阅读与本文标签相同的文章
上一篇 :
Linux
-
韩国公布500亿美元计划 大力发展电动和自动驾驶汽车
2026-05-18栏目: 教程
-
原来这样做可以提高自媒体短视频的播放量?
2026-05-18栏目: 教程
-
用了3年以上的iPhone手机,应该这样清理手机缓存,很实用
2026-05-18栏目: 教程
-
一文弄懂,锁的基本概念到Redis分布式锁实现
2026-05-18栏目: 教程
-
阿里云混合云备份如何还原虚拟机备份?
2026-05-18栏目: 教程
