西乡网站的建设,文案转行做网站编辑,连花清瘟为什么不能随便吃,为什么要建设档案网站开发场景#xff1a;点击条件筛选按钮#xff0c;在弹出的popup框中让用户选择条件进行筛选
但是在iphone12/13pro展示是正常#xff0c;但是切换至其他手机型号就填充满了整个屏幕#xff0c;需要给这个弹窗设置一个固定的高度
iphone12/13pro与其他型号手机对比 一开始…开发场景点击条件筛选按钮在弹出的popup框中让用户选择条件进行筛选
但是在iphone12/13pro展示是正常但是切换至其他手机型号就填充满了整个屏幕需要给这个弹窗设置一个固定的高度
iphone12/13pro与其他型号手机对比 一开始我是在u-popup上设置的自定义样式 但是并没有实现我需要的 从网上查阅资料发现可以在popup中嵌套的子级中将里边的内容设置固定的高度这样内容就不会超出去了。 最终效果 完整代码附上
!-- 弹出层 展示更多条件 --
u-popup :safeAreaInsetBottomfalse:showshowPopup closeclosePopup modebottom openopenPopup :round10 view classConditionPopupview v-for(item,index) in conditionDataList :keyindex classConditionPopup_listview classConditionPopup_list__title{{item.title}}/viewview classConditionPopup_list__contentview clickchangeconditionitem(conditionDataList[index],items) v-for(items,indexs) in conditionDataList[index].list :keyindexs classConditionPopup_list__content_items :classitems.check ? ConditionPopup_list__content_activeitems : view{{items.text}}/view/view/view/viewview classpush-buttonu-button text一键重置 clickqxBtn/u-button/viewview classbtnPopupu-button :customStylebtnPopupqx text取消 clickqxBtn/u-buttonu-button :customStylebtnPopupcx text查询 clicksearchBtn/u-button/view/view
/u-popup
css部分
// 条件弹出层
.ConditionPopup{box-sizing: border-box;padding: 15rpx 12rpx 4rpx 12rpx;height: 600rpx;overflow: auto;_list{margin-bottom: 20rpx;__title{font-size: 28rpx;font-weight: 600;color: #333333;margin-bottom: 15rpx;}__content{display:flex;flex-wrap: wrap;_items{padding: 24rpx 20rpx;background: #F1F1F1;border-radius: 6rpx;font-size: 26rpx;font-weight: 400;color: #666666;margin: 0 24rpx 24rpx 0;}_activeitems{background: #00A39C;color: #FFFFFF;}}}
}
