标签：详情 nta images ast 使用 nal 简单 ble key
代码：
//页面上拉触底事件的处理函数 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 中page{overflow:hidden} ;）
<!-- scroll-view --> <scroll-view scroll-y=‘true‘ style="height:{{height}}px" 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 的底部") //此处添加你的 请求方法就好了 这里不多做赘述了。 }
.
标签：详情 nta images ast 使用 nal 简单 ble key
原文地址：https://www.cnblogs.com/jianxian/p/11122929.html
