收藏
回答

页面顶部留白

向下拖拽小程序的页面,页面顶部会留出很宽的空白。且不会自动收索回去。这个到底怎么解决了?

留白页面如下:


回答关注问题邀请回答
收藏

2 个回答

  • 社区技术运营专员-小柿子
    社区技术运营专员-小柿子
    2018-07-30

    你好,你是做了下拉的什么处理吗?

    2018-07-30
    赞同
    回复 8
    • 角古静
      角古静
      2018-07-30

      我就是拽住手机屏幕向下拉,拉过之后,手机上面的页面顶部就出现空白了

      2018-07-30
      回复
    • 社区技术运营专员-小柿子
      社区技术运营专员-小柿子
      2018-07-30回复角古静

      你好,请提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

      2018-07-30
      回复
    • 角古静
      角古静
      2018-07-30回复社区技术运营专员-小柿子

      iphone6 微信版本是6.7.0


      代码:

      wxml:

      <!--pages/my/my.wxml-->

      <view class="container more">

      <view class="user flex-wrp">

      <view class="avatar flex-item">

      <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>

      </view>

      <view class="user-info flex-item">

      <text class="userinfo-nickname">昵称:{{userInfo.nickName}}</text>

      <text class="edit">系统帐号:{{userInfo.userAccount}}</text>

      </view>

      </view>

      <view class="my">

      <navigator url="{{item.url}}" wx:for="{{itemMenus}}" wx:for-item="item" >

      <view class="my-item flex-wrp">

      <view class="myitem-icon flex-item" >

      <image src="{{item.icon}}"></image>

      </view>

      <view class="myitem-name flex-item">

      <text>{{item.text}}</text>

      </view>

      </view>

      </navigator>

      </view>

      </view>

      wxss:

      /* pages/my/my.wxss */

      .user {

      width: 725rpx;

      background: #ffffff;

      padding: 30rpx 25rpx 30rpx 0;

      margin: 15rpx 0 25rpx 0;

      border-top: 1px solid #eee;

      border-bottom: 1px solid #dcdcdc;

      box-shadow: 0 2px 5px #eeeeee;

      }

      .user .userinfo-avatar{

      flex: 1;

      display: inline-block;

      width: 100rpx;

      height: 100rpx;

      border-radius: 80rpx;

      }

      .user .unAuth{

      width: 100%;

      }

      .user .unAuth-text{

      color:#8B8B83;

      text-align: center;

      margin-top: 10rpx;

      }

      .user .unAuth-avatar{

      width: 100rpx;

      height: 100rpx;

      margin-left: 43.5%;

      }

      .user .user-info{

      flex: 5;

      text-align: left;

      }

      .user .user-info text{

      display: block;

      }

      .user .user-info .userinfo-nickname{

      padding: 8rpx 0 10rpx 0;

      font-size: 30rpx;

      color: #818A8F;

      }

      .user .user-info .edit{

      font-size: 25rpx;

      color: #818A8F;

      line-height: 34rpx;

      margin:10rpx 0rpx;

      }


      .my{

      margin: 5rpx 0 0 0;

      border-top: solid 1px #ebebeb;

      border-bottom: solid 2px #ebebeb;

      }

      .my .my-item{

      width: 750rpx;

      background: #ffffff;

      padding: 0;

      border-bottom:1px solid #ebebeb;

      }

      .my .my-item .myitem-icon{

      flex: 1;

      }

      .my .my-item .myitem-icon image{

      width: 45rpx;

      height: 45rpx;

      padding: 37.5rpx 0;

      }

      .my .my-item .myitem-name{

      flex: 5;

      text-align: left;

      font-size: 30rpx;

      color: #6d6d6d;

      line-height: 60rpx;

      padding: 30rpx 0;

      border-bottom: solid 1px #ebebeb;

      }

      .my .my-item:last-child .myitem-name{

      border-bottom: none;

      }




      2018-07-30
      回复
    • 角古静
      角古静
      2018-07-30

      iphone6 微信版本是6.7.0


      代码:

      wxml:

      <!--pages/my/my.wxml-->

      <view class="container more">

      <view class="user flex-wrp">

      <view class="avatar flex-item">

      <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>

      </view>

      <view class="user-info flex-item">

      <text class="userinfo-nickname">昵称:{{userInfo.nickName}}</text>

      <text class="edit">系统帐号:{{userInfo.userAccount}}</text>

      </view>

      </view>

      <view class="my">

      <navigator url="{{item.url}}" wx:for="{{itemMenus}}" wx:for-item="item" >

      <view class="my-item flex-wrp">

      <view class="myitem-icon flex-item" >

      <image src="{{item.icon}}"></image>

      </view>

      <view class="myitem-name flex-item">

      <text>{{item.text}}</text>

      </view>

      </view>

      </navigator>

      </view>

      </view>

      wxss:

      /* pages/my/my.wxss */

      .user {

      width: 725rpx;

      background: #ffffff;

      padding: 30rpx 25rpx 30rpx 0;

      margin: 15rpx 0 25rpx 0;

      border-top: 1px solid #eee;

      border-bottom: 1px solid #dcdcdc;

      box-shadow: 0 2px 5px #eeeeee;

      }

      .user .userinfo-avatar{

      flex: 1;

      display: inline-block;

      width: 100rpx;

      height: 100rpx;

      border-radius: 80rpx;

      }

      .user .unAuth{

      width: 100%;

      }

      .user .unAuth-text{

      color:#8B8B83;

      text-align: center;

      margin-top: 10rpx;

      }

      .user .unAuth-avatar{

      width: 100rpx;

      height: 100rpx;

      margin-left: 43.5%;

      }

      .user .user-info{

      flex: 5;

      text-align: left;

      }

      .user .user-info text{

      display: block;

      }

      .user .user-info .userinfo-nickname{

      padding: 8rpx 0 10rpx 0;

      font-size: 30rpx;

      color: #818A8F;

      }

      .user .user-info .edit{

      font-size: 25rpx;

      color: #818A8F;

      line-height: 34rpx;

      margin:10rpx 0rpx;

      }


      .my{

      margin: 5rpx 0 0 0;

      border-top: solid 1px #ebebeb;

      border-bottom: solid 2px #ebebeb;

      }

      .my .my-item{

      width: 750rpx;

      background: #ffffff;

      padding: 0;

      border-bottom:1px solid #ebebeb;

      }

      .my .my-item .myitem-icon{

      flex: 1;

      }

      .my .my-item .myitem-icon image{

      width: 45rpx;

      height: 45rpx;

      padding: 37.5rpx 0;

      }

      .my .my-item .myitem-name{

      flex: 5;

      text-align: left;

      font-size: 30rpx;

      color: #6d6d6d;

      line-height: 60rpx;

      padding: 30rpx 0;

      border-bottom: solid 1px #ebebeb;

      }

      .my .my-item:last-child .myitem-name{

      border-bottom: none;

      }




      2018-07-30
      回复
    • 社区技术运营专员-小柿子
      社区技术运营专员-小柿子
      2018-07-30回复角古静

      你好,请按照教程提供代码片段:https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html 

      2018-07-30
      回复
    查看更多(3)
  • 角古静
    角古静
    2018-07-30

    我手机上的所有页面,都是这个样子,向下拉,顶部会有空白。

    2018-07-30
    赞同
    回复
登录 后发表内容