一、標(biāo)簽布局部分
<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:"張學(xué)友"
},{
id:"2",
imgurl:"image/songimg.png",
songname:"唯一",
singer:"王力宏"
}
],
hideloading:false,
toView:30,
lowerbusy:false
},
//此處為scroll-view定義的下拉至底部觸發(fā)事件，lowerbusy標(biāo)志位是為了解決多次觸發(fā)該事件導(dǎo)致的問題
lower:function(){
console.log("下拉刷新");
var that = this;
if(this.data.lowerbusy){
console.log('加載正忙...')
return;
}else{
this.setData({
hideloading: false,
lowerbusy: true
})
var new_songlist = [];
//此處延時(shí)改變data中的數(shù)據(jù)模擬加載過程
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);
//此處恢復(fù)lowerbusy
that.setData({
songslist: that.data.songslist.concat(new_songlist),
hideloading: true,
lowerbusy: false
})
}, 3000)
}
}
})
剛開始遇到的是scroll-view的bindscrolltolower事件在滑動(dòng)到底部的時(shí)候會(huì)多次觸發(fā)，于是加了標(biāo)志位解決這個(gè)問題。Android上已經(jīng)看起來一切很正常，實(shí)現(xiàn)了滑到底部加載的問題。但是IOS滑動(dòng)到底部卻沒有任何反應(yīng)。還有一點(diǎn)需要說下，當(dāng)時(shí)布局為了解決scroll-view組件能夠撐滿全屏樣式部分采用flex布局，而沒有給scroll-view標(biāo)簽寫固定height。求各位哥哥姐姐，叔叔嬸嬸幫幫忙分享下經(jīng)驗(yàn)唄！
-----姜小白
網(wǎng)友回復(fù)：
S***：
為什么撐滿全屏要用flex? 絕對(duì)定位也可以啊
姜***：
系統(tǒng)記錄
姜***：
為了解決不同屏幕的適配問題
姜***：
經(jīng)過反復(fù)試驗(yàn)，得出個(gè)結(jié)論，這個(gè)scroll-view組件必須得內(nèi)聯(lián)寫死個(gè)height值之后，在滑動(dòng)期間IOS手機(jī)上才能觸發(fā)bindscrolltolower事件
姜***：
但是絕對(duì)定位恐怕解決不了微信小程序不同屏幕的適配問題吧
S***：
并不是這樣，我用絕對(duì)定位把scroll-view塞滿屏幕或者寫個(gè)固定高度都可以觸發(fā)bindscrolltolower，不管是iOS還是Android
S***：
絕對(duì)定位完全可以完美解決：
page { width: 100%; min-height: 100%; position: relative;}
scroll-view { position: absolute; left: 0; top: 0; right: 0; bottom: 0; opacity: 0;} |
姜***：
系統(tǒng)記錄
愛盈利（aiyingli.com）移動(dòng)互聯(lián)網(wǎng)最具影響力的盈利指導(dǎo)網(wǎng)站。定位于服務(wù)移動(dòng)互聯(lián)網(wǎng)創(chuàng)業(yè)者，移動(dòng)盈利指導(dǎo)。我們的目標(biāo)是讓盈利目標(biāo)清晰可見！降低門檻，讓缺乏經(jīng)驗(yàn)、資金有限的個(gè)人和團(tuán)隊(duì)獲得經(jīng)驗(yàn)和機(jī)會(huì)，提高熱情，激發(fā)產(chǎn)品。
【轉(zhuǎn)載說明】 若上述素材出現(xiàn)侵權(quán)，請(qǐng)及時(shí)聯(lián)系我們刪除及進(jìn)行處理：[email protected]
