?每日分享兩個小程序源碼

下載地址：無極低碼：wheart.cnhttps://wheart.cn/so/home?m=dw&rid=f6d836c8-d54a-11ed-96fa-52540016e6ac

?

?

?文章來源地址http://www.zghlxwxcb.cn/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,
      });
  }
})

/**
 * 定義幾個數(shù)組用來存取item中的數(shù)據(jù)
 */
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');

/**
 * 請求數(shù)據(jù)
 * @param that Page的對象，用來setData更新數(shù)據(jù)
 * @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 ] );

      //將獲得的各種數(shù)據(jù)寫入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;
    },
  });
}

/**
 * 綁定接口中返回的數(shù)據(jù)
 * @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 );
}

到了這里，關于小程序源碼圖片列表，圖片下載的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！