1. 程式人生 > >【微信小程式開發遇到的那些坑】之——為什麼上拉載入後會返回頂部

【微信小程式開發遇到的那些坑】之——為什麼上拉載入後會返回頂部

我下面的程式碼是沒有問題的,確實每次都能載入到,但是都會重回頂部 

注:下面的程式碼不能直接用,有一些變數沒有貼上來

//上拉載入下一頁商品
  onReachBottom: function() {
    console.log('--------上拉載入--------');
    this.getGoods(page);
  },

//重新整理列表
  getGoods: function(page) {
    var that = this;

    if (isfinish) return;

    wx.showLoading({
      title: '正在載入',
    })
    wx.request({
      url: '',
      data: {
        endtime: util.formatTime(new Date),
        currentpage: page,
        process: 1,
        // condition:that.data.condition
      },
      header: getApp().globalData.header,
      method: 'POST',
      dataType: 'json',
      success: function(res) {
        console.log(res.data);
        if (res.data.pojo.currentpage <= res.data.pojo.totalpage) {
          //宣告一個goods物件指向頁面中的goods
          var goods = that.data.goods;
          for (var i = 0; i < res.data.pojo.pojo.length; i++) {
            goods.push(res.data.pojo.pojo[i]);
          }
          //更新頁面資料
          that.setData({
            goods: goods
          });
          console.log(that.data.goods);
          page++;
          if (res.data.pojo.currentpage == res.data.pojo.totalpage) {
            isfinish = true;
          }
        }
      },
      complete: function() {
        wx.hideLoading();
        wx.stopPullDownRefresh();
      }
    })
  },

那麼到底是為什麼呢?經過我很久的尋找,是在wxml檔案中:

不可以用scroll-view來裝我們動態wx:for的陣列!

正確程式碼如下:

 <view>
  <block wx:for="{{goods}}" wx:key="goodsid">
    <!-- 使用模板 -->
      <view data-info="{{item}}" bindtap="todetail">
        <template is="goods" data="{{item}}"></template>
      </view>
    </block>
  </view>

希望我的記錄能夠幫到你~ 喜歡請點贊!

謝謝你看到這裡!寫作倉促,有疏漏之處還請評論指正,共同探討進步!

相關推薦

程式開發遇到的那些——為什麼載入返回頂部

我下面的程式碼是沒有問題的,確實每次都能載入到,但是都會重回頂部  注:下面的程式碼不能直接用,有一些變數沒有貼上來 //上拉載入下一頁商品 onReachBottom: function()

程式開發•系列文章四模組化

微信小程式的MINA框架,其實是許多前端開發技術的組合。這篇文章中,我們來簡單地討論一下模組化。 1、模組化標準 玩前端的同學大部分都知道模組化的幾個標準,CommonJs / AMD / CMD。這裡花費一些篇幅簡單的介紹一下,比較熟悉的同學可以跳過這一部分的介紹。(1)

程式開發快速開發一個動態橫向導航模板並使用

目標:做個橫向導航,可以橫向滾動。 思路:使用scroll-view元件,可實現橫向滾動功能。scroll-view內包含一個動態的view列表,代表導航的每一項,導航要接收動態陣列,然後使用列表展示。使用模板技術做到可複用。 按照思路,先要做個template。 新建一個wxml檔案:navbar.w

程式開發javascript建立date物件

最近開發中用到date,開始以如下方式來建立: var date = new Date('2018-01-30 11:00:00'); 在開發工具上,除錯,ios 和 android都好好的。 在真機上一跑,android沒問題,ios出問題了。 不應該呀,按理,在開發工具上整合的是ios瀏覽器核心。

程式開發筆記傳多個檔案超過10個

【小程式筆記】wx.uploadFile(OBJECT) 先說說遇到的問題: 小程式可通過wx.uploadFile(OBJECT)介面上傳手機檔案至伺服器,但是在文件中關於請求中有這麼一段說明: request、uploadFile、down

程式開發實現輪番圖效果swiper 元件

輪番效果在很多的網站主頁或者手機應用端都能看到,在微信小程式中使用swiper元件來實現圖片輪番,今天的小例子效果如下: 為了方便演示我將動畫切換的間隔調整為3s,現實專案中一般為5s,具體看專

程式開發筆記--蘋果手機的懸浮按鈕居中問題

小程式開發筆記(二)–蘋果手機的懸浮按鈕居中問題 記錄小程式開發過程中遇到的那些問題 先看效果圖 頁面很簡單,上面兩個輸入框,下方一個按鈕,輸入框分別是textarea和input,按鈕在這裡我做成懸浮狀態(演示用,實際並不需要懸浮)。 頁面

程式開發IOS與安卓樣式相容問題

