一、标签布局部分
<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。求各位哥哥姐姐,叔叔婶婶帮帮忙分享下经验呗!
-----姜小白