小程式-聊天功能觸頂載入聊天內容
阿新 • • 發佈:2018-11-03
效果圖(感覺有用的可以繼續看下去)
主要思路
主要通過通過index給介面中的資料加上一個id,但不能為數字,所以加上一個‘chat’拼接字串。
<scroll-view class="main" scroll-y="true" scroll-into-view="{{getindexid}}" bindscrolltoupper="scrollup" scroll-top="{{scrollTop}}" >
<view wx:for="{{connectchat}}" wx:key="index" bindtap="closefoot" id="{{'chat'+index}}">
聊天內容。。。。
</view>
</scroll-view>
對應的js
data = {
first: 1,
scrollTop: 99999,// 觸底
params: {
page: 1
},
// 滾動條到頂部是觸發
scrollup() {
if (this.pagination <= this.params.page * 20) {
wx.stopPullDownRefresh()
return false // 當小於總數時返回,
}
this.params.page = this.params.page + 1
this.connecting()
this.getindexid = ''
this.$apply()
}
介面中對資料處理
async connecting(e) {
let ref = await wepy.request({ url:...})
if (ref) {
。。。(對陣列處理可能要倒敘)
this.connectchat = [...barr, ...this. connectchat] // 聊天內容,陣列拼接
this.first = this.first + 1
if (this.first === 2) {
this.pageScrollToBottom()// 只為了執行一次進入頁面觸底
} else {
this.getindexnum = ref.list.length // 第2次調介面獲取到介面中陣列的大小(為了後面定點到的index)
}
if (this.params.page >= 2) {
let a = this.getindexnum - 1
this.getindexid = 'chat' + a //這裡將調到的id ,對應的scroll-into-view="{{getindexid}}"
}
this.$apply()
}
}
pageScrollToBottom() {
this.scrollTop = this.scrollTop - 1 // 減一了,才會觸發scroll-top觸底。首次進入呼叫。
}
第一次寫部落格,如不好大家見諒!(剛出來不到3個月,慢慢寫點小程式的前端)