小程序
小游戏
企业微信
微信支付
扫描小程序码分享
scroll-view中的item高度不一,所以没办法给一个固定的高度,但是不设置固定的高度就无法触发滑动监听bindscrolltoupper,请问有没有办法解决这个问题
4 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
bindscrolltoupper 滚动加载了一页, 在加载第二页的时候, 需要scroll-view上划一点到顶部的距离才能触发, iOS 比较明显,大概率出现这种情况
<scroll-view id="chatScrollView" scroll-y style="height: {{height}}px;" upper-threshold="100" bindscroll="scroll" bindscrolltoupper="upper" scroll-top="{{scrollTop}}" scroll-into-view="{{toView}}">
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
wx.getSystemInfo({
success:
function
(res) {
var
clientHeight = res.windowHeight,
clientWidth = res.windowWidth,
rpxR = 750 / clientWidth;
calc = clientHeight * rpxR - 90;
that.setData({
winHeight: calc
});
}
onLond中加入这行代码 data中给个winHeight ,wxml中 scroll-view 标签style中设置height
<scroll-view scroll-y=
"true"
style=
'height:{{winHeight-30}}rpx;'
>
可以用加减法控制显示高度
scroll-view 不设高度,滑动区域就和内容一样大,
等于滑动的是 body,而非 scroll-view,所以最好 scroll-view 能固定高度。
需求不太清楚,感觉是类似 max-height 的效果,
如果是这样的话恐怕只能 js 解决了,套个 .wrap 然后用 boundingClientRect 来获取高度。
就是现在有个很矛盾的问题,我设置固定高度的话我的item就会有的内容显示不全,有的又会空着一大片空白。但是如果不设置固定高度我就没办法触发bindscrolltoupper这个方法
其实依旧没看懂,是 max-height 那样的效果吗,低于某高度以内容高度为容器高度,超出某高度以该高度为滑动区域高度。
就以最大的高度为准呗,这个距离大小,只是影响什么时候加载更多数据吧。除非你的高度差别非常大,大的基本快全屏了,小的只有几十rpx高。
确实差距比较大因为有文字和图片长点的图片差不多一张也快全屏了,所以不能这么设置,界面看起来会很丑
不对啊,老铁,默认值也有50px,怎么会不触发呢?是因为一次分页的内容太少,还不够滚动吗?
我现在不设置任何高度值,他得内容是靠图片的width固定,然后height等比例伸缩的。但是这样就一直触发不了bindscrolltoupper这个方法。
<scroll-view scroll-y upper-threshold="50" class="history" scroll-top="{{scrollTop}}" wx:for="{{historyList}}" wx:key='' scroll-into-view = "{{toLast}}" bindscrolltoupper="loadTopMore">
方便看下 history这个样式怎么写的吗
.history {
width: 100%;
只是给这个scroll-view设置了一个宽度
文字框也只是设置了一个宽度,和padding
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
bindscrolltoupper 滚动加载了一页, 在加载第二页的时候, 需要scroll-view上划一点到顶部的距离才能触发, iOS 比较明显,大概率出现这种情况
<scroll-view id="chatScrollView" scroll-y style="height: {{height}}px;" upper-threshold="100" bindscroll="scroll" bindscrolltoupper="upper" scroll-top="{{scrollTop}}" scroll-into-view="{{toView}}">
wx.getSystemInfo({
success:
function
(res) {
var
clientHeight = res.windowHeight,
clientWidth = res.windowWidth,
rpxR = 750 / clientWidth;
var
calc = clientHeight * rpxR - 90;
that.setData({
winHeight: calc
});
}
});
onLond中加入这行代码 data中给个winHeight ,wxml中 scroll-view 标签style中设置height
<scroll-view scroll-y=
"true"
style=
'height:{{winHeight-30}}rpx;'
>
可以用加减法控制显示高度
scroll-view 不设高度,滑动区域就和内容一样大,
等于滑动的是 body,而非 scroll-view,所以最好 scroll-view 能固定高度。
需求不太清楚,感觉是类似 max-height 的效果,
如果是这样的话恐怕只能 js 解决了,套个 .wrap 然后用 boundingClientRect 来获取高度。
就是现在有个很矛盾的问题,我设置固定高度的话我的item就会有的内容显示不全,有的又会空着一大片空白。但是如果不设置固定高度我就没办法触发bindscrolltoupper这个方法
其实依旧没看懂,是 max-height 那样的效果吗,低于某高度以内容高度为容器高度,超出某高度以该高度为滑动区域高度。
就以最大的高度为准呗,这个距离大小,只是影响什么时候加载更多数据吧。除非你的高度差别非常大,大的基本快全屏了,小的只有几十rpx高。
确实差距比较大因为有文字和图片长点的图片差不多一张也快全屏了,所以不能这么设置,界面看起来会很丑
不对啊,老铁,默认值也有50px,怎么会不触发呢?是因为一次分页的内容太少,还不够滚动吗?
我现在不设置任何高度值,他得内容是靠图片的width固定,然后height等比例伸缩的。但是这样就一直触发不了bindscrolltoupper这个方法。
<scroll-view scroll-y upper-threshold="50" class="history" scroll-top="{{scrollTop}}" wx:for="{{historyList}}" wx:key='' scroll-into-view = "{{toLast}}" bindscrolltoupper="loadTopMore">
方便看下 history这个样式怎么写的吗
.history {
width: 100%;
}
只是给这个scroll-view设置了一个宽度
文字框也只是设置了一个宽度,和padding