uniapp scroll-view 上划 分页/加载 遇见的问题
问题一:scrolltolower 等方法不触发1. 使用scroll-view的时候, @scrolltolower 等不生效/不触发,是因为 scroll-view 没有一个固定的高度,所以需要给 scroll-view 设定一个高度。2. uni-load-more 这个是点击触发,只是做一个显示的作用。问题二:scroll-view 高度设置问题3. 不能使用 css 的 calc() ,
·
问题一:scrolltolower 等方法不触发
- 使用
scroll-view
的时候,@scrolltolower
等不生效/不触发,是因为scroll-view
没有一个固定的高度,所以需要给scroll-view
设定一个高度。 uni-load-more
这个是点击触发,只是做一个显示的作用。
问题二:scroll-view 高度设置问题
3. 不能使用 css
的 calc()
,这样是无效的。
4. 可以在 onReady
页面周期里面调用计算方法,其他地方调用会报错。
scroll-view 高度设置问题可以参考我的另一篇文章:点击查看
template 部分
<scroll-view :style="`height: ${scrollview_height}px`" scroll-y="true" @scrolltolower="load_new_good"
lower-threshold="20">
<ul>
<li v-for="item in new_goods" :key="item.id">
</li>
</ul>
<uni-load-more iconType="auto" :status="new_loading" @clickLoadMore="load_new_good"
:content-text="contentText" />
</scroll-view>
JS 部分
onReady(){
// 计算 scroll-view 的高度
this.scrollview_height = document.body.clientHeight - document.getElementById('flash_box').offsetHeight - 173;
},
// 加载最新商品
load_new_good() {},
另外:分页还可以用生命周期里的 onReachBottom
方法,不过我没用,所以这里就不上代码了
更多推荐
已为社区贡献30条内容
所有评论(0)