轻源码

  • QingYuanMa.com
  • 全球最大的互联网技术和资源下载平台
搜索
一起源码网 门户 微信小程序 查看主题

微信小程序下拉刷新上拉加载的两种实现方法使用评测

发布者: sunzd | 发布时间: 2018-1-24 18:22| 查看数: 8123| 评论数: 1|帖子模式

 
直奔主题:如果当前页面含有scroll-view,请注意: 
scroll-view高度如果设置为屏幕高度时,建议采用在scroll-view里设定bindscrolltoupper和bindscrolltolower方式,因为如果这种情况下仍然使用onPullDownRefresh和onReachBottom方法,会存在监测不到上拉刷新事件的问题, 
代码如下:

  1. <!--test.wxml-->
  2. <view>
  3. <scroll-view scroll-y="true">
  4. <view style="background-color:red">1</view>
  5. <view style="background-color:blue">2</view>
  6. <view style="background-color:green">3</view>
  7. </scroll-view>
  8. </view>
  1. //test.js
  2. //获取应用实例
  3. Page
  4. ({
  5. data: {
  6. },
  7. onPullDownRefresh: function(e) {
  8. console.log('使用全局方法滑动到了页面顶部');
  9. },
  10. onReachBottom: function(e) {
  11. console.log('使用全局方法滑动到了页面底部');
  12. }
  13. }
  1. /* pages/test/test.wxss */
  2. scroll-view {
  3. height: 1334rpx;
  4. width: 748rpx;
  5. border: solid 1rpx black;
  6. }
  7. scroll-view view {
  8. height: 600rpx;
  9. width: 750rpx;
  10. }

效果如图所示: 

因此,建议在布局时,如果scroll-view组件高度设置为了当前屏幕高度,还是要用scroll-view组件的bindscrolltoupper和bindscrolltolower方式,代码如下:

  1. <!--test.wxml-->
  2. <view>
  3. <scroll-view scroll-y="true" bindscrolltoupper="DingBu" bindscrolltolower="DiBu">
  4. <view style="background-color:red">1</view>
  5. <view style="background-color:blue">2</view>
  6. <view style="background-color:green">3</view>
  7. </scroll-view>
  8. </view>
  1. //test.js
  2. Page
  3. ({
  4. data: {
  5. },
  6. DingBu: function(e) {
  7. console.log('使用局部方法滑动到了页面顶部');
  8. },
  9. DiBu: function(e) {
  10. console.log('使用局部方法滑动到了页面底部');
  11. }
  12. })
  1. /* pages/test/test.wxss */
  2. scroll-view {
  3. height: 1334rpx;
  4. width: 748rpx;
  5. border: solid 1rpx black;
  6. }
  7. scroll-view view {
  8. height: 600rpx;
  9. width: 750rpx;
  10. }

效果如图所示: 

附学习链接:

最新评论

戏子入戏 发表于 2022-5-14 07:52
怎么用代码下载图片

轻源码让程序更轻更快

QingYuanMa.com

工作时间 周一至周六 8:00-17:30

侵权处理

客服QQ点击咨询

关注抖音号

定期抽VIP

Copyright © 2016-2021 https://www.171739.xyz/ 滇ICP备13200218号

快速回复 返回顶部 返回列表