收藏
回答

IOS的scroll-view不触发bindscrolltolower事件问题

问题模块
客户端

一、标签布局部分

<scroll-view scroll-y="true" lower-threshold="{{toView}}" bindscrolltolower="lower">

            <view class="songitem flex-wrp" style="flex-direction:row;" wx:for="{{songslist}}" wx:key="item" wx:for-index="idx" data-song-msg="{{item}}" data-song-index="{{idx}}" bindtap="playSong">

                <view class="flex-item_image">

                    <image class="songimage" src="{{item.imgurl}}"></image>

                </view>

                <view class="flex-item_text">

                    <view class="flex-item_songname">{{item.songname}}</view>

                    <view class="flex-item_singer">{{item.singer}}</view>

                </view>

            </view>

            <view hidden="{{hideloading}}">

              加载中...

            </view>

        </scroll-view >

二、以下是JS部分

Page({

data: {

  songslist:[

      {

        id:"1",

        imgurl:"image/songimg.png",

        songname:"饿狼传说",

        singer:"张学友"

      },{

        id:"2",

        imgurl:"image/songimg.png",

        songname:"唯一",

        singer:"王力宏"

      }

    ],

    hideloading:false,

    toView:30,

    lowerbusy:false

  },

  //此处为scroll-view定义的下拉至底部触发事件,lowerbusy标志位是为了解决多次触发该事件导致的问题

  lower:function(){

    console.log("下拉刷新");

    var that = this;

    if(this.data.lowerbusy){

        console.log('加载正忙...')

        return;

    }else{

      this.setData({

        hideloading: false,

        lowerbusy: true

      })

      var new_songlist = [];

//此处延时改变data中的数据模拟加载过程

      setTimeout(function () {

        for (var i = 0; i < 6; i++) {

          var song = {

            id: that.data.songslist.length + i + 1 + '',

            imgurl: "image/songimg.png",

            songname: that.data.songslist[i].songname,

            singer: that.data.songslist[i].singer

          }

          new_songlist.push(song);

          // console.log("song:"+song);

        }

        console.log(new_songlist);

        //此处恢复lowerbusy

        that.setData({

          songslist: that.data.songslist.concat(new_songlist),

          hideloading: true,

          lowerbusy: false

        })

      }, 3000)

    }

  }

})


刚开始遇到的是scroll-view的bindscrolltolower事件在滑动到底部的时候会多次触发,于是加了标志位解决这个问题。Android上已经看起来一切很正常,实现了滑到底部加载的问题。但是IOS滑动到底部却没有任何反应。还有一点需要说下,当时布局为了解决scroll-view组件能够撑满全屏样式部分采用flex布局,而没有给scroll-view标签写固定height。求各位哥哥姐姐,叔叔婶婶帮帮忙分享下经验呗!



            -----姜小白

最后一次编辑于  2017-05-09  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

4 个回答

  • Sincere 🐾
    Sincere 🐾
    2017-05-10

    为什么撑满全屏要用flex? 绝对定位也可以啊

    2017-05-10
    赞同
    回复
  • Sincere 🐾
    Sincere 🐾
    2017-05-10

    并不是这样,我用绝对定位把scroll-view塞满屏幕或者写个固定高度都可以触发bindscrolltolower,不管是iOS还是Android

    2017-05-10
    赞同
    回复
  • Sincere 🐾
    Sincere 🐾
    2017-05-10

    绝对定位完全可以完美解决:

    page {
        width: 100%;
        min-height: 100%;
        position: relative;
    }
     
    scroll-view {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
    }


    2017-05-10
    赞同
    回复
  • harry
    harry
    2018-01-31

    绝对定+1

    2018-01-31
    赞同
    回复