IOS的scroll-view不触发bindscrolltolower事件问题
发布于 5 年前 作者 bcheng 14495 次浏览 来自 问答

一、标签布局部分

<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。求各位哥哥姐姐,叔叔婶婶帮帮忙分享下经验呗!

            -----姜小白

4 回复

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

绝对定+1

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

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

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

回到顶部