用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

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

纸飞机 2018-3-8 09:38

分享者:士兵-nudt,原文地址 直奔主题:如果当前页面含有scroll-view,请注意: scroll-view高度如果设置为屏幕高度时,建议采用在scroll-view里设定bindscrolltoupper和bindscrolltolower方式,因为如果这种情况下 ...

分享者:士兵-nudt,

原文地址


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

  1. scroll-y="true">
  2. style="background-color:red">1
  3. style="background-color:blue">2
  4. style="background-color:green">3
  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. scroll-y="true" bindscrolltoupper="DingBu" bindscrolltolower="DiBu">
  2. style="background-color:red">1
  3. style="background-color:blue">2
  4. style="background-color:green">3
  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. }

效果如图所示:

附学习链接:

http://www.cnblogs.com/simba-lkj/p/6274232.html

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