小程序源码图片列表，图片下载-Toy模板网

这篇具有很好参考价值的文章主要介绍了小程序源码图片列表，图片下载。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

每日分享两个小程序源码

下载地址：无极低码：wheart.cnhttps://wheart.cn/so/home?m=dw&rid=f6d836c8-d54a-11ed-96fa-52540016e6ac

图片展示小程序源码,小程序,servlet,java,html,微信小程序,源码软件

文章来源地址https://www.toymoban.com/news/detail-617268.html

<!--index.wxml-->
<view>
  
  <loading hidden="{{hidden}}" >
    加载中...
  </loading>

  <view class= "card" wx:for = "{{items}}">
  
    <view  data-url="{{item.url}}" bindtap = "onItemClick">
       <image class= "image" mode="aspectFill" src="{{item.url}}"/>
       <view class="title">{{item.title}}</view>
    </view>

  </view>

  <button hidden="{{loadmorehidden}}" type="primary" class="loadmore" size="default" loading="{{loading}}" plain="{{plain}}" bindtap="loadMore"> 
  点击加载更多 
  </button>

</view>

//index.js
//获取应用实例
var app = getApp()
Page( {
  data: {
    items: [],
    hidden: false,
    loading: false,
    loadmorehidden:true,
    plain: false
  },

  onItemClick: function( event ) {
    var targetUrl = "/pages/image/image";
    //这个地方对于复杂路径有问题，传过去接收不到，因此先写死模拟
    console.log(event.currentTarget.dataset.url)
    if( event.currentTarget.dataset.url != null )
      targetUrl = targetUrl + "?url=" + event.currentTarget.dataset.url;
    wx.navigateTo( {
      url: targetUrl
    });
  },

  loadMore: function( event ) {
    var that = this
    requestData( that, mCurrentPage + 1 );
  },

  onLoad: function() {
    console.log( 'onLoad' )
    var that = this
   // requestData( that, mCurrentPage + 1 );
   var itemList = [];
      for( var i = 0;i < mUrl.length;i++ )
        itemList.push( { url: mUrl[ i ], desc: mDesc[ i ], who: mWho[ i ], time: mTimes[ i ], title: mTitles[ i ] });

      that.setData( {
        items: itemList,
        hidden: true,
        loadmorehidden:false,
      });
  }
})

/**
 * 定义几个数组用来存取item中的数据
 */
var mUrl = ['https://img2.baidu.com/it/u=3354585195,1512541150&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1681059600&t=8cf0bdc6481c6b4146124578763d3305','https://img2.baidu.com/it/u=1168822966,1926106915&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1681059600&t=3f7f2c944bb70efd3dc4cfc55c6b60f4','https://img2.baidu.com/it/u=2380091906,2026108107&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500'];
var mDesc = ['描述1','描述2','描述2'];
var mWho = ['作者1','作者2','描述2'];
var mTimes = ['2023年12月','2024年12月','2025年12月'];
var mTitles = ['宅男福利1','福利姬2'];

var mCurrentPage = 0;

// 引入utils包下的js文件
var Constant = require('../../utils/constant.js');

/**
 * 请求数据
 * @param that Page的对象，用来setData更新数据
 * @param targetPage 请求的目标页码
 */
function requestData( that, targetPage ) {
  wx.request( {
    url: Constant.GET_MEIZHI_URL+targetPage,
    header: {
      "Content-Type": "application/json"
    },
    success: function( res ) {
      if( res == null ||
        res.data == null ||
        res.data.results == null ||
        res.data.results.length <= 0 ) {

        console.error( "god bless you..." );
        return;
      }

      var i = 0;
      for( ;i < res.data.results.length;i++ )
        bindData( res.data.results[ i ] );

      //将获得的各种数据写入itemList，用于setData
      var itemList = [];
      for( var i = 0;i < mUrl.length;i++ )
        itemList.push( { url: mUrl[ i ], desc: mDesc[ i ], who: mWho[ i ], time: mTimes[ i ], title: mTitles[ i ] });

      that.setData( {
        items: itemList,
        hidden: true,
        loadmorehidden:false,
      });

      mCurrentPage = targetPage;
    },
  });
}

/**
 * 绑定接口中返回的数据
 * @param itemData Gank.io返回的content;
 */
function bindData( itemData ) {

  var url = itemData.url;
  var desc = itemData.desc;
  var who = itemData.who;
  var times = itemData.publishedAt;

  mUrl.push( url );
  mDesc.push( desc );
  mWho.push( who );
  mTimes.push( times );
  mTitles.push( "publish by：" + "@" + who + " —— " + times );
}

到了这里，关于小程序源码图片列表，图片下载的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！