第一个考虑的上拉加载事件:onReachBottom页面滚动到底部的事件,常用于上拉加载下一页数据。但是如使用scroll-view导致页面级没有滚动,则触底事件不会被触发,所以这里存在的问题是有时候无法触发onReachBottom。 最终选择了适用scroll-view自带的滚到底部触发事件scrolltolower事件,虽然这个事件确实能够实现上拉加载数据分...
组件在uniapp中主要用于创建可滚动的视图区域,支持垂直滚动和水平滚动。常用属性包括: scroll-y:是否允许纵向滚动。 scroll-x:是否允许横向滚动。 scroll-top:设置纵向滚动条位置。 scroll-left:设置横向滚动条位置。2. 监听scroll-view的滚动事件 要实现滑动到底部的功能,我们需要监听scroll-view的滚动事件。在uniapp...
将要用到 监听页面滚动事件:onPageScroll 获取节点信息uni.createSelectorQuery() 标签布局 <template> <view class="content"> <!--目标节点--> <view class="text-area" id="listArea"> <view class="square" v-for="(v,i) in info" :key='i'>{{v}}</view> </view> </view> </templat...
uniapp中scroll-view滚动到指定组件位置 最近做一个uniapp的聊天室界面,当获取聊天信息之后需要下滑到底部最新消息处,当上拉刷新的时候需要再往上一格移动到下面的消息 通过scroll-view的滚动和下拉刷新来实现 在scroll-view的属性中设置:scroll-into-view="state.scrollIntoMessageId"通过动态设置scrollIntoMessageId来...
uniapp解决scroll-view滑动事件失效问题@scrolltolower 1、首先scroller-view需要给定高度,这里的高度最好不要是width:num%这种类型的,很容易不生效。 2、父容器最好也指定高度 下面通过举例来说明 <template> <view class="main"> <scroll-view class="scroll-content" scroll-y @scrolltolower="reachBottom"> ...
使用bindscrolltolower 绑定请求下一页的方法即可,但是使用scroll-view标签的话,会影响onPageScroll 函数的使用,也就是说我们获取不到页面滚动的高度 lower-threshold number/string 距底部/右边多远时,触发 scrolltolower 事件 bindscrolltolower eventhandle 滚动到底部/右边时触发...
移动端键盘展开时scroll-view滚动的scroll事件会比scrolltolower后触发 复现步骤 [复现问题的步骤] 展开键盘 在scroll-view底部边缘滚动 会发现scroll事件会比scrolltolower后触发,导致scrolltolower里面的已滚动到最底部的变量无法正常使用 [或者可以直接贴源代码] ...
回答:内容自动滚动到可视化区域的底部,你可以自己写一个函数,在页面加载完成后调用即可,这个功能一般不需要采用组件来实现,书写起来也并不复杂,简单的逻辑如下: function getMaxHeight() { messageContainer = document.getElementsByClassName("message-container")[0]; messageContainer.scrollTo({ top: messageContainer...
有一个项目需求,顶部导航固定,下边的列表可以上下滑动,这里我选择的是flex布局,导航的高度固定,列表的高度,宽度flex:1;overflow:auto;此时,项目需要加一个上拉加载的事件,我就用到了scroll-view中的@scrolltolower事件,滑动到底部触发,但是加上后,试了半天,事件就是不触发,后来百度了半天,才找到了这个坑 ...
},//滚动到底部/右边触发scrolltolower() { console.log(1111); },//滚动到顶部/左边触发scrolltoupper() { console.log(2222); } } } .scroll-view_H { white-space: nowrap; .scroll-view-item_H { display: inline-block; width:100%; height: 100px; }...