<view class="tabNav">
<view wx:for="{{navTab}}" wx:key="index" data-idx="{{index}}" bindtap="currentTab" class="{{currentTab==index ? 'cur' : ''}}"><text>{{item}}</text></view>
</view>
<view class="orderInfo">
<view class="orderInfo-item" wx:for="{{sendList}}" wx:key="index"> 这是内容{{item.content}} </view>
</view>
.tabNav{z-index: 4; position: fixed; top:0;left:0; width:100%; height:80rpx; line-height: 80rpx; background: #fff; display: flex; padding:0 30rpx; border-bottom:1px solid #f5f5f5; box-sizing: border-box; }
.tabNav> view{text-align: center; margin-right:50rpx;}
.tabNav> view:last-child{ margin-right: 0;}
.tabNav> view text{padding:0 15rpx; height:75rpx; display:inline-block;}
.tabNav .cur text{ border-bottom:5rpx solid #36ccf9; color:#000;}
data: {
entities: [],
totalPages: 0,
currentPage: 1,
isLoading: true,
},
entities 是要表示的内容列表项目,totalPages 表示一共有多少页,currentPage 表示当前加入的页码是哪个。isLoading 表示加载的状态。
import cfg from '../../utils/config.js';
import util from '../../utils/util.js';
var app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
navTab: ['全部订单','待付款','待发货', '待收货'],
currentTab: 0,
sendList:[],
},
select: {
page: 1,
size: 6,
isEnd: false
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getData()
}, /**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () { }, /**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () { }, /**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
this.getData()
}, /**
* 用户点击右上角分享
*/
onShareAppMessage: function () { },
currentTab: function (e) {
if (this.data.currentTab == e.currentTarget.dataset.idx){
return;
}
this.setData({
currentTab: e.currentTarget.dataset.idx
})
this.select={
page: 1,
size: 6,
isEnd: false
}
this.data.sendList=[];
this.getData()
},
getData:function(){
var _this=this;
if (this.select.isEnd){
return
}
var type = this.data.currentTab == 0 ? 'ALL' : this.data.currentTab == 1 ? 'WAIT_DELIVER' : 'DELIVER';
util.request(`你的接口地址,后面的是参数` + type + `/` + this.select.page + `/` + this.select.size, {}, 'GET', function (res) {
var content = res.data.data;
_this.setData({
sendList: (_this.data.sendList).concat(content)
})
if (content.length>0){
_this.select.page++
}else{
_this.select.isEnd=true
}
})
},
})

请点赞!因为你的鼓励是我写作的最大动力!

吹逼交流群:711613774

微信小程序分页显示的更多相关文章

  1. 微信小程序实现显示和隐藏控件-头像-取值-bindblur事件

    微信小程序实现显示和隐藏控件 .wxml: <view class=" {{showOrHidden?'show':'hidden'}}"></view> ...

  2. 微信小程序中显示html富文本的方法

    微信小程序中显示html富文本的方法 使用方法:git地址:https://github.com/icindy/wxParse 一.下载wxParse文件 二.在要引入的页面的js文件中,引入文件 j ...

  3. 微信小程序tabBar显示问题

    在微信小程序的开发中,我遇到疑惑如下: 在app.json中定义了多个pages,一般微信小程序启动的时候,自动加载pages下的第一个页面, "pages": [        ...

  4. 微信小程序对接显示阿里云数据库数据

    现实需求 在项目中需求,有时候现场设备发生故障,需要远程的人员知道.除了邮件方式,以微信小程序的方式也很好.今天进行尝试,并制作了一个demo版本. 1.微信小程序申请制作前端 1.1lists文件( ...

  5. 微信小程序 键盘显示短信验证码

    1.场景描述: IOS系统 一些APP或者微信小程序在收到短信验证码的时候会在键盘上自动保存验证码信息,当用户点击的时候,会自动赋值到当前所点击的输入框中 2.案例: 2.实现: TIPS:这个功能是 ...

  6. 微信小程序中显示与隐藏(hidden)

    1.wx.wxml页面部分 <view bindtap='click'>点击</view> //这是显示隐藏的部分 <view hidden="{{hidden ...

  7. 微信小程序分页加载列表

    1.假设加载的数据为 2.wxml <view class="page"> <view class="page__bd"> <vi ...

  8. 微信小程序 swiper 显示图片计数 当前/总数

    <view class="swiperContainer"> <swiper bindchange="swiperChange" autopl ...

  9. 微信小程序 - 滑动显示地点信息(map)

    演示效果如下: 资源如下 marker,png index.wxml <view class="map-container"> <map id="map ...

随机推荐

  1. vue实现简单的点击切换颜色

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. Synergy 一套键鼠同时控制多台电脑

    百度云(1.5是最后一个免费的版本,linux,mac,windows全有): 链接: https://pan.baidu.com/s/1A_qR8FHd8a0ILQXsSqjfCQ 密码: 9h8c

  3. 节日营销!这样搞-App运营日常

    节日送礼需求日益增长,当儿女们有了购买需求的时候,商家如何突出重围,成为孝子们的首选?如何做好节日营销?几个经验分享一下: 1.抓住节日特色 结合节日风格特色,营造节日气氛,如母亲节这种节日,主要体现 ...

  4. 【转载】Request对象的作用以及常见属性

    Request对象是Asp.Net应用程序中非常重要的一个内置对象,其作用主要用于服务器端获取客户端提交过来的相应信息,比较常用的有使用Requset对象获取用户提交的html表单信息,Request ...

  5. html5细线表格制作

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. iOS开发 CGAffineTransform 让图片旋转, 旋转后获得图片旋转的角度

    1.让图片旋转 UIImageView *imageView = [[UIImageView alloc]init]; imageView.frame = CGRectMake(50, 50, 200 ...

  7. 30分钟用Restful ABAP Programming模型开发一个支持增删改查的Fiori应用

    2016年时,Jerry曾经写过一系列关于SAP Fiori Smart Template(现在更名为Fiori Elements了)的博客,介绍了所谓的MDD开发方法论 - Metadata Dri ...

  8. java包装类的自动装箱及缓存

    首先看下面一段代码 public static void main(String[] args) { Integer a=1; Integer b=2; Integer c=3; Integer d= ...

  9. Vue-filter指令全局过滤和稀有过滤

    简单介绍一下过滤器,顾名思义,过滤就是一个数据经过了这个过滤之后出来另一样东西,可以是从中取得你想要的,或者给那个数据添加点什么装饰,那么过滤器则是过滤的工具.例如,从['abc','abd','ad ...

  10. Centos 6.5 Apache服务安装

     Apache是什么: Apache HTTP Server(简称Apache)是Apache软件基金会的一个高性能.功能强大.稳定可靠.又很灵活的开发源代码的web服务软件,对linux的支持相对好 ...