1. 程式人生 > >小程式-聊天功能觸頂載入聊天內容

小程式-聊天功能觸頂載入聊天內容

效果圖(感覺有用的可以繼續看下去)

在這裡插入圖片描述
在這裡插入圖片描述

主要思路

主要通過通過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個月,慢慢寫點小程式的前端)