初学必“晕”的两个Page事件,您肯定不知道的!(框架细节八)

  • • 发表于 4年前
  • • 作者 Roluce
  • • 8935 人浏览
  • • 15 条评论
  • • 最后编辑时间 4年前
  • • 来自 [技 术]

原创声明:本文为作者原创,未经允许不得转载,经授权转载需注明作者和出处

如下图:Page页的事件,onLoad,onShow很容易测试。
onPullDownRefresh()和onReachBottom没看懂,也不知道如何测试!
困扰了好久~



今天灵机一转,终于测试这两个事件了!


onPullDownRefresh()

页面拉到顶部后,再拉就触发此事件!(在app.json的window开启)
即和微信朋友圈下拉相似,一拉就刷新。

onReachBottom()

页面高度大于屏幕高,才容易看出效果。
页面拉到底部就触发,瀑布流动态加载会用到。


1:首先在app.json里开启“enablePullDownRefresh”


//2:js代码
Page({

    onPullDownRefresh: function () {
        console.log("onPullDownRefresh");
    },

    onReachBottom: function () {
        console.log("onReachBottom");
    }

})

//3:WXML代码
<view class="container log-list">

  <scroll-view class="area1">
    区域A
  </scroll-view>

  <scroll-view class="area2">
    区域B
    <text id="vv">(保证大于屏幕的高度,出现下拉框)</text>
  </scroll-view>

  <scroll-view class="area3">
    区域C
  </scroll-view>
</view>

//4:WXSS
.log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}

.log-item {
  margin: 10rpx;
}

.area1 {
  height: 200rpx;
  background-color: greenyellow;
  text-align: center;
  line-height: 200rpx;
  font-weight: bold;
  color: red;
}

.area2 {
  height: 1300rpx;
  background-color: yellow;
  text-align: center;
  line-height: 1300rpx;
  font-weight: bold;
  color: red;
}

.area3 {
  height: 200rpx;
  background-color: aqua;
  text-align: center;
  line-height: 200rpx;
  font-weight: bold;
  color: red;
}
分享到:
评论区(共15条评论)
15条评论
Ctrl+Enter
作者

Roluce

Roluce

APP:0 帖子:50 回复:112 积分:3610

已加入社区[1337]天

山东_聊城_qq:635068

作者详情》
Top