1.margin在IOS中失效 在頁面中元素使用margin值,在某些IOS裝置下會出現失效的情況,而安卓機則正常顯示,此問題暫無直接的解決方案,當前使用空DIV控制間距。 2.fixed定位問題 整個頁面的fixed定位,在ios下下拉會觸發下拉事件,但

程式live-pusher那些

最近在做用微信小程式實現實時通話,一個頁面同時使用了live-pusher和live-player。中途踩了許多坑,在這裡做一下總結,希望能幫到大家。 1問題:Live-player播著播著沒聲音了 原因:對live-pusher進行start, stop,resu

程式開發(入旅)一:域名問題。

3、按照步驟來,經歷了註冊開發者->申請小程式開發->填寫小程式資訊->獲取小程式ID和祕鑰->下載開發者工具->新建專案。 tips:注意:按照教程建立新專案後,

程式+ES6新特性應用字串模板:美元符號$+大括號{}變數的寫法

1、字串模板簡介 ES6新特性中的字串模板允許使用英文字元抑音符號`(提示:這裡我們不能將其理解為單引號)來建立字串,並且在該字串中可以包含都【美元符號+大括號】包裹的變數格式:console.lo

程式開發遇到的

1、input 、textarea 一堆問題,具體什麼問題 你們應該知道,廣大開發者心中也有數,是官方在技術上實現不了??還是其他原因呢 2、部分真機 小程式啟動時 頁面白屏問題 (貌似資源未載入,我說的不是圖片啥的,就是程式碼沒執行,控制檯一片空白) 3

程式開發工具七牛雲的圖片可以看到,但是在真機上看不到的原因解決

在開發微信小程式過程中,在微信開發者工具上,七牛雲的圖片都可以展示出來,但是在真機上,七牛雲的圖片卻展示不出來,也沒有報404找不到或者不能載入圖片的問題,     必須保證: 1.圖片是用image載入的; 2.圖片的url裡面沒有中文; 3.圖片的HTTP應為小寫的

轉載程式-開發入門(一)

微信小程式已經火了一段時間了,之前一直也在關注,就這半年的發展來看,相對原生APP大部分公司還是不願意將主營業務放到微信平臺上,以免受制於騰訊,不過就小程式的應用場景(用完即走和二維碼分發等)還是很值得我們學習的,技術上面如果瞭解React的話,會發現他們在元件化上面有很多雷同之處。說白了,小程式就是基於微信

程式開發從陌生到熟悉

前言 微信小程式在9月10號正式上線了雲開發的功能,弱化後端和運維概念,以前開發一個小程式需要申請一個小程式,準備一個https的域名,開發需要一個前端一個服務端,有了雲開發只有申請一個小程式,一個前端就能搞定,真的是零成本。 雲開發三大基礎能力 雲函式:執行在微信伺服器上的函式,處理微信相關操作有天然優勢

程式開發--初體驗(一)

第一步–註冊賬號 切記: 訂閱號、服務號、小程式、企業微信,以上四種功能每個郵箱僅能申請一種帳號。 第二步–登入 登入後我們看到的介面如圖所示: 我們看到東西特別多,我們一步一步來 第三步–完善小

例項-0基礎程式開發入門1.2-第一個程式

【開啟征程】開啟微信web開發者工具,點選小程式專案:點選右下角的“+”號,將建立快速模板前面的勾去掉然後選擇體驗小程式,目錄隨意,點選確定,即可建立一個全空的小程式專案啦。【建立最基本的目錄結構和檔案】在開始建立之前,我們有必要了解一下最基本的東西:​JSON 是一種資料格

程式開發路上遇到的那些

微信野心越來越大,如今已經從開始簡單的聊天工具發展成了一個網際網路生態系統,網羅了目前各大網際網路平臺所具備的功能,最近iOS端微信上線的“搜一搜”和“看一看”更加證實了這一點,直接看下面這張圖吧: 好了,今天繼續給大家分享這個牛逼的“削蘋果”的小程式的相

程式學習筆記1:開發一個帶歷史記錄功能的四則計算器

端午CSDN學院促銷,買了微信小程式開發實戰跟著學習一下。 混合模式移動應用 微信小程式是一種Hybrid-App(混合模式移動應用),它是介於Native-App和Web-App之間的,更接近前者,但開發成本小很多。 基本結構 pages目錄:其內的

程式程式開發實踐

帳號相關流程 註冊範圍 企業 政府 媒體 其他組織 換句話講就是不讓個人開發者註冊。 :) 填寫企業資訊 不能使用和之前的公眾號賬戶相同的郵箱,也就是說小程式是和微信公眾號一個層級的。 填寫公司機構資訊,對公賬戶資訊 繫結管理員微信 企業認