<template>
<view class="page">
<view class="status-bar center" >status bar</view>
<list class="list_view">
<refresh class="refresh center" :display="display" @refresh="onrefresh" @pullingdown="onpullingdown">refreshing</refresh>
<cell class="header center">header</cell>
<cell class="center" v-for="i in 50">======={{i}}=======</cell>
</list>
</view>
</template>
<script>
export default {
data() {
return {
display: 'hide'
};
},
methods: {
onrefresh() {
this.display = "hide"
},
onpullingdown() {
this.display = "show"
}
}
}
</script>
<style lang="scss">
.status-bar {
width: 750rpx;
height: 40px;
background-color: #007AFF;
// border-bottom-color: #000;
// border-bottom-width: 1px;
// border-style: solid;
}
.page {
flex: 1;
}
.list_view {
flex: 1;
}
.refresh {
background-color: #007AFF;
}
.header {
height: 40px;
background-color: #007AFF;
}
.center {
justify-content: center;
align-items: center;
}
</style>
- 发布:2020-08-27 14:43
- 更新:2021-02-24 10:41
- 阅读:1534
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win10 home
HBuilderX类型: 正式
HBuilderX版本号: 2.8.8
手机系统: Android
手机系统版本号: Android 10
手机厂商: 华为
手机机型: 荣耀30S
页面类型: vue
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
HBuilderX -> 新建默认 uniapp项目 -> 新建 index.nvue页面
HBuilderX -> 新建默认 uniapp项目 -> 新建 index.nvue页面
预期结果:
在nvue页面,list组件下的 refresh组件 不需要白边
在nvue页面,list组件下的 refresh组件 不需要白边
实际结果:
在nvue页面,list组件下的 refresh组件 上面有一条白边
在nvue页面,list组件下的 refresh组件 上面有一条白边
bug描述:
在nvue页面,list组件下的 refresh组件 上面有一条无法消除的白边,且无法用其他组件覆盖。