专栏首页家劲小程序 下拉刷新 上拉加载

小程序 下拉刷新 上拉加载

微信小程序

下拉刷新 上拉加载,简单方便,易于上手。 1.首先上list.wxml代码

<!--pages/list/list.wxml-->
<view class="list-container">
  <view class="header">

  </view>
  <view class="doc-item"  wx:for="{{dataSource}}" wx:for-item="item" wx:key="{{item.id}}"  bindtap='bindViewTap' data-url="{{item.url}}" data-name="{{item.name}}">
    <text >{{item.title}}</text>
    <view class='item-info'>
      <text>{{item.author}}</text>
      <text style='float: right'>{{item.time}}</text>
    </view>
  </view>
  <view class="footer" wx:if="{{!hasMoreData}}">
    没有更多了
  </view>
  <view class="footer" wx:if="{{hasMoreData}}">
    加载中...
  </view>
</view>

2.再上js代码

// pages/list/list.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    id: "",
    dataSource: [],
    hasMoreData: true,
    pageIndex: 1,
    pageSize: 15,
    isLoading: false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      id: options.id//从url上获取id
    })
    wx.setNavigationBarTitle({title: options.nav})
    this.getList(1)
  },
  getList: function(index){
    wx.request({
      url: 'your server url',
      data: {
        method: 'your method',
        pageSize: this.data.pageSize,
        pageIndex: index,
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: (res) => {
        if(this.data.pageIndex == 1){
          wx.stopPullDownRefresh({
            complete: this.updateDom(res)
          })
        }else{
          this.updateDom(res)
        }

      }
    })
  },
  updateDom: function(res){
    this.setData({ dataSource: this.data.dataSource.concat(res.data.Data.List), isLoading: false })
    if (this.data.pageSize > res.data.Data.Length) {
      this.setData({ hasMoreData: false })
    }
  },

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

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

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

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

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    if(!this.data.isLoading){
      this.setData({ hasMoreData: true, pageIndex: 1, dataSource: [], isLoading: true})
      this.getList(1)
    }

  },
  //事件处理函数
  bindViewTap: function (e) {
    //To do somethiing
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    if(this.data.hasMoreData && !this.data.isLoading){
      this.setData({ pageIndex: this.data.pageIndex + 1, isLoading: true})
      this.getList(this.data.pageIndex)
    }

  },

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


  }
})

3.简单的list.wxss

/* pages/list/list.wxss */
page{
  background-color: #E6E6E6;
}
.header{
  text-align: center;
  font-size: 14px;
  color: #aaa;
}
.footer{
  text-align: center;
  padding-top: 36rpx;
  padding-bottom: 48rpx;
  font-size: 14px;
  color: #aaa;
}
.doc-item{
  padding: 24rpx 36rpx;
  margin: 12rpx 0;
  display: flex;
  background: white;
  flex-direction: column;
  border-bottom: 1px solid #e3e3e3;
}
.item-info{
  padding-top: 24rpx;
  font-size: 14px;
  color: #aaa;
}

4.list.json配置文件

{
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "dark"
}

至此,一个简单的下拉刷新上拉加载基本搞定了。巧用微信的各种Api,就很舒服。 继续扩展的话: 1.updateDom那里下拉刷新是简单的清空重新加载,其实可以进行数组比较插入最新记录; 2.出错提示没加; 3.可以使用腾讯开源框架Wepy这种现代化的类Vue框架进行组件化开发。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 关于Relay的麻烦之处

    直接在render里进行setState会导致组件无限循环渲染,当然把queryrender取缔掉用fetch替换可以解决,但是怎么在使用relay的同时直接s...

    从今若
  • win10 数字许可证激活被 KMS激活覆盖

    从今若
  • 服务端JSON内容中有富文本时

    如果使用的Newtonsoft等第三方库,请无视此问题,第三方库已经帮你处理好了,不会存在此问题。 由于数据中存在复杂的富文本,包含各种引号和特殊字符,导致后...

    从今若
  • 如何使用Docker数据卷?

    如果你有一些需要持续更新的数据并且希望持久化数据,或者需要在不同的容器之间共享数据,再者需要主机与容器之间共享数据,那么你可以使用数据卷来满足这些需求。

    用户1560186
  • APICloud 多端开发教程 |《企业展示》源码深度解析

    此项目为企业展示类应用,主要功能包括企业信息展示、案例展示、加盟申请等。项目源码在 https://github.com/apicloudcom/company...

    APICloud
  • 小程序实践(三):九宫格实现及item跳转

    听着music睡
  • zepto 基础知识(6)

    101.$.ajax   $.ajax(options) 类型:XMLttpRequest   执行Ajax请求。他可能是本地资源,或者通过支持...

    用户1197315
  • 数据孤岛的背后:数据所有权之争

    现代企业越来越依赖数据来进行日常运作。在一些行业,数据基本上就是产品或企业业务本身,无论是数字内容,比如电影和音乐;社交媒体互动;或客户调查和评论。

    人称T客
  • SAS︱数据索引、数据集常用操作(set、where、merge、append)

    数据索引的创建有三种方式:data步骤、sql步骤、datasets步骤。 其中还是有点困惑在data与datasets的区别之上,datasets是对逻辑库中...

    素质
  • 这里告诉你如何用Python下载各大平台上的音乐

    今天给大家推荐一个 GitHub 上的 Python 项目,可以从各大音乐平台上下载音乐歌曲到本地,支持的平台有网易云音乐、QQ音乐、酷狗音乐、百度音乐、虾米音...

    sergiojune

扫码关注云+社区

领取腾讯云代金券