最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

微信小程序scroll-view實(shí)現(xiàn)上拉加載數(shù)據(jù)重復(fù)的解決方法

 更新時(shí)間:2021年08月16日 17:09:56   作者:武當(dāng)山道士  
這篇文章主要為大家詳細(xì)介紹了微信小程序scroll-view實(shí)現(xiàn)上拉加載數(shù)據(jù)重復(fù)的解決方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

微信小程序的 scroll-view 上拉加載更多的BUG(數(shù)據(jù)會(huì)多加載,甚至有重復(fù)數(shù)據(jù))。

問(wèn)題描述:上拉一次,會(huì)多次觸發(fā)觸底函數(shù) onReachBottom();換成自定義加載更多函數(shù), 例如 loadMore(), 問(wèn)題依舊存在。

生產(chǎn)環(huán)境:調(diào)試基礎(chǔ)庫(kù) 目前最新版本1.9.94 依舊存在這個(gè)問(wèn)題。

解決方法:加狀態(tài)控制變量,限制 觸底函數(shù)/加載更多函數(shù) 的觸發(fā)條件。

頁(yè)面上拉加載更多后,看下圖,有重復(fù)數(shù)據(jù)

通用前端wxml代碼 search.wxml

<!--pages/shop/search.wxml-->
<scroll-view  scroll-y="true" style="height:{{windowHeight}}px;" bindscrolltolower="onReachBottom">

      <!-- 產(chǎn)品列表  -->
      <view class="flex-wrp">
         <block wx:for="{{items}}">
            <view  bindtap="onItemClick" class="item-box" data-iid="{{item.id}}"> 
               <image class="item-pic" src="{{item.thumb}}" mode="aspectFill"></image>
               <view class="item-info">
                  <view class='item-name'>{{item.name}}</view>
                  <view class='price-sold-box'>
                     <text class='current-price'>¥{{item.current_price}}</text>
                     <text class='item-sold'><text class='sold-title'>銷量</text> {{item.sold_num}}</text> 
                  </view>
               </view>
            </view> 
         </block> 
      </view>
      <view wx:if="{{pageEnd==true}}" class='scrollEnd'>已顯示所有數(shù)據(jù)...</view>
</scroll-view>

先看測(cè)試用例1 search.js(未修復(fù)BUG)

//pages/shop/public/search/search.js
/* 有BUG的JS用例 */

