有必要自建网站做导购吗,泰安市58同城招聘网,威海优化公司立找2火星,招商项目recycle-view是微信小程序官方推出的一个经过优化的长列表组件#xff0c;但是在使用百分比单位控制高宽时有个内容溢出问题#xff0c;虽然它提供了height和width的参数可以设置宽高#xff0c;但每次写列表都需要去js里获取宽高并设置是较为麻烦的#xff0c;所以现在来着…recycle-view是微信小程序官方推出的一个经过优化的长列表组件但是在使用百分比单位控制高宽时有个内容溢出问题虽然它提供了height和width的参数可以设置宽高但每次写列表都需要去js里获取宽高并设置是较为麻烦的所以现在来着手解决使用百分比单位设置宽度时碰到的内容溢出问题。
先看看问题怎么复现
1.先添加组件依赖
{usingComponents: {recycle-view: miniprogram-recycle-view/recycle-view,recycle-item: miniprogram-recycle-view/recycle-item}
}
2.编写wxml
view idroot styleheight: 100%;view styleheight:50%;width: 100%;background-color: blue;recycle-view batch{{batchSetRecycleData}} idrecycleIdrecycle-item wx:for{{1000}} wx:keyidview stylewidth: 100px;height: 100px;1234/view/recycle-item/recycle-view/view
/view
wxss
page {width: 100%;height: 100%;
}
3.查看界面 4.现在来说一下问题首先是界面显示了一个基于recycleview的列表然后他的父元素我给他设置了height:50%按理来说这个列表的区域也应该是Page内容区域高度的50%也就是和蓝色区域重合但是他现在内容溢出了。
这明显是不合理的接下来是修复。
1.打开miniprogram_npm/miniprogram-recycle-view/recycle-view.wxml编辑最外层的view的style直接改为height:100%;width:100%
!--components/recycle-view/recycle-view.wxml--
view bindtouchstart_beginToScroll styleheight:100%;width:100%; idcontent classwrapscroll-view bindscroll_scrollViewDidScroll classcontent styleheight:100%;position: relative; scroll-y{{useInPage ? false : scrollY}} scroll-x{{false}} upper-threshold{{upperThreshold}} lower-threshold{{lowerThreshold}} scroll-top{{innerScrollTop}} scroll-into-view{{innerScrollIntoView}} scroll-with-animation{{scrollWithAnimation}} bindscrolltoupper_scrollToUpper bindscrolltolower_scrollToLower scroll-anchoring enable-back-to-top{{enableBackToTop}} throttle{{throttle}}view styleposition: absolute;z-index:1;width:100%;left: 0;top: 0;opacity: 0;visibility: hidden;slot nameitemsize/slot/viewview styleheight:{{hasBeforeSlotHeight ? beforeSlotHeight px : auto}} classslot-beforeslot namebefore/slot/viewview styleposition:relative;width:100%;z-index:10;background: url({{placeholderImageStr}}) repeat;height:{{totalHeight}}px;!-- view classbefore styleheight:{{innerBeforeHeight}}px/view --view styleposition: absolute;left:0;width:100%;top:{{innerBeforeHeight}}px;slot/slot/view!-- view classafter styleheight:{{innerAfterHeight}}px/view --/viewview styleheight:{{hasAfterSlotHeight ? afterSlotHeight px : auto}} classslot-afterslot nameafter/slot/view/scroll-view
/view
2.打开miniprogram_npm/miniprogram-recycle-view/recycle-view.wxss将:host{}删除或者注释
/* components/recycle-view/recycle-view.wxss */
/* :host {display: block;width: 100%;
} */3.运行看看效果 内容不溢出了而且滚动效果也正常。
微信小程序代码片段这里只是复现该问题的例子还需要手动安装recycleview依赖和按照上面的流程修改代码https://developers.weixin.qq.com/s/J3TFLYmQ71K1
