【微信小程式開發遇到的那些坑】之——為什麼上拉載入後會返回頂部
我下面的程式碼是沒有問題的,確實每次都能載入到,但是都會重回頂部
注:下面的程式碼不能直接用,有一些變數沒有貼上來
//上拉載入下一頁商品 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目錄:其內的
【小程式】微信小程式開發實踐
帳號相關流程 註冊範圍 企業 政府 媒體 其他組織 換句話講就是不讓個人開發者註冊。 :) 填寫企業資訊 不能使用和之前的公眾號賬戶相同的郵箱,也就是說小程式是和微信公眾號一個層級的。 填寫公司機構資訊,對公賬戶資訊 繫結管理員微信 企業認