【微信小程序】图库——(小程序篇)

主要是记录下遇到的几个问题。。。。小程序的上拉加载更多和轮播图的实现

完整项目地址 

https://gitee.com/gdhsxuan/personal_tk/

【微信小程序】图库——(后台接口篇)

小程序二维码：

完成效果

  

 

 

1、上拉加载更多

首先要在.json文件中将enablePullDownRefresh声明为true，然后js文件中有个onReachBottom函数，逻辑就写在这个函数里

js中的代码

// pages/cos/cos.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    page: 1,


  },



  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;



    wx.request({
      url: '接口地址',
      data: {
        page: that.data.page
      },
      header: {
        'content-type': 'application/json'

      },

      method: 'GET',
      success: function (res) {
        console.log(res.data);
        that.setData({
          "result": res.data.res,

        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    var that = this;
    // 显示加载图标
    wx.showLoading({
      title: '玩命加载中',
    })
    // 页数+1
    var pages = that.data.page + 1;
    console.log(pages)
    wx.request({
      url: '接口地址',
      data: {
        "page": pages
      },
      method: "GET",
      // 请求头部
      header: {
        'content-type': 'application/text'
      },
      success: function (res) {


        //console.log(res.data.res.length);
        var result = that.data.result;

        for (var i = 0; i < res.data.res.length; i++) {
          result.push(res.data.res[i]);
        }
        console.log(result);
        // 设置数据
        that.setData({
          result: result,
          page: pages
        })
        // 隐藏加载框
        wx.hideLoading();
      }
    })



  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },

})

展示页面使用了weui框架，采用flex布局

wxml文件

cos
 

    
    
        
     
        
        
   {{src[2]}}
      
    
              

  
                

2、首页的轮播图

轮播图中的图片地址也可以使用wx.request请求后台获取。。当然也可以写死

index.js

// pages/index/index.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    page:1,
    movies: [
      { url: 'http://wx1.sinaimg.cn/large/d030806aly1fuss9hwyo4j21jk2b97nz.jpg' },
      { url: 'http://wx1.sinaimg.cn/large/d030806aly1fug91w3gtwj21jk2bc7wh.jpg' },
      { url: 'http://wx1.sinaimg.cn/large/d030806aly1fu3c28qyrcj21jk0v9dpj.jpg' },
      { url: 'http://wx4.sinaimg.cn/large/d030806aly1fjnhxvv4zvj21kw11xqbg.jpg' },
      { url: 'http://wx4.sinaimg.cn/large/d030806aly1fr3xjblscjj21jk15ogxz.jpg' },
      { url: 'http://wx4.sinaimg.cn/large/d030806aly1filhxnk9njj211x1kwq9b.jpg' }

    ]  
    
  },
    
  
  
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
   

  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  },
  
})

wxml文件代码

swiper的组件参数

属性名	类型	默认值	说明
indicator-dots	Boolean	false	是否显示面板指示点
indicator-color	Color	rgba(0, 0, 0, .3)	指示点颜色
indicator-active-color	Color	000000	当前选中的指示点颜色
autoplay	Boolean	false	是否自动切换
current	Number	0	当前所在页面的 index
interval	Number	5000	自动切换时间间隔
duration	Number	500	滑动动画时长
circular	Boolean	false	是否采用衔接滑动
bindchange	EventHandle		current 改变时会触发 change 事件，event.detail = {current: current}