微信小程序分页显示
<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

微信小程序分页显示的更多相关文章
- 微信小程序实现显示和隐藏控件-头像-取值-bindblur事件
微信小程序实现显示和隐藏控件 .wxml: <view class=" {{showOrHidden?'show':'hidden'}}"></view> ...
- 微信小程序中显示html富文本的方法
微信小程序中显示html富文本的方法 使用方法:git地址:https://github.com/icindy/wxParse 一.下载wxParse文件 二.在要引入的页面的js文件中,引入文件 j ...
- 微信小程序tabBar显示问题
在微信小程序的开发中,我遇到疑惑如下: 在app.json中定义了多个pages,一般微信小程序启动的时候,自动加载pages下的第一个页面, "pages": [ ...
- 微信小程序对接显示阿里云数据库数据
现实需求 在项目中需求,有时候现场设备发生故障,需要远程的人员知道.除了邮件方式,以微信小程序的方式也很好.今天进行尝试,并制作了一个demo版本. 1.微信小程序申请制作前端 1.1lists文件( ...
- 微信小程序 键盘显示短信验证码
1.场景描述: IOS系统 一些APP或者微信小程序在收到短信验证码的时候会在键盘上自动保存验证码信息,当用户点击的时候,会自动赋值到当前所点击的输入框中 2.案例: 2.实现: TIPS:这个功能是 ...
- 微信小程序中显示与隐藏(hidden)
1.wx.wxml页面部分 <view bindtap='click'>点击</view> //这是显示隐藏的部分 <view hidden="{{hidden ...
- 微信小程序分页加载列表
1.假设加载的数据为 2.wxml <view class="page"> <view class="page__bd"> <vi ...
- 微信小程序 swiper 显示图片计数 当前/总数
<view class="swiperContainer"> <swiper bindchange="swiperChange" autopl ...
- 微信小程序 - 滑动显示地点信息(map)
演示效果如下: 资源如下 marker,png index.wxml <view class="map-container"> <map id="map ...
随机推荐
- Linux磁盘管理系列 — LVM和RAID
一.逻辑卷管理器(LVM) 1.什么是逻辑卷管理器(LVM) LVM是逻辑盘卷管理(Logical Volume Manager)的简称,它是Linux环境下对卷进行操作的抽象层. LVM是建立在硬盘 ...
- 什么是RAID(磁盘阵列)
RAID全称Redundant Array of Independent Disk,即独立冗余磁盘阵列.RAID技术由加州大学伯克利分校1987年提出,最初是为了组合小的廉价磁盘来代替大的昂贵磁盘,同 ...
- 解决阿里云OSS The requested bucket name is not available的办法
今天在创建Bucket的时候遇到了这个问题 The requested bucket name is not available. The bucket namespace is shared by ...
- jquery中checkbox的全选与反选
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title> ...
- C# List 转 Tree 公共方法
# 用C# 写了个List数据结构转树形数据结构的公共扩展方法 /// <summary> /// 将列表转换为树形结构 /// </summary> /// <type ...
- Go net/http,web server
net/http 包实现 HTTP Server Go 中,实现一个最简单的 http server 非常容易,代码如下: package main import ( "fmt" ...
- putty使用方法
putty是一种体体积小,无需安装的一款免费安全使用方便的绿色软件,它主要用于远程控制linux系统,只要获取了远程的linux的地址,便可以远程控制linux系统以方便管理,越来越受到各方面的欢迎. ...
- 多线程之NSOperation简介
在iOS开发中,为了提升用户体验,我们通常会将操作耗时的操作放在主线程之外的线程进行处理.对于正常的简单操作,我们更多的是选择代码更少的GCD,让我们专注于自己的业务逻辑开发.NSOperation在 ...
- C#基础 - 定义变量,输入输出
本节课主要讲解C#的发展历史及部分C#语言基础, 主要内容有:控制台程序的创建,输出,输入,定义变量,变量赋值,值覆盖,值拼接,值 打印,两种数据类型,整形类型转换 本节重点难点:定义变量 ...
- Android笔记(二十二) Android中的GridView
GridView和ListView一样,是Android中比较常见的布局控件,譬如我们的手机桌面其实就是一个GridView. 效果: 实现过程和ListView类似,也是通过Adapter将数据源展 ...