小程序源码图片列表，图片下载

怼烎@ 2024-03-24 16:52 6阅读 0赞

每日分享两个[小程序源码][Link 1]

**下载地址：[无极低码：wheart.cn![icon-default.png?t=N2N8][icon-default.png_t_N2N8]https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/befa4815f5b14689b69b5f3d0b76cea7.png][wheart.cn_icon-default.png_t_N2N8_icon-default.png_t_N2N8_https_wheart.cn_so_home_m_dw_rid_f6d836c8-d54a-11ed-96fa-52540016e6ac]**

![812a701c1ebe40b0895b39b27d946fb0.png][]

![0e0df28befa449b0b45bfde62807d1d8.png][]

![8653e1474aa14f71babccde5e4b940fc.gif][]

<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 );
    }

[Link 1]: https://so.csdn.net/so/search?q=%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%BA%90%E7%A0%81&spm=1001.2101.3001.7020
[icon-default.png_t_N2N8]: https://csdnimg.cn/release/blog_editor_html/release2.2.4/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=N2N8
[wheart.cn_icon-default.png_t_N2N8_icon-default.png_t_N2N8_https_wheart.cn_so_home_m_dw_rid_f6d836c8-d54a-11ed-96fa-52540016e6ac]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/befa4815f5b14689b69b5f3d0b76cea7.png
[812a701c1ebe40b0895b39b27d946fb0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/fab510051fb14da39d8b6b73ce42825d.png
[0e0df28befa449b0b45bfde62807d1d8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/9bcaf6e95aad4f00b7fc40e529393507.png
[8653e1474aa14f71babccde5e4b940fc.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/40593227f23a45c8ad99d3a5eb49812b.png