收藏
回答

半屏小程序中,tabBar页面的贴底元素及滚动异常?

API名称:wx.openEmbeddedMiniProgram

机型:仅Android

微信版本:8.0.49

基础库版本:3.4.4

问题描述:在半屏小程序中,从普通页面跳转到tabBar页面,如果tabBar页面的内容大于一屏,则以fixed定位贴底的元素无法显示,并且这一屏的内容无法滚动到底部。此时触发一下onHide和onShow,底部元素出现并且可以滚动到页面底部(容器重新计算了?)。如果直接半屏打开这个tabBar页面则无此问题。仅安卓手机,iOS手机暂未复现。

截图:(按顺序)

复现代码片段:

// 普通页面 wxml
<button bind:tap="go">购物车</button>

// 普通页面 js
Page({
  go() {
    wx.switchTab({
      url: '/pages/tabBar/cart/cart',
    })
  },
})

// tabBar页面 wxml
<view class="items">
  <view wx:for="{{list}}" class="item">{{item}}</view>
</view>
<view class="placeholder"></view>
<view class="bottom">底部模块</view>

// tabBar页面 wxss
.items {
  padding: 20rpx 0;
}
.item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200rpx;
  background-color: cornflowerblue;
  color: white;
}
.item + .item {
  margin-top: 20rpx;
}
.placeholder {
  height: 100rpx;
}
.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100rpx;
  background-color: cornsilk;
}

// tabBar页面 js
Page({
  data: {
    list: [1, 2, 3, 4, 5, 6, 7, 8, 'END'],
  },
})
回答关注问题邀请回答
收藏

1 个回答

  • 社区技术运营专员--许涛
    社区技术运营专员--许涛
    05-25

    你好,请提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    05-25
    有用
    回复 6
    • momo
      momo
      05-27
      https://developers.weixin.qq.com/s/I7MPqumz7tR3
      05-27
      回复
    • momo
      momo
      05-27
      打开半屏小程序的 pages/detail/detail 页面,点击【去购物车】。
      05-27
      回复
    • momo
      momo
      05-27回复社区技术运营专员--许涛
      因为这个是“被打开”的半屏小程序
      05-27
      回复
    • momo
      momo
      05-28回复社区技术运营专员--许涛
      ???代码片段已经提供了,复现步骤在帖子里面已经叙述了,我再补充一点吧:用 wx.openEmbeddedMiniProgram 打开我提供的代码片段里面的小程序就行,如果打开路径是:/pages/detail/detail,点击页面上的按钮(会跳转到 /pages/tabBar/cart/cart),应该可以复现帖子里面的问题。如果打开路径是 /pages/tabBar/cart/cart,那么就没有问题。
      05-28
      回复
    • 社区技术运营专员--许涛
      社区技术运营专员--许涛
      发表于移动端
      05-30回复momo
      下个微信版本修复
      05-30
      回复
    查看更多(1)
登录 后发表内容