小程序
小游戏
企业微信
微信支付
扫描小程序码分享
1、基础库版本 大于1.5.0
2、onReachBottom 可以触发一次,但是不在触发第二次及以上
3、模拟器和真机都是这个情况
4、我的场景是与swiper结合使用。
26 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
wx.pageScrollTo({ scrollTop: detail.scrollTop - 1, duration: 1 });
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
解决了吗
是稍微上拉,打错了,因为上拉加载是由于页面触底,才会上拉加载,虽然overflow可以让溢出的内容显示,但是它好像并不是让页面高度拉伸了,所以在上拉加载时,虽然有滚动条,但是机器还是认为当前页面已经触底,所以会出现稍微上拉就请求数据的现象,我理解是这样的
问题:如果不使用overflow-y,我该怎么在tab选项卡中同时实现上拉加载和下拉刷新两个功能呢?
由于overflow-y,导致稍微下拉就请求数据,且只请求一次@LastLeaf
@LastLeaf
page{
height:100%;
}
.noOrder{
margin: 50px 200rpx;
color: #C3C3C3;
font-size: 30rpx;
swiper-item{
overflow-y: auto;
.containers{
height: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
font-family: "微软雅黑"
.swiper-tab{
width: 100%;
height: 80rpx;
z-index: 999;
position: absolute;
top: 0;
left: 0;
.swiper-tab-item{
display: inline-block;
width: 19.33%;
height: 75rpx;
color: #666666;
.text{
margin-top: 20rpx;
line-height: 40rpx;
text-align: center;
border-right: 1px solid #F4F4F4;
.four{
border-right:none;
.on{
color: #f10b2e;
border-bottom: 5rpx solid #f10b2e;
.swiper-box{
background-color: #F4F4F4;
margin-top: 40px;
.swiper-box view{
.orderBox{
background-color: #FFFFFf;
margin-bottom: 20rpx;
.orderTime{
border-bottom: 1px solid #F5F5F5;
border-top: 1px solid #F5F5F5;
height: 40px;
line-height: 40px;
font-size: 31rpx;
justify-content: space-between;
.orderTime text{
margin: 0 30rpx;
.orderDetails{
flex-direction: row;
.orderImg{
width: 200rpx;
height: 95px;
.img{
margin-top: 15px;
width: 120rpx;
height: 120rpx;
.information{
width: 440rpx;
.information-one{
display: block;
height: 35px;
margin-top: 10px;
.right{
width: 60rpx;
height: 60rpx;
position: relative;
top: 30px;
right: 5rpx;
.orderprice{
align-items: center;
.op-price{
margin-left:30rpx;
.refund-one{
border: 1px solid #FE2D55;
color: #FE2D55;
border-radius: 5px;
width: 190rpx;
height: 25px;
line-height: 25px;
margin-left: 100rpx;
.refund{
margin-right:30rpx;
button{
margin-left: 0;
padding: 0;
box-sizing: content-box;
background-color: #FFFFFF;
<swiper current="{{currentTab}}" class="swiper-box" duration="100" bindchange="bindChange">
<swiper-item>
<block wx:if='{{orderlistone.length>0}}'>
<view class='orderBox' wx:for="{{orderlistone}}" wx:for-item="item">
<view class='orderTime'>
<text>{{item.time}}</text>
<text>待付款</text>
</view>
<view class='orderDetails' catchtap='onDetails' data-orderid='{{item.id}}'>
<view class='orderImg'>
<image src='{{orderImg.daima}}' class='img'></image>
<view class='information'>
<text class='information-one'>{{item.content}}</text>
<text class='information-one'>{{item.address}}</text>
<image src="{{orderImg.arrow_right}}" class="right"></image>
<view class='orderprice'>
<text class='op-price'>跑腿费:{{item.price}}元</text>
<text class='refund-one'>取消付款</text>
<text class='refund'>继续付款</text>
</block>
<block wx:else>
<text class='noOrder'>您还没有订单(下拉刷新)</text>
</swiper-item>
<block wx:if='{{orderlisttwo.length>0}}'>
<view class='orderBox' wx:for="{{orderlisttwo}}" wx:for-item="item">
<text>待接单</text>
<text class='refund' catchtap='onRefund'>撤销订单</text>
<block wx:if='{{orderlistthree.length>0}}'>
<view class='orderBox' wx:for="{{orderlistthree}}" wx:for-item="item">
<text>待完成</text>
<text class='refund'>申请退款</text>
<block wx:if='{{orderlistfour.length>0}}'>
<view class='orderBox' wx:for="{{orderlistfour}}" wx:for-item="item">
<text>已完成</text>
<block wx:if='{{orderlistfive.length>0}}'>
<view class='orderBox' wx:for="{{orderlistfive}}" wx:for-item="item">
<text>{{ordertime}}</text>
<text>退款中</text>
<button open-type='contact'>联系客服</button>
</swiper>
但是哪有时间,最新版本根本没说
坐等官方解决
大哥,解决了吗?我也遇到了相同问题
正在加载...
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
wx.pageScrollTo({ scrollTop: detail.scrollTop - 1, duration: 1 });
解决了吗
是稍微上拉,打错了,因为上拉加载是由于页面触底,才会上拉加载,虽然overflow可以让溢出的内容显示,但是它好像并不是让页面高度拉伸了,所以在上拉加载时,虽然有滚动条,但是机器还是认为当前页面已经触底,所以会出现稍微上拉就请求数据的现象,我理解是这样的
问题:如果不使用overflow-y,我该怎么在tab选项卡中同时实现上拉加载和下拉刷新两个功能呢?
由于overflow-y,导致稍微下拉就请求数据,且只请求一次@LastLeaf
@LastLeaf
page{
height:100%;
}
.noOrder{
margin: 50px 200rpx;
color: #C3C3C3;
font-size: 30rpx;
}
swiper-item{
overflow-y: auto;
}
.containers{
height: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
font-family: "微软雅黑"
}
.swiper-tab{
width: 100%;
height: 80rpx;
z-index: 999;
position: absolute;
top: 0;
left: 0;
}
.swiper-tab-item{
font-size: 30rpx;
display: inline-block;
width: 19.33%;
height: 75rpx;
color: #666666;
}
.text{
margin-top: 20rpx;
line-height: 40rpx;
text-align: center;
border-right: 1px solid #F4F4F4;
}
.four{
margin-top: 20rpx;
line-height: 40rpx;
text-align: center;
border-right:none;
}
.on{
color: #f10b2e;
border-bottom: 5rpx solid #f10b2e;
}
.swiper-box{
background-color: #F4F4F4;
height: 100%;
margin-top: 40px;
}
.swiper-box view{
text-align: center;
}
.orderBox{
background-color: #FFFFFf;
margin-bottom: 20rpx;
}
.orderTime{
border-bottom: 1px solid #F5F5F5;
border-top: 1px solid #F5F5F5;
display: flex;
height: 40px;
line-height: 40px;
font-size: 31rpx;
justify-content: space-between;
}
.orderTime text{
margin: 0 30rpx;
}
.orderDetails{
display: flex;
flex-direction: row;
}
.orderImg{
width: 200rpx;
height: 95px;
}
.img{
margin-top: 15px;
width: 120rpx;
height: 120rpx;
}
.information{
width: 440rpx;
height: 95px;
font-size: 31rpx;
}
.information-one{
display: block;
height: 35px;
margin-top: 10px;
text-align: center;
}
.right{
width: 60rpx;
height: 60rpx;
position: relative;
top: 30px;
right: 5rpx;
}
.orderprice{
border-top: 1px solid #F5F5F5;
font-size: 31rpx;
height: 40px;
line-height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
.op-price{
margin-left:30rpx;
}
.refund-one{
border: 1px solid #FE2D55;
color: #FE2D55;
border-radius: 5px;
width: 190rpx;
height: 25px;
line-height: 25px;
text-align: center;
margin-left: 100rpx;
}
.refund{
border: 1px solid #FE2D55;
color: #FE2D55;
border-radius: 5px;
width: 190rpx;
height: 25px;
line-height: 25px;
text-align: center;
margin-right:30rpx;
}
button{
border: 1px solid #FE2D55;
color: #FE2D55;
border-radius: 5px;
width: 190rpx;
height: 25px;
line-height: 25px;
text-align: center;
margin-right:30rpx;
margin-left: 0;
padding: 0;
box-sizing: content-box;
background-color: #FFFFFF;
font-size: 31rpx;
}
<swiper current="{{currentTab}}" class="swiper-box" duration="100" bindchange="bindChange">
<swiper-item>
<block wx:if='{{orderlistone.length>0}}'>
<view class='orderBox' wx:for="{{orderlistone}}" wx:for-item="item">
<view class='orderTime'>
<text>{{item.time}}</text>
<text>待付款</text>
</view>
<view class='orderDetails' catchtap='onDetails' data-orderid='{{item.id}}'>
<view class='orderImg'>
<image src='{{orderImg.daima}}' class='img'></image>
</view>
<view class='information'>
<text class='information-one'>{{item.content}}</text>
<text class='information-one'>{{item.address}}</text>
</view>
<image src="{{orderImg.arrow_right}}" class="right"></image>
</view>
<view class='orderprice'>
<text class='op-price'>跑腿费:{{item.price}}元</text>
<text class='refund-one'>取消付款</text>
<text class='refund'>继续付款</text>
</view>
</view>
</block>
<block wx:else>
<text class='noOrder'>您还没有订单(下拉刷新)</text>
</block>
</swiper-item>
<swiper-item>
<block wx:if='{{orderlisttwo.length>0}}'>
<view class='orderBox' wx:for="{{orderlisttwo}}" wx:for-item="item">
<view class='orderTime'>
<text>{{item.time}}</text>
<text>待接单</text>
</view>
<view class='orderDetails' catchtap='onDetails' data-orderid='{{item.id}}'>
<view class='orderImg'>
<image src='{{orderImg.daima}}' class='img'></image>
</view>
<view class='information'>
<text class='information-one'>{{item.content}}</text>
<text class='information-one'>{{item.address}}</text>
</view>
<image src="{{orderImg.arrow_right}}" class="right"></image>
</view>
<view class='orderprice'>
<text class='op-price'>跑腿费:{{item.price}}元</text>
<text class='refund' catchtap='onRefund'>撤销订单</text>
</view>
</view>
</block>
<block wx:else>
<text class='noOrder'>您还没有订单(下拉刷新)</text>
</block>
</swiper-item>
<swiper-item>
<block wx:if='{{orderlistthree.length>0}}'>
<view class='orderBox' wx:for="{{orderlistthree}}" wx:for-item="item">
<view class='orderTime'>
<text>{{item.time}}</text>
<text>待完成</text>
</view>
<view class='orderDetails' catchtap='onDetails' data-orderid='{{item.id}}'>
<view class='orderImg'>
<image src='{{orderImg.daima}}' class='img'></image>
</view>
<view class='information'>
<text class='information-one'>{{item.content}}</text>
<text class='information-one'>{{item.address}}</text>
</view>
<image src="{{orderImg.arrow_right}}" class="right"></image>
</view>
<view class='orderprice'>
<text class='op-price'>跑腿费:{{item.price}}元</text>
<text class='refund'>申请退款</text>
</view>
</view>
</block>
<block wx:else>
<text class='noOrder'>您还没有订单(下拉刷新)</text>
</block>
</swiper-item>
<swiper-item>
<block wx:if='{{orderlistfour.length>0}}'>
<view class='orderBox' wx:for="{{orderlistfour}}" wx:for-item="item">
<view class='orderTime'>
<text>{{item.time}}</text>
<text>已完成</text>
</view>
<view class='orderDetails' catchtap='onDetails' data-orderid='{{item.id}}'>
<view class='orderImg'>
<image src='{{orderImg.daima}}' class='img'></image>
</view>
<view class='information'>
<text class='information-one'>{{item.content}}</text>
<text class='information-one'>{{item.address}}</text>
</view>
<image src="{{orderImg.arrow_right}}" class="right"></image>
</view>
<view class='orderprice'>
<text class='op-price'>跑腿费:{{item.price}}元</text>
</view>
</view>
</block>
<block wx:else>
<text class='noOrder'>您还没有订单(下拉刷新)</text>
</block>
</swiper-item>
<swiper-item>
<block wx:if='{{orderlistfive.length>0}}'>
<view class='orderBox' wx:for="{{orderlistfive}}" wx:for-item="item">
<view class='orderTime'>
<text>{{ordertime}}</text>
<text>退款中</text>
</view>
<view class='orderDetails' catchtap='onDetails' data-orderid='{{item.id}}'>
<view class='orderImg'>
<image src='{{orderImg.daima}}' class='img'></image>
</view>
<view class='information'>
<text class='information-one'>{{item.content}}</text>
<text class='information-one'>{{item.address}}</text>
</view>
<image src="{{orderImg.arrow_right}}" class="right"></image>
</view>
<view class='orderprice'>
<text class='op-price'>跑腿费:{{item.price}}元</text>
<button open-type='contact'>联系客服</button>
</view>
</view>
</block>
<block wx:else>
<text class='noOrder'>您还没有订单(下拉刷新)</text>
</block>
</swiper-item>
</swiper>
但是哪有时间,最新版本根本没说
坐等官方解决
大哥,解决了吗?我也遇到了相同问题