一、标签布局部分
<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。求各位哥哥姐姐，叔叔婶婶帮帮忙分享下经验呗！
-----姜小白
网友回复：
S***：
为什么撑满全屏要用flex? 绝对定位也可以啊
姜***：
系统记录
姜***：
为了解决不同屏幕的适配问题
姜***：
经过反复试验，得出个结论，这个scroll-view组件必须得内联写死个height值之后，在滑动期间IOS手机上才能触发bindscrolltolower事件
姜***：
但是绝对定位恐怕解决不了微信小程序不同屏幕的适配问题吧
S***：
并不是这样，我用绝对定位把scroll-view塞满屏幕或者写个固定高度都可以触发bindscrolltolower，不管是iOS还是Android
S***：
绝对定位完全可以完美解决：
page { width: 100%; min-height: 100%; position: relative;}
scroll-view { position: absolute; left: 0; top: 0; right: 0; bottom: 0; opacity: 0;} |
姜***：
系统记录
爱盈利（aiyingli.com）移动互联网最具影响力的盈利指导网站。定位于服务移动互联网创业者，移动盈利指导。我们的目标是让盈利目标清晰可见！降低门槛，让缺乏经验、资金有限的个人和团队获得经验和机会，提高热情，激发产品。
【转载说明】 若上述素材出现侵权，请及时联系我们删除及进行处理：8088013@qq.com