const app = getApp();
var page = 0;//分頁(yè)標(biāo)簽
Page({
   data: {
      pageEnd:false, //是否頁(yè)面底部
      windowHeight: app.getWH(),//應(yīng)用程序高度
      // 商品列表數(shù)組
      items:[],
   },

   /************************* 系統(tǒng)及頁(yè)面功能函數(shù)  **************************/
   //頁(yè)面加載
   onLoad: function (options) {
      //第一次加載
      this.getServerItems(page);
   },
   // 觸底函數(shù)(上拉加載更多)
   onReachBottom: function () {
      this.getServerItems(page);
   },

   /************************* 網(wǎng)絡(luò)請(qǐng)求  **************************/
   /**
    * 獲取服務(wù)器商品列表
    * @param {string} page       分頁(yè) 默認(rèn)0
    */
   getServerItems: function (pg) {
      var tar = this;
      //設(shè)置默認(rèn)值
      pg = pg ? pg : 0;
      wx.showLoading({//顯示toast
         title: '加載中...',
      });
      //網(wǎng)絡(luò)請(qǐng)求
      wx.request({
         url: "https://xxx.com/api/items/search",
         data: {page: pg},
         method: 'POST',
         header: { 'content-type': 'application/x-www-form-urlencoded' },
         success: function (res) {//網(wǎng)絡(luò)請(qǐng)求成功
            if (res.data.status == 1) {//有新數(shù)據(jù)
               var tmpArr = res.data.data;
               arr = arr.concat(tmpArr);
               tar.setData({
                  items: arr,
               });
               page++;

            } else {//res.data.status == 0 沒(méi)有新數(shù)據(jù)了
               tar.setData({
                  pageEnd:true,//顯示頁(yè)底信息
               })
            }

         },
         error: function (e) {//網(wǎng)絡(luò)請(qǐng)求失敗
            console.log(e);
         },
         complete: function(c){//網(wǎng)絡(luò)請(qǐng)求完成
            wx.hideLoading();//隱藏toast
         }
      })

   },

修復(fù)BUG,在上面 search.js 基礎(chǔ)上加上 觸底函數(shù)控制變量 canUseReachBottom 后的 search.js

//pages/shop/public/search/search.js
/* 修復(fù)BUG后的JS用例 */

const app = getApp();
var page = 0;
/* ------------------------- */
var canUseReachBottom = true;//觸底函數(shù)控制變量
/* ------------------------- */
Page({
   data: {
      pageEnd:false, 
      windowHeight: app.getWH(),
       items:[],
   },
   onLoad: function (options) {
      this.getServerItems(page);
   },
   // 觸底函數(shù)(上拉加載更多)
   onReachBottom: function () {
      /* ------------------------- */
        if(!canUseReachBottom) return;//如果觸底函數(shù)不可用,則不調(diào)用網(wǎng)絡(luò)請(qǐng)求數(shù)據(jù)
      /* ------------------------- */
      this.getServerItems(page);
   },
   ServerItems: function (pg) {
      /* ------------------------- */
        canUseReachBottom = false;//觸底函數(shù)關(guān)閉
      /* ------------------------- */
      var tar = this;
      pg = pg ? pg : 0;
      wx.showLoading({
         title: '加載中...',
      });
      wx.request({
         url: "https://xxx.com/api/items/search",
         data: {page: pg},
         method: 'POST',
         header: { 'content-type': 'application/x-www-form-urlencoded' },
         success: function (res) {
            if (res.data.status == 1) {//有新數(shù)據(jù)
               var tmpArr = res.data.data;
               arr = arr.concat(tmpArr);
               tar.setData({
                  items: arr,
               });
               page++;
              /* ------------------------- */
                canUseReachBottom = true;//有新數(shù)據(jù),觸底函數(shù)開(kāi)啟,為下次觸底調(diào)用做準(zhǔn)備
              /* ------------------------- */
            } else { 
               tar.setData({
                  pageEnd:true,
               })
            }

         },
         error: function (e) {
            console.log(e);
         },
         complete: function(c){
            wx.hideLoading();
         }
      })

   },

總結(jié):導(dǎo)致BUG的原因可能是因?yàn)?觸底函數(shù)觸發(fā)后,請(qǐng)求網(wǎng)絡(luò)數(shù)據(jù)->小程序渲染數(shù)據(jù)到前端,因?yàn)檫@兩個(gè)過(guò)程會(huì)比較耗時(shí),所以前端還沒(méi)來(lái)得及渲染完成,觸底函數(shù)判斷前端頁(yè)面還是在底部,再一次或者多次觸發(fā) 觸底函數(shù)。從而導(dǎo)致數(shù)據(jù)多次重復(fù)加載

通過(guò)看手機(jī)端小程序開(kāi)發(fā)版的vConsole也可以看到。上拉一次,連續(xù)觸發(fā)了3次網(wǎng)絡(luò)請(qǐng)求request begin,然后服務(wù)器才延時(shí)逐一返回success結(jié)果。如圖:

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • JS代碼混淆初步

    JS代碼混淆初步

    JS代碼混淆初步...
    2006-09-09
  • js操作css屬性實(shí)現(xiàn)div層展開(kāi)關(guān)閉效果的方法

    js操作css屬性實(shí)現(xiàn)div層展開(kāi)關(guān)閉效果的方法

    這篇文章主要介紹了js操作css屬性實(shí)現(xiàn)div層展開(kāi)關(guān)閉效果的方法,涉及javaScript操作css樣式實(shí)現(xiàn)div彈出層的效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2015-05-05
  • 用js查找法實(shí)現(xiàn)當(dāng)前欄目的高亮顯示的代碼

    用js查找法實(shí)現(xiàn)當(dāng)前欄目的高亮顯示的代碼

    本文給大家介紹了使用js查找法實(shí)現(xiàn)當(dāng)前欄目的高亮顯示的代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
    2007-11-11
  • JS在Array數(shù)組中按指定位置刪除或添加元素對(duì)象方法示例

    JS在Array數(shù)組中按指定位置刪除或添加元素對(duì)象方法示例

    這篇文章主要給大家介紹了關(guān)于JS在Array數(shù)組中按指定位置刪除或添加元素對(duì)象的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-11-11
  • JavaScript動(dòng)態(tài)添加style節(jié)點(diǎn)的方法

    JavaScript動(dòng)態(tài)添加style節(jié)點(diǎn)的方法

    這篇文章主要介紹了JavaScript動(dòng)態(tài)添加style節(jié)點(diǎn)的方法,涉及javascript節(jié)點(diǎn)操作的相關(guān)技巧,需要的朋友可以參考下
    2015-06-06
  • 最新評(píng)論

    子洲县| 胶南市| 金山区| 贡觉县| 通许县| 巍山| 碌曲县| 渝中区| 萨迦县| 莆田市| 白河县| 大宁县| 蒙城县| 渝北区| 崇左市| 承德县| 张北县| 伊通| 仙游县| 海门市| 汤阴县| 阜宁县| 鸡西市| 伊春市| 皋兰县| 鄂州市| 都昌县| 新昌县| 正镶白旗| 沭阳县| 苗栗县| 象州县| 金山区| 民乐县| 惠来县| 永修县| 九寨沟县| 墨脱县| 邹城市| 衡水市| 宜宾市|