收藏
回答

模拟器上弹窗会根据内容自动出现滚动,但是真机上内容超过了弹窗高度还是不会滚动的?

模拟器上会显示出滚动条,真机上无法滚动

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

3 个回答

  • Demons
    Demons
    2023-09-19

    请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2023-09-19
    有用
    回复
  • 冷暖自知🍃
    冷暖自知🍃
    2023-09-20

    这个有好几种 解决方式

    2023-09-20
    有用
    回复
  • 得鹿梦鱼
    得鹿梦鱼
    2023-09-19

    css: 

     .wrapper {

          width: 100%;

          height: 100%;

          // position: fixed;

          // left: 50%;

          // top: 50%;

          // transform: translate(-50%, -50%);

          display: flex;

          align-items: center;

          justify-content: center;

          flex-direction: column;

          z-index: 400 !important;


          .modal-contain {

            background-color: #FFFFFF;

            border-radius: 20rpx;

            width: 90vw;

            // min-height: 50vh;

            // max-height: 80vh;

            height: 80vh;

            margin-bottom: 40rpx;

            position: relative;


            .card-title {

              height: 70rpx;

              width: 100%;

              color: #000000;

              font-size: 36rpx;

              font-weight: bold;

              margin: 20rpx 0 0 20rpx;

            }


            .card-contian {

              height: calc(100% - 300rpx);

              overflow-y: auto !important;

              overflow-x: hidden;

              position: absolute;

              z-index: 11111111;


              .card-list {

                margin: 0 20rpx;


                &>text {

                  color: #000000;

                  font-size: 32rpx;

                  font-weight: bold;

                }


                .card-item {

                  margin-top: 20rpx;


                  &>text {

                    color: #333333;

                    font-size: 28rpx;

                    border-radius: 8rpx;

                    border: 2rpx solid #999999;

                    display: inline-block;

                    padding: 6rpx 10rpx;

                    margin-right: 20rpx;

                    margin-bottom: 20rpx;

                    letter-spacing: 2rpx;


                    .attr-price {

                      border-left: 2rpx solid #000000;

                      margin-left: 10rpx;

                      padding-left: 10rpx;

                    }

                  }


                  .active {

                    background: #faefd2;

                    border: 2rpx solid #E0A40F;

                  }

                }


              }

            }


            .card-cate {

              background: #F5F5F5;

              min-height: 60rpx;

              max-height: 140rpx;

              padding: 16rpx 0 16rpx 20rpx;

              position: absolute;

              bottom: 100rpx;

              width: 100%;

            }

            

            .card-footer {

              height: 100rpx;

              display: flex;

              flex-direction: row;

              align-items: flex-end;

              justify-content: space-between;

              margin: 0 20rpx;

              color: #000000;

              font-size: 32rpx;

              font-weight: bold;

              position: absolute;

              bottom: 30rpx;

              width: 90%;


              .foot-money {

                color: #E50606;

                font-size: 40rpx;

              }


              .foot-car {

                color: #FFFFFF;

                background: #FFBD1B;

                border-radius: 8rpx;

                font-weight: normal;

                padding: 6rpx 16rpx;

              }

            }

          }


          image {

            width: 100rpx;

            height: 100rpx;

          }

       }

    html: <van-overlay show="{{ showModal }}" custom-class="custom-overlay-class">

        <view class="wrapper">

          <view class="modal-contain">

            <view class="card-title van-ellipsis">{{cateInfo.goodsName}}</view>

            <view class="card-contian">

              <view class="card-list">

                <text>规格</text>

                <view class="card-item">

                  <text class="{{cateInfo.index === index ? 'active' : ''}}" wx:key="id" wx:for="{{cateInfo.goodsSpecList}}" wx:for-item="ctem" wx:for-index="index" data-idx="{{index}}" data-name="{{ctem.specName}}" data-id="{{ctem.id}}" data-price="{{ctem.specCurrentPrice}}" bind:tap="clickCate">

                    <text>{{ctem.specName}}</text>

                    <text class="attr-price">¥{{ctem.specCurrentPrice}}</text>

                  </text>

                </view>

              </view>

              <view class="card-list" wx:for="{{cateInfo.goodsAttributeList}}" wx:for-index="index">

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

                <view class="card-item">

                  <text class="{{item.index === index1 ? 'active' : ''}}" wx:key="id" wx:for="{{item.goodsAttributeInfoList}}" wx:for-item="ctem" wx:for-index="index1" data-idx="{{index}}" data-idx2="{{index1}}" data-name="{{ctem.attributeInfoName}}" data-id="{{ctem.id}}" data-price="{{ctem.attributeInfoPrice}}" bind:tap="clickItem">

                    <text>{{ctem.attributeInfoName}}</text>

                    <text wx:if="{{ctem.attributeInfoPrice !== 0}}" class="attr-price">¥{{ctem.attributeInfoPrice}}</text>

                  </text>

                </view>

              </view>

            </view>

            <view class="card-cate">已选规格:{{cateInfo.defaultDes}}</view>

            <view class="card-footer">

              <view>

                总计

                <text class="foot-money">¥{{singlePrice}}</text>  

              </view>

              <view class="foot-car" bind:tap="addCar">加入购物车</view>

            </view>

          </view>

          <image src="/images/other/close.png" bind:tap="onClickHide"></image>

        </view>

      </van-overlay>

    2023-09-19
    有用
    回复
登录 后发表内容