-
pages.json文件配置下拉属性"enablePullDownRefresh": true
"pages": [
{
"path": "pages/ychPages/newIndex/newIndex",
"style" : {
"navigationStyle": "custom",
"enablePullDownRefresh": true
}
}]
- 对应文件增加下拉钩子和调用销毁下拉函数
import { onLoad, onLaunch,onShow,onPullDownRefresh} from "@dcloudio/uni-app"
onPullDownRefresh(async (query) => {
initData();
})
async function initData() {
let {data:res} = await request_get_getChargeUsage({ restAreaId:myLocation.restAreaId,distributionId:myLocation.distributionId})
if(res.code = '1001'){
gasList.value = res.data;
}
//停止刷新
uni.stopPullDownRefresh()
}
遇到的问题，当模版文件中存在scroll-view时，下拉刷新失效，下拉刷新事件与scroll-view下拉滚动事件冲突。下拉位置需要在小程序头部才生效，下拉中间屏幕不起作用。避免使用scroll-view,内容超长时，自定义滚动即可。
<view class="main mainScrollView">
<!-- <scroll-view scroll-y> -->
<view class="itemBox">
<view class="itemBox-btn">
<image :src="area.src[0]" mode="scaleToFill" v-if="area && area.src"></image>
</view>
</view>
<!-- </scroll-view> -->
</view>
.mainScrollView{
height: 100vh;
overflow-y: auto;
}
