微信小程序分页显示
<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 ...
随机推荐
- 使用UltraISO制作Centos7 U盘启动盘遇到的坑
下载.安装UltraISO软件 安装好以后,打开软件 击菜单栏的"文件"选项,再点击"打开"按钮,选择要刻录的系统镜像 点击菜单栏的"启动" ...
- netcat瑞士军刀实现电脑远程控制termux
关于nc实现远程控制termux 1.首先termux安装namp pkg install namp 2.windows系统安装netcat 此为netcat下载连接 下载得到zip压缩包,解压得到里 ...
- Java 之 OutputStreamReader类
OutputStreamReader类 1.概述 转换流 java.io.OutputStreamReader ,是Writer的子类,是从字符流到字节流的桥梁. 它使用指定的字符集将字符编码为字节. ...
- Linux文件(夹)属性
ll 或者 ls -lh 查看文件属性:
- sql 四舍五入 保留两位小数
一.问题描述 数据库里的 float momey 类型,都会精确到多位小数.但有时候 我们不需要那么精确,例如,只精确到两位有效数字. 二.sqlserver解决方案: 1. 使用 Round() 函 ...
- 七年总结常用 Git 命令清单
我每天使用 Git ,但是很多命令记不住. 一般来说,日常使用只要记住下图6个命令,就可以了.但是熟练使用,恐怕要记住60-100个命令. 下面是我整理的常用 Git 命令清单.几个专用名词的译名如下 ...
- Spark学习笔记3——RDD(下)
目录 Spark学习笔记3--RDD(下) 向Spark传递函数 通过匿名内部类 通过具名类传递 通过带参数的 Java 函数类传递 通过 lambda 表达式传递(仅限于 Java 8 及以上) 常 ...
- 安装xshell、xftp
1.Xshell的软件的下载.安装 xshell是一个终端模拟软件,而且是远程近程都可以. 就是模拟服务器所在的linux,在xshell中可以输入命令, 就像在服务器的linux中输入命令一样.一般 ...
- C#-NPOI操作EXCEL
1.获取NUGET NPOI包. 2.引用命名空间 using NPOI.SS.UserModel;using NPOI.XSSF.UserModel;using NPOI.HSSF.UserMode ...
- Google hacking 语法
a b c 自动对词进行拆分匹配 拆分标准 空格 "a b c " 把a b c 当成一个整体去查 " a*b" *通配符 里面是一个或者多个 以a开头 b结尾 ...