国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

小程序開(kāi)發(fā)：上拉加載數(shù)據(jù)

Chiclaim / 846人閱讀

摘要：導(dǎo)語(yǔ)需求是上拉加載數(shù)據(jù)，實(shí)際就是獲取分頁(yè)數(shù)據(jù)。后臺(tái)就是正常的請(qǐng)求分頁(yè)數(shù)據(jù)，小程序部分稍復(fù)雜些，查了一些資料完成的，但是資料的鏈接找不到了，不能放上以供參考了。小程序頁(yè)面涉及到數(shù)據(jù)循環(huán)，下面是簡(jiǎn)單的實(shí)例的開(kāi)發(fā)模式例如，提倡把渲染和邏輯分離。

導(dǎo)語(yǔ)

需求是上拉加載數(shù)據(jù)，實(shí)際就是獲取分頁(yè)數(shù)據(jù)。后臺(tái)就是正常的ajax請(qǐng)求分頁(yè)數(shù)據(jù)，小程序部分稍復(fù)雜些，查了一些資料完成的， 但是資料的鏈接找不到了，不能放上以供參考了。

小程序頁(yè)面

涉及到數(shù)據(jù)循環(huán)，下面是簡(jiǎn)單的實(shí)例

 
     {{item.name}}
     {{item.age}}
  
MVVM 的開(kāi)發(fā)模式(例如 React, Vue)，提倡把渲染和邏輯分離。簡(jiǎn)單來(lái)說(shuō)就是不要再讓 JS 直接操控 DOM，JS只需要管理狀態(tài)即可，然后再通過(guò)一種模板語(yǔ)法來(lái)描述狀態(tài)和界面結(jié)構(gòu)的關(guān)系即可。
小程序JS部分

JS部分負(fù)責(zé)的是獲取數(shù)據(jù)，以及拼接數(shù)據(jù)

Page({

    /**
     * 頁(yè)面的初始數(shù)據(jù)
     */
    data: {
        array: [],
        page: 1,
        isReachBottom: true // 是否上拉加載
    },

    // 獲取數(shù)據(jù)
    getList: function () {
        var that = this;
        wx.request({
            url: "https://xxx",
            data: {
                p: that.data.page
            },
            success: function (res) {
                if (res.data.message == "success") {
                    // 獲取成功，數(shù)據(jù)追加
                    var list = [];
                    var count = res.data.data.length
                    for (var i = 0; i < count; i++) {
                        var data = {name: "", age: ""};
                        data.name = res.data.data[i].name;
                        data.age = res.data.data[i].age;
                        list.push(data);
                    }
                    Array.prototype.push.apply(that.data.array, list);
                    that.setData({
                        array: that.data.array
                    })
                } else if (res.data.message == "finish") {
                    // 沒(méi)有數(shù)據(jù)，禁止再次上拉加載
                    that.setData({
                        isReachBottom: false
                    })
                }
            }
        })
    },

    /**
     * 頁(yè)面上拉觸底事件的處理函數(shù)
     */
    onReachBottom: function () {
        if (this.data.isReachBottom == true) {
            this.setData({
                page: this.data.page + 1
            })
            this.getList()
        }
    }

})

關(guān)于上拉觸底，還有這些特性

參考資料：小程序、列表渲染、注冊(cè)頁(yè)面。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/29994.html

相關(guān)文章

  • 總結(jié)開(kāi)發(fā)過(guò)程踩到的坑（五）（小程序篇）

    摘要：最近開(kāi)始接觸了小程序的開(kāi)發(fā)，由于時(shí)間問(wèn)題，文檔閱讀的并不完備，也踩了很多坑。的使用微信小程序不支持原生頁(yè)面跳轉(zhuǎn)，包括和，若要跳轉(zhuǎn)小程序應(yīng)用內(nèi)頁(yè)面，需要使用，詳見(jiàn)。參考文獻(xiàn)微信小程序開(kāi)發(fā)者文檔 最近開(kāi)始接觸了小程序的開(kāi)發(fā)，由于時(shí)間問(wèn)題，文檔閱讀的并不完備，也踩了很多坑。不得不說(shuō)，微信的野心真是越來(lái)越大了，但是它超高的流量注定了它有這個(gè)資本。 原文地址：mini programs 目...

    young.li 評(píng)論0 收藏0

  • 總結(jié)開(kāi)發(fā)過(guò)程踩到的坑（五）（小程序篇）

    摘要：最近開(kāi)始接觸了小程序的開(kāi)發(fā)，由于時(shí)間問(wèn)題，文檔閱讀的并不完備，也踩了很多坑。的使用微信小程序不支持原生頁(yè)面跳轉(zhuǎn)，包括和，若要跳轉(zhuǎn)小程序應(yīng)用內(nèi)頁(yè)面，需要使用，詳見(jiàn)。參考文獻(xiàn)微信小程序開(kāi)發(fā)者文檔 最近開(kāi)始接觸了小程序的開(kāi)發(fā)，由于時(shí)間問(wèn)題，文檔閱讀的并不完備，也踩了很多坑。不得不說(shuō)，微信的野心真是越來(lái)越大了，但是它超高的流量注定了它有這個(gè)資本。 原文地址：mini programs 目...

    Cympros 評(píng)論0 收藏0

  • 「輕算賬」小程序實(shí)踐筆記

    摘要：資源開(kāi)發(fā)文檔是一套完全免費(fèi)的微信小程序開(kāi)發(fā)框架，擴(kuò)展了小程序的能力。推薦有一些不錯(cuò)的解決方案封裝封裝跨頁(yè)面事件通訊監(jiān)聽(tīng)數(shù)據(jù)變化開(kāi)發(fā)如何在微信小程序的頁(yè)面間傳遞數(shù)據(jù)需要時(shí)可以快速過(guò)一遍。微信小程序回調(diào)，，，的使用例子供參考 這篇文章主要記錄我做小程序「輕算賬」過(guò)程中遇到的一些問(wèn)題和解決方案，就當(dāng)是做個(gè)總結(jié)，也希望其中有能夠幫助到他人的信息。 showImg(https://segment...

    BigTomato 評(píng)論0 收藏0

  • 微信小程序資源匯總

    awesome-github-wechat-weapp 是由OpenDigg整理并維護(hù)的微信小程序開(kāi)源項(xiàng)目庫(kù)集合。我們會(huì)定期同步上的項(xiàng)目到這里，也歡迎各位 UI組件開(kāi)發(fā)框架實(shí)用庫(kù)開(kāi)發(fā)工具服務(wù)端項(xiàng)目實(shí)例Demo UI組件 weui-wxss ★1873 - 同微信原生視覺(jué)體驗(yàn)一致的基礎(chǔ)樣式庫(kù)zanui-weapp ★794 - 好用易擴(kuò)展的小程序 UI 庫(kù)wx-charts ★449 - 微信小程...

    Olivia 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<