<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. linux安装imagemagick,centos安装imagemagick方法

    1.安装文件格式支持库 yum install tcl-devel libpng-devel libjpeg-devel ghostscript-devel bzip2-devel freetype- ...

  2. Action请求后台出现Response already commited异常解决方法

    在编写导出功能使用action请求,在处理导出异常时期望跳转异常页,Controller中的方法返回类型String的url 在处理完逻辑导出文件后后台控制台出现 WARN  [org.springf ...

  3. MutationObserver

    一.MutationObserver Config childList: 添加.删除目标节点的子节点时会收到通知(子节点的后代节点添加或删除时不会收到通知) attribute: 修改目标节点属性时会 ...

  4. STM8 LED

    时钟分频寄存器(CLK_CKDIVR) 举例 int main() { CLK_HSIPrescalerConfig(CLK_PRESCALER_HSIDIV1); //高速内部时钟1分频 GPIO_ ...

  5. linux reboot ,shutdown,halt区别

    reboot ,shutdown,halt区别 重启   reboot  和 shutdown -r now  效果是一样的都是重启 区别在于reboot 是重启时,删除所有的进程,为不是平稳的终止他 ...

  6. java - day011 - 集合, ArrayList HashMap,HashSet, Iterator 接口, for-each 循环格式

    集合 ArrayList 丑数: 能被3,5,7整除多次, ArrayList     list 接口             | - ArrayList             | - Linked ...

  7. Nginx+PHP负载均衡集群环境中Session共享方案 - 运维笔记

    在网站使用nginx+php做负载均衡情况下,同一个IP访问同一个页面会被分配到不同的服务器上,如果session不同步的话,就会出现很多问题,比如说最常见的登录状态. 下面罗列几种nginx负载均衡 ...

  8. Visual Studio C# 利用git和github协同开发时产生冲突的解决办

    Visual Studio C# 利用git和Github协同开发时产生冲突的解决办法 前言:在前两天的助教作业中,发现了自己没有办法解决在用vs开发C#的窗体项目的过程中产生的冲突问题,在查阅了资料 ...

  9. java中的volatile变量

    同步与线程间通信: 通信 通信是指消息在两条线程之间传递. 既然要传递消息,那接收线程 和 发送线程之间必须要有个先后关系,此时就需要用到同步.通信和同步是相辅相成的. 同步 同步是指,控制多条线程之 ...

  10. finalize关键字小结

    1.先看一下Object类中的finalize方法:可见里面什么也没有,说明让我们自己重写 * @throws Throwable the {@code Exception} raised by th ...