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

2019/8/7 17:22:20 人评论 次浏览 分类:开发资料


wxml页面

利用三目运算:代码如下:

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

(../../images/4.jpg)这里意思是预加载图片大概是一张黑白色的类似于

js代码如下:

  1. Page({
  2. /**
  3. * 页面的初始数据
  4. */
  5. data: {
  6. ima: "",
  7. },
  8. /**
  9. * 生命周期函数--监听页面加载
  10. */
  11. internet:function(){
  12. setTimeout(function(){
  13. this.setData({
  14. /*setData*/是为了模拟服务器传输的数据
  15. ima:'http://pic4.nipic.com/20091217/3885730_124701000519_2.jpg',
  16. })
  17. }.bind(this),2000);
  18. },
  19. onLoad: function (options) {
  20. this.internet()
  21. /*调用*/
  22. },
  23. // app.YoniClient.request(app.Func.LOGIN,)
  24. /**
  25. * 生命周期函数--监听页面初次渲染完成
  26. */
  27. onReady: function () {
  28. },
  29. /**
  30. * 生命周期函数--监听页面显示
  31. */
  32. onShow: function () {
  33. },
  34. /**
  35. * 生命周期函数--监听页面隐藏
  36. */
  37. onHide: function () {
  38. },
  39. /**
  40. * 生命周期函数--监听页面卸载
  41. */
  42. onUnload: function () {
  43. },
  44. /**
  45. * 页面相关事件处理函数--监听用户下拉动作
  46. */
  47. onPullDownRefresh: function () {
  48. },
  49. /**
  50. * 页面上拉触底事件的处理函数
  51. */
  52. onReachBottom: function () {
  53. },
  54. /**
  55. * 用户点击右上角分享
  56. */
  57. onShareAppMessage: function () {
  58. }
  59. })

那么如果是以数组形式的话也非常简单:

wxml代码

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

因为数组的话要用到参数item可能其他

js代码如下:

  1. Page({
  2. /**
  3. * 页面的初始数据
  4. */
  5. data: {
  6. items: [{
  7. title: "第一届少儿足球比赛",
  8. txt: "第一届郑州足球比赛开幕式z乒启动计划",
  9. time: "2017年11月20日",
  10. images: '',
  11. }, {
  12. title: "第一届少儿足球比赛",
  13. txt: "第一届郑州足球比赛开幕式z乒启动计划",
  14. time: "2017年11月22日",
  15. images: '',
  16. }],
  17. ite: [{
  18. title: "第一届少儿足球比赛",
  19. txt: "第一届郑州足球比赛开幕式z乒启动计划",
  20. time: "2017年11月20日",
  21. images: "http://img2.niutuku.com/desk/1208/1401/ntk-1401-8806.jpg",
  22. }, {
  23. title: "第一届少儿足球比赛",
  24. txt: "第一届郑州足球比赛开幕式z乒启动计划",
  25. time: "2017年11月22日",
  26. images: "http://img2.niutuku.com/desk/1208/1401/ntk-1401-8806.jpg",
  27. }]
  28. },
  29. /**
  30. * 生命周期函数--监听页面加载
  31. */
  32. internet: function () {
  33. let ite = this.data.ite;
  34. setTimeout(function () {
  35. this.setData({
  36. items: ite,
  37. })
  38. }.bind(this), 2000);
  39. },
  40. onLoad: function (options) {
  41. this.internet()
  42. },
  43. /**
  44. * 生命周期函数--监听页面初次渲染完成
  45. */
  46. onReady: function () {
  47. },
  48. /**
  49. * 生命周期函数--监听页面显示
  50. */
  51. onShow: function () {
  52. },
  53. /**
  54. * 生命周期函数--监听页面隐藏
  55. */
  56. onHide: function () {
  57. },
  58. /**
  59. * 生命周期函数--监听页面卸载
  60. */
  61. onUnload: function () {
  62. },
  63. /**
  64. * 页面相关事件处理函数--监听用户下拉动作
  65. */
  66. onPullDownRefresh: function () {
  67. },
  68. /**
  69. * 页面上拉触底事件的处理函数
  70. */
  71. onReachBottom: function () {
  72. },
  73. /**
  74. * 用户点击右上角分享
  75. */
  76. onShareAppMessage: function () {
  77. }
  78. })

setData是为了实例化数据目的为了能够放在页面将ite模拟数据赋值给定义的ite(名字随便定义)既然是数据就会有data,bind的目的是为了捆绑,后面的数字是时间间隔多少秒显示要加载出来的数据。

赞赏

相关教程

  • 微信小程序卡券开发(亲测)

    提示:小程序卡券和公众平台调用基本一致,请先查看公众平台卡券文档一、公众帐号/小程序绑定由于微信卡券用的是一套逻辑。所以小程序需要先和公众账号绑定,才能在小程序中调起公众平台卡券登录微信公众平台:https://open.weixin.qq.com/ 进行绑定操作二、公众号卡券添加小……

    2017/6/3 18:45:01

共有访客发表了评论 网友评论

验证码: 看不清楚?