scroll-view组件在uniapp中主要用于创建可滚动的视图区域,支持垂直滚动和水平滚动。常用属性包括scroll-y(是否允许纵向滚动)、scroll-x(是否允许横向滚动)、scroll-top(设置纵向滚动条位置)、scroll-left(设置横向滚动条位置)等。 2. 掌握如何在scroll-view组件中实现触底加载功能 要在scroll-view中实现触底加载,我们需...
最终选择了适用scroll-view自带的滚到底部触发事件scrolltolower事件,虽然这个事件确实能够实现上拉加载数据分页的功能,但是这个是事件存在两个问题。第一个问题就是当滚动条滚动到底部时会多次触发scrolltolower事件,第二个问题是当页面由第一个scroll-view(该页面已经到了的最底部了)切换到第二个scroll-view时会自动...
导语:在日测的开发过程中,经常会碰到页面需要渲染大量数据的情况,这时候就需要用到滚动加载功能,下面总结一下方法。 目录 原理分析 实战演练 案例展示 原理分析 使用@scrolltolower事件来监听滚动到底部,然后加载下一页的数据。 实战演练 模板页面 <scroll-view :sc
导语:在日测的开发过程中,经常会碰到页面需要渲染大量数据的情况,这时候就需要用到滚动加载功能,下面总结一下方法。 目录 原理分析 实战演练 案例展示 原理分析 使用@scrolltolower事件来监听滚动到底部,然后加载下一页的数据。 实战演练 模板页面 <scroll-view :scroll-y="true" class="block-main block-two-lev...
</view> </scroll-view> 在方法中写 //触底加载数据 bottomOut() { this.status = 'loading';//滑到底部的时候显示状态为加载中 this.page += 1;//请求页数+1 //判断没数据后停止请求接口数据,并修改显示状态为没有更多 if(this.page >= 6){ ...
具体案例如下：在项目中创建一个滚动列表页面，展示文章列表。使用uni-app的scroll-view组件构建滚动容器，根据用户滚动行为触发加载更多文章的事件。通过Ajax请求后端接口，获取下一页的文章数据，更新列表展示内容。此过程确保了页面的流畅加载和用户体验。总结以上内容，滚动触底加载的关键在于合理利用uniapp...
uni-app在页面的生命周期中提供onReachBottom 页面滚动到底部的事件(不是scroll-view滚到底),常用于上拉加载下一页数据。如使用scroll-view导致页面级没有滚动,则触底事件不会被触发 在页面中 使用时onReachBottom可在pages.json里定义具体页面底部的触发距离onReachBottomDistance,比如设为50,那么滚动页面到距离底部50...
</view> <view class="loading-text"> {{ finish ? '没有更多数据~' : '正在加载...' }} </view> </template> :host { display: block; } /* 分类标题 */ .caption { display: flex; justify-content: center; line-height: 1; padding...
scroll-view 文档:https://uniapp.dcloud.net.cn/component/scroll-view.html 使用竖向滚动时,需要给一个固定高度,通过 css 设置 height; 使用横向滚动时,需要添加white-space: nowrap;样式。 缺点:隐藏不了滚动条 // 给固定高度.roll-list{width:100%;height:100%;// 隐藏不了滚动条&::-webkit-scrollbar...
接口返回数据格式: 图片.png <scroll-view:scroll-top="scrollTop"scroll-y="true"class="scrollView"@scrolltolower="ScrollToLower"></scroll-view> data(){return{page:1,//分页初始化allpage:1,//接口返回总分页status:'loadmore',//加载状态}} //获取数据接口getList(){this.http({url:"/cpgl/sjg...