码迷,mamicode.com
首页 > 微信 > 详细

微信小程序预加载图片以及占位图片

时间:2017-12-02 17:54:14      阅读:843      评论:0      收藏:0      [点我收藏+]

标签:log   代码   client   模拟服务器   ready   bottom   otto   调用   隐藏   

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的目的是为了捆绑,后面的数字是时间间隔多少秒显示要加载出来的数据

 

 

微信小程序预加载图片以及占位图片

标签:log   代码   client   模拟服务器   ready   bottom   otto   调用   隐藏   

原文地址:http://www.cnblogs.com/houyi521/p/7954541.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!