微信小程序預加載圖片以及占位圖片


wxml頁面

利用三目運算:代碼如下:

 1 <image src="{{ima?ima:'../../images/4.jpg'}}" /> 

(../../images/4.jpg)這里意思是預加載圖片大概是一張黑白色的類似於

 

js代碼如下:

 

Page({
/**
* 頁面的初始數據
*/
data: {
ima: "",
},
/**
* 生命周期函數--監聽頁面加載
*/

internet:function(){

  setTimeout(function(){

    this.setData({  

/*setData*/是為了模擬服務器傳輸的數據     

ima:'http://pic4.nipic.com/20091217/3885730_124701000519_2.jpg',     

})  

 }.bind(this),2000);

},

onLoad: function (options) {
this. internet()
/*調用*/
 
},

// app.YoniClient.request(app.Func.LOGIN,)

/**
* 生命周期函數--監聽頁面初次渲染完成
*/
onReady: function () {

},
/**
* 生命周期函數--監聽頁面顯示
*/
onShow: function () {

},

/**
* 生命周期函數--監聽頁面隱藏
*/
onHide: function () {

},

/**
* 生命周期函數--監聽頁面卸載
*/
onUnload: function () {

},

/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {

},

/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {

},

/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {

}
})

 

那么如果是以數組形式的話也非常簡單:

wxml代碼

<image src='{{item.images?item.images:"../../../images/sketch_169_102.jpg"}}' class='news_list_img' mode='widthFix'></image>

因為數組的話要用到參數item可能其他

js代碼如下:

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    items: [{
      title: "第一屆少兒足球比賽",
      txt: "第一屆鄭州足球比賽開幕式z乒啟動計划",
      time: "2017年11月20日",
      images: '',
    }, {
      title: "第一屆少兒足球比賽",
      txt: "第一屆鄭州足球比賽開幕式z乒啟動計划",
      time: "2017年11月22日",
      images: '',
    }],
    ite: [{
      title: "第一屆少兒足球比賽",
      txt: "第一屆鄭州足球比賽開幕式z乒啟動計划",
      time: "2017年11月20日",
      images: "http://img2.niutuku.com/desk/1208/1401/ntk-1401-8806.jpg",
    }, {
      title: "第一屆少兒足球比賽",
      txt: "第一屆鄭州足球比賽開幕式z乒啟動計划",
      time: "2017年11月22日",
      images: "http://img2.niutuku.com/desk/1208/1401/ntk-1401-8806.jpg",
    }]
  },
/**
   * 生命周期函數--監聽頁面加載
   */
  internet: function () {
    let ite = this.data.ite;
    setTimeout(function () {
      this.setData({
        items: ite,
      })
    }.bind(this), 2000);
  },
  onLoad: function (options) {
this.internet()
},
/** * 生命周期函數--監聽頁面初次渲染完成 */ onReady: function () { }, /** * 生命周期函數--監聽頁面顯示 */ onShow: function () { }, /** * 生命周期函數--監聽頁面隱藏 */ onHide: function () { }, /** * 生命周期函數--監聽頁面卸載 */ onUnload: function () { }, /** * 頁面相關事件處理函數--監聽用戶下拉動作 */ onPullDownRefresh: function () { }, /** * 頁面上拉觸底事件的處理函數 */ onReachBottom: function () { }, /** * 用戶點擊右上角分享 */ onShareAppMessage: function () { } })

 

setData是為了實例化數據目的為了能夠放在頁面將ite模擬數據賦值給定義的ite(名字隨便定義)既然是數據就會有data,bind的目的是為了捆綁,后面的數字是時間間隔多少秒顯示要加載出來的數據

 本人原創博客希望大家提出意見:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM