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

主要是记录下遇到的几个问题。。。。小程序的上拉加载更多和轮播图的实现完整项目地址 https://gitee.com/gdhsxuan/personal_tk/【微信小程序】图库——(后台接口篇)小程序二维码：完成效果 1、上拉加载更多首先要在.json文件中将enablePullDownRefresh声明为true，然后js文件中有个on...

文章共1,423字 · 阅读需要大约5分钟

一键AI生成摘要，助你高效阅读

问答

灬彬

17278人浏览 · 2018-09-09 14:58:28

灬彬 · 2018-09-09 14:58:28 发布

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

完整项目地址

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文件


<view class="page">
<view style='font-size:26px;margin-left:15px'>cos</view>
 <view class="weui-flex" wx:for="{{result}}" wx:for-item="item">

    <view class="weui-flex__item" wx:for="{{item}}" wx:for-item="src" >
    <navigator url="../detail/detail?link={{src[1]}}&text={{src[2]}}">
        
     
        <image wx:if="{{src[0]}}" style="width:99%;" mode="aspectFill" src="{{src[0]}}">
        </image>
   <view class="weui-media-box__desc" style="margin-bottom:10px;margin-left:10px;margin-right:10px;font-size:32rpx;">{{src[2]}}</view>
      </navigator>
    </view>
            </view>  
<view class="weui-loadmore" hidden="{{isHideLoadMore}}">
    <view class="weui-loading"></view>
    <view class="weui-loadmore__tips">正在加载</view>
  </view>
  
                </view>

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 class="swiper" indicator-dots="true" autoplay="true" interval="2500" duration="1000">  
      <block wx:for="{{movies}}" wx:for-index="index">  
        <swiper-item>  
          <image src="{{item.url}}" class="slide-image" mode="aspectFill"/>  
        </swiper-item>  
      </block>  
    </swiper>

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}