微信小程序~上拉加载onReachBottom
Posted jianxian
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序~上拉加载onReachBottom相关的知识,希望对你有一定的参考价值。
代码:
//页面上拉触底事件的处理函数 onReachBottom(e) console.log("底部")// 滚动到页面执行 该 方法 wx.showToast( title: ‘加载中...‘, icon: ‘loading‘, duration: 2000 ) /* 这里执行你需要的请求数据追加到循环数组就好了 */ , onPageScroll(e) console.log(e) //滚动条 滚动的位置(e.scrollTop)从头部开始计算 ,
原理:
上拉加载更多这个需求我相信应该应用颇为广泛的,今天说我认为两种可行的方式哈 。
一、第一个应该是最简单的一种实现方式,文档自带的一个api 可以监听滚动到页面底部的方法(onReachBottom) 、"onPageScroll"方法可以监听页面滚动条的位置。(PS:页面.json 中‘onReachBottomDistance:number‘默认为50,这个可以设置在距离底部多少px执行onReachBottom方法,具体使用看你需求。)
1.首先准备几个盒子 使其 超出page 页面高度产生滚动条、然后准备一个加载动画具体实现如下:
//wxml: arr是length为4的数组随意定义 只是为了撑高度的 <view class=‘warp‘> <view wx:for="arr" class=‘bg_cl‘></view> </view> <!--加载动画 --> <view class=‘bottom‘> <view class="loading"> <text></text> <text></text> <text></text> <text></text> <text></text> </view> </view> // wxss ======================================== .warp display: flex; flex-flow: column; .bg_cl width: 100%; flex: 1; height: 400rpx; background: pink; .bg_cl:nth-child(2),.bg_cl:nth-child(4) background: purple; .bottom line-height: 50rpx; font-size: 24rpx; display: flex; align-items: center; justify-content: center; /*过渡动画 */ .loading width: 148rpx; height: 44rpx; .loading text display: inline-block; width: 20rpx; height:20rpx; margin-right: 5px; border-radius: 50%; background:#999; -webkit-animation: load 1.04s ease infinite; .loading text:last-child margin-right: 0px; @-webkit-keyframes load 0% opacity: 1; -webkit-transform: scale(1); 100% opacity: 0.2; -webkit-transform: scale(.3); .loading text:nth-child(1) -webkit-animation-delay:0.13s; .loading text:nth-child(2) -webkit-animation-delay:0.26s; .loading text:nth-child(3) -webkit-animation-delay:0.39s; .loading text:nth-child(4) -webkit-animation-delay:0.52s; .loading text:nth-child(5) -webkit-animation-delay:0.65s; //js========================================================= onReachBottom(e) console.log("底部")// 滚动到页面执行 该 方法 wx.showToast( title: ‘加载中...‘, icon:‘loading‘, duration:2000 ) /* 这里执行你需要的请求数据追加到循环数组就好了 */ , onPageScroll(e) //console.log(e) //滚动条 滚动的位置(e.scrollTop)从头部开始计算 ,
第二种:可以用 scroll-view 组件,scroll-y为true 时允许纵向滚动、使用scroll-view 组件时需要设置固定的高度。组件中有一个bindscrolltolower 触底 /右边 方法。详情见官方文档(PS: 使用组件会在页面产生一个滚动条,而page中也会有一个此时会出现问题,可以在页面 .json配置文件中 设置:"disableScroll":true 页面整体不能上下滚动 等价于 wxss 中pageoverflow:hidden ;)
<!-- scroll-view --> <scroll-view scroll-y=‘true‘ style="height:heightpx" bindscroll=‘scrollt‘ bindscrolltolower=‘scrollBottom‘> <view class=‘warp‘> <view wx:for="arr" class=‘bg_cl‘></view> </view> </scroll-view> ==============wxss 延用上方就好了 下方是js‘================= onLoad: function () var that=this wx.getSystemInfo( success:res=> console.log(res) this.setData( height: res.windowHeight //获取屏幕高度 赋值给scroll-view ) ) , //scroll- view 滚动条 距顶部多少px scrollt(e) console.log(e.detail) , // scroll-view 滚动到底部触发 scrollBottom(e) console.log(" 我是scroll 的底部") //此处添加你的 请求方法就好了 这里不多做赘述了。
.
以上是关于微信小程序~上拉加载onReachBottom的主要内容,如果未能解决你的问题,请参考以下文章