小程序
小游戏
企业微信
微信支付
扫描小程序码分享
模拟器上会显示出滚动条,真机上无法滚动
3 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
这个有好几种 解决方式
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;
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 {
font-size: 32rpx;
.card-item {
margin-top: 20rpx;
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;
bottom: 100rpx;
.card-footer {
height: 100rpx;
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
bottom: 30rpx;
width: 90%;
.foot-money {
color: #E50606;
font-size: 40rpx;
.foot-car {
color: #FFFFFF;
background: #FFBD1B;
font-weight: normal;
padding: 6rpx 16rpx;
image {
width: 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 class="card-list" wx:for="{{cateInfo.goodsAttributeList}}" wx:for-index="index">
<text>{{item.attributeName}}</text>
<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>
<view class="card-cate">已选规格:{{cateInfo.defaultDes}}</view>
<view class="card-footer">
<view>
总计
<text class="foot-money">¥{{singlePrice}}</text>
<view class="foot-car" bind:tap="addCar">加入购物车</view>
<image src="/images/other/close.png" bind:tap="onClickHide"></image>
</van-overlay>
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。
这个有好几种 解决方式
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>