微信小程序实现表格前后台分页
微信小程序前台分页（样式可以根据自己实际需要调整），供大家参考，具体内容如下
直接上代码，这个其实也可以调整为后台分页,但是后面会写一个后台分页的例子，根据实际需要选择吧
数据是写在data中没有调用url获取，实际可以修改
1、index.js
// pages/tablePage/index.js
Page({
/**
* 页面的初始数据
*/
data: {
frontPage: false,//上一页 存在true，不存在false
nextPage: false,//下一页 存在true，不存在false
pages: 0,//所有页
thisPages: 0,//当前页
rows: 6,//每页条数
total: 0,//总条数
pageData: [],//本页显示的列表数据
prizeListItem:[
{name: "测试1", gift:"12"},
{name: "测试2", gift:"34"},
{name: "测试3", gift:"43"},
{name: "测试4", gift:"21"},
{name: "测试5", gift:"32"},
{name: "测试6", gift:"32"},
{name: "测试7", gift:"12"},
{name: "测试8", gift:"32"},
{name: "测试9", gift:"32"},
{name: "测试10", gift:"44"},
{name: "测试11", gift:"231"},
{name: "测试12", gift:"233"},
{name: "测试13", gift:"233"}
],
myPrize: false,
tab1: '',
tab2: 'selected',
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function () {
this.setList();
},
// 初始化列表分页
setList() {
let that = this;
let thisPages = that.data.thisPages;
let rows = that.data.rows;
let prizeListItem = that.data.prizeListItem;
let pageData = that.data.pageData;
let pages = that.data.pages;
if (pageData !== []){
pageData = prizeListItem.filter(function (item, index, prizeListItem) {
//元素值，元素的索引，原数组。
return index >= rows*thisPages && index <= rows*(thisPages+1)-1; //初始为0，0 < index < 6-1
});
let x = 0;
let y = prizeListItem.length;
if ( y%rows !== 0){
x = 1
};
pages = parseInt(y/rows) + x; //所有页
thisPages = thisPages +1; //当前页
if ( pages > 1){
that.setData({
nextPage: true,
})
}
that.setData({
thisPages: thisPages,
pageData: pageData,
pages: pages,
rows: rows,
})
}
},
//点击下一页
clickNext() {
let that = this;
let thisPages = that.data.thisPages;
let prizeListItem = that.data.prizeListItem;
let pageData = that.data.pageData;
let pages = that.data.pages;
let rows = that.data.rows;
pageData = prizeListItem.filter(function (item, index, prizeListItem) {
//元素值，元素的索引，原数组。
return index >= rows*thisPages && index <= rows*(thisPages+1)-1;
});
thisPages = thisPages + 1;
if ( pages === thisPages){
that.setData({
nextPage: false,
})
}
that.setData({
thisPages: thisPages,
pageData: pageData,
frontPage: true,
})
},
//点击上一页
clickFront() {
let that = this;
let thisPages = that.data.thisPages;
let prizeListItem = that.data.prizeListItem;
let pageData = that.data.pageData;
let rows = that.data.rows;
pageData = prizeListItem.filter(function (item, index, prizeListItem) {
//元素值，元素的索引，原数组。
return index >= rows*(thisPages-2) && index <= rows*(thisPages-1)-1;
});
thisPages = thisPages - 1;
if ( thisPages === 1){
that.setData({
frontPage: false,
})
}
that.setData({
thisPages: thisPages,
pageData: pageData,
nextPage: true,
})
},
})
2、index.wxml
<view class="prizelist">
<view class="info_con">
<view class="list" wx:for="{{pageData}}">
<view class="list_head">
<view class="list_name">{{item.name}}</view>
</view>
<view class="list_prize">{{item.gift}}</view>
</view>
</view>
<view class="paging">
<view class="page_btn">
<view class="up_page" wx:if="{{frontPage}}" bindtap="clickFront">上一页</view>
</view>
<view class="page_num">第{{thisPages}}页 共{{pages}}页</view>
<view class="page_btn">
<view class="down_page" wx:if="{{nextPage}}" bindtap="clickNext">下一页</view>
</view>
</view>
</view>
3、index.wxss
.prizelist{
width: 100%;
height: max-content;
}
.info_con{
width: 100%;
height: 787rpx;
}
.info_con .list{
height: 108rpx;
width: 96%;
margin-top: 20rpx;
padding-left: 2%;
border-radius: 10rpx;
box-shadow: 3px 3px 6px #9c9191;
}
.list .wi_prize{
width: 186rpx;
height: 69rpx;
margin: 20rpx 0 0 60rpx;
}
.list .prizeinfo{
width: 350rpx;
height: 108rpx;
float: right;
}
.list .prizeinfo .prize_name{
font-size: 28rpx;
color: #87562e;
line-height: 42rpx;
margin-top: 20rpx;
}
.list .prizeinfo .prize_state{
font-size: 20rpx;
color: #ff2d2d;
line-height: 25rpx;
}
.list .list_bg{
width: 639rpx;
height: 108rpx;
position: absolute;
left: 56rpx;
z-index: -1;
}
.list .list_head{
height: 100%;
width: max-content;
margin-left: 100rpx;
float: left;
}
.list .list_head .list_headpic{
border-radius: 50%;
background-color: rgb(43, 93, 216);
width: 46rpx;
height: 46rpx;
margin: 31rpx 0rpx;
float: left;
}
.list .list_head .list_name{
color: #000;
line-height: 108rpx;
font-size: 28rpx;
float: left;
margin-left: 31rpx;
}
.list .list_prize{
height: 100%;
line-height: 108rpx;
font-size: 28rpx;
color: #87562e;
float: right;
margin-right: 100rpx;
}
.paging .page_btn{
width: 96rpx;
height: 32rpx;
font-size: 32rpx;
font-family: "PingFangSC";
color: #c79b4a;
line-height: 36rpx;
float: left;
margin: auto 23rpx;
}
.page_num{
font-size: 24rpx;
font-family: "PingFangSC";
color: #c79b4a;
line-height: 36rpx;
float: left;
margin: auto 10%;
}
.paging{
width: 100%;
height: 108rpx;
font-size: 32rpx;
font-family: "PingFangSC";
color: #c79b4a;
line-height: 36rpx;
text-align: center;
}
.paging .up_page{
width: 96rpx;
height: 32rpx;
float: left;
margin-left: 72rpx;
}
.paging .down_page{
width: 96rpx;
height: 32rpx;
float: right;
margin-right: 72rpx;
}
.con .prizelist .page_num{
width: 500rpx;
font-size: 24rpx;
font-family: "PingFangSC";
color: #c79b4a;
line-height: 36rpx;
margin: auto;
}
微信小程序后台分页示例
1、index.js
// pages/tableAfterPage/index.js
Page({
data: {
allpage:16,//总页数
nowpage:1,//当前页数
page1:1,//第一页
page2:2,//第二页
page3:3,//
page4:4,
step:1,//步长
},
/**主要函数*/
//初始化渲染数据
onLoad: function (options) {
var that = this
wx.request({
url: 'http://localhost:8080/text/auth/queryTable',
data: {
},
success: function (res) {
if (res.data.data.length != 0) {
that.setData({
allworkflow: res.data.data,//初始数据列表
allpage:res.data.count//数据总页数
})
} else {
wx.showToast({
title: '暂无待处理工作流！',
icon: 'none',
duration: 20000
})
}
}
})
},
getPageDate:function(nowpage){
var that = this
wx.request({
url: 'http://localhost:8080/text/auth/queryTableNew',
data: {
page: nowpage//当前页数的参
},
success: function (res) {
if (res.data.data.length != 0) {
that.setData({
allworkflow: res.data.data,
})
} else {
wx.showToast({
title: '没有数据的提示！',
icon: 'none',
duration: 20000
})
}
}
})
},
/**
* 上一页
*/
pu:function(){
var now = this.data.page1 - this.data.step;
if(now>0){
this.setData({
page1: this.data.page1 - this.data.step,
page2: this.data.page2 - this.data.step,
page3: this.data.page3 - this.data.step,
page4: this.data.page4 - this.data.step,
nowpage:this.data.nowpage-1
});
this.getPageDate(this.data.nowpage);
}else{
wx.showToast({
title: '已为第一页',
icon: 'none',
duration: 1000
})
}
},
/**
* 下一页
*/
pd:function(){
if (this.data.page4 < this.data.allpage) {
this.setData({
page1: this.data.page1 + this.data.step,
page2: this.data.page2 + this.data.step,
page3: this.data.page3 + this.data.step,
page4: this.data.page4 + this.data.step,
nowpage:this.data.nowpage+1
});
this.getPageDate(this.data.nowpage);
} else {
wx.showToast({
title: '已为最后一页',
icon: 'none',
duration: 1000
})
}
},
/**
* 点击后页面渲染，重新查询数据页面重新渲染
*/
dd_status:function(e){
this.setData({
nowpage: e.currentTarget.dataset.id,
});
this.getPageDate(this.data.nowpage);
}
})
2、index.wxml
<!-- 有数据的话循环第一个就欧剋啦 -->
<view wx:for="{{allworkflow}}" wx:key="{{item}}" style='margin-top:20rpx;'>
<view class='outer_container' bindtap='dd_detail' data-id='{{item.id}}'>
<view class='one'>订单类型：{{item.type}}
<view class='right'>></view>
</view>
<view class='two'>
订单日期：{{item.yvtime}}
<view class='right_2'>订单状态：
<text bindtap='dd_status' data-id='{{item.id}}' wx:if="{{item.sta=='待审核' || item.sta=='审核通过'}}" style='color: rgb(79, 193, 229);'>{{item.sta}}</text>
<text bindtap='dd_status' wx:else="{{item.sta=='审核失败'}}" style='color:rgb(255,0,0)'>{{item.sta}}</text>
</view>
</view>
</view>
</view>
<view class="nav" >
<!-- <text wx:if="{{(page1-step)>0}}" bindtap='pu' style='color: rgb(79, 193, 229);'>
上一页
</text> -->
<text bindtap='pu' style='color: rgb(79, 193, 229);'>
上一页
</text>
<text bindtap='dd_status' wx:if="{{page1<=allpage}}" data-id='{{page1}}' style='color: rgb(79, 193, 229);'>
第{{page1}}页
</text>
<text bindtap='dd_status' wx:if="{{page2<=allpage}}" data-id='{{page2}}' style='color: rgb(79, 193, 229);'>
第{{page2}}页
</text>
<text bindtap='dd_status' wx:if="{{page3<=allpage}}" data-id='{{page3}}' style='color: rgb(79, 193, 229);'>
第{{page3}}页
</text>
<text bindtap='dd_status' wx:if="{{page4<=allpage}}" data-id='{{page4}}' style='color: rgb(79, 193, 229);'>
第{{page4}}页
</text>
<!-- <text wx:if="{{page4<allpage}}" bindtap='pd' data-id='{{item.id}}' style='color: rgb(79, 193, 229);'>
下一页
</text> -->
<text bindtap='pd' data-id='{{item.id}}' style='color: rgb(79, 193, 229);'>
下一页
</text>
</view>
<view style="text-align:center">
<text data-id='{{item.id}}' style='color: rgb(79, 193, 229);'>
共{{allpage}}页 当前为第{{nowpage}}页
</text>
</view>
3、index.wxss
/* pages/tableAfterPage/index.wxss */
.nav{
background-color: #fff;
padding: 26rpx 0;
color: #7b7b7b;
}
.nav>text{
width: 16.4%;
text-align: center;
display: inline-block;
}
.outer_container{
width:80%;
margin:0 auto;
height:200rpx;
background-color: white;
padding-left:40rpx;
padding-right: 40rpx;
border-bottom:1rpx solid rgb(214, 214, 214);
color: rgb(79, 193, 229);
font-size: 24rpx;
}
.one{
height:100rpx;
line-height: 100rpx;
border-bottom:1rpx solid rgb(218,218,218);
}
.two{
height:100rpx;
line-height: 100rpx;
color:rgb(102, 102, 102)
}
.right{
float:right;
font-size: 46rpx;
line-height: 50rpx;
color:rgb(218, 218, 218);
}
.right_2{
float:right;
line-height: 100rpx;
color:rgb(102, 102, 102);
}
.divLine{
background: #D4DADD;
width: 100%;
height: 4rpx;
}
.right{
width:25rpx;
height:25rpx;
margin-top:20rpx;
margin-right:20rpx;
position:relative;
}
后台模块springboot，数据是随机写的，实际编写时需要后台调用jdbc获取，根据实际需求修改，这里只提供模板
package com.example.hello.controller;
import com.example.hello.bean.TableBean;
import com.example.hello.bean.TrafficBean;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.*;
/**
* 微信小程序数据传送接口
*/
@RestController
@RequestMapping("/text/auth")
public class WxController {
@RequestMapping("/queryTable")
public Map queryTableInfo(){
String[] types = {"预约存款","预约入户","预约退款"};
String[] status = {"审核失败","审核通过","待审核"};
Map<String, Object> result = new HashMap<>();
List<TableBean> list = new ArrayList<>();
Random random = new Random();
for(int i=0;i<4;i++){
TableBean bean = new TableBean();
bean.setId(""+(i+1));
bean.setType(types[random.nextInt(3)]);
bean.setSta(status[random.nextInt(3)]);
bean.setYvtime("2022-04-24 10:23:23");
list.add(bean);
}
result.put("count", 100/4);
result.put("data", list);
return result;
}
@RequestMapping("/queryTableNew")
public Map queryTableInfoNew(String page){
String[] types = {"预约存款","预约入户","预约退款"};
String[] status = {"审核失败","审核通过","待审核"};
Map<String, Object> result = new HashMap<>();
List<TableBean> list = new ArrayList<>();
Random random = new Random();
for(int i=0;i<4;i++){
TableBean bean = new TableBean();
bean.setId(""+(i+1));
bean.setType(types[random.nextInt(3)]);
bean.setSta(status[random.nextInt(3)]);
bean.setYvtime("2022-04-24 10:23:23");
list.add(bean);
}
result.put("data", list);
return result;
}
}
package com.example.hello.bean;
public class TableBean {
private String id;
public String getType() {
return type;
}
public void setType(String type) {
this.type = type;
}
private String type;
public String getYvtime() {
return yvtime;
}
public void setYvtime(String yvtime) {
this.yvtime = yvtime;
}
public String getSta() {
return sta;
}
public void setSta(String sta) {
this.sta = sta;
}
private String yvtime;
private String sta;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
赞 (0)
相关推荐
-
微信小程序分页加载的实例代码
整理文档,搜刮出一个微信小程序分页加载的代码,稍微整理精简一下做下分享. 分页加载功能大家遇到的应该会经常遇到,应用场景也很多,例如微博,QQ,微信朋友圈以及新闻类应用,都会有分页加载的功能,这不仅节省了我们用户的流量,还提升了用户体验.那么今天的这篇文章就是介绍微信小程序中如何实现分页加载的功能.照例先上源码及效果图. 源码传送门 要实现这样的功能,一般需要在请求数据时加入当前请求页数,以及页的大小(每页显示的数量)也有一部分接口是通过请求的开始偏移量和结束偏移量请求数据,例如你一页显示10条
-
微信小程序云开发实现分页刷新获取数据
本文实例为大家分享了微信小程序云开发分页刷新获取数据的具体代码,供大家参考,具体内容如下 利用云函数调用数据库,在云函数中分页调取数据.再在js中不断将新的数据拼接到旧数据中,在前端显示.初始只显示5条记录,下拉刷新即可获取更多. 首先在JS中,调用云函数,获取到后端的数据: /** * 从数据库获取数据 */ getData(num=5,page=0){ wx.cloud.callFunction({ name:"dairyGetlist", //云函数
-
微信小程序实现分页加载效果
分页加载功能大家遇到的应该会经常遇到,应用场景也很多,例如微博,QQ,微信朋友圈以及新闻类应用,都会有分页加载的功能,这不仅节省了我们用户的流量,还提升了用户体验.那么今天的这篇文章就是介绍微信小程序中如何实现分页加载的功能. 数据来自于后端(lumen带分页) /** * @todo 获取订单列表 * @return mixed */ public function getOrderList(){ $field = ['id','order_no','name','created_at','d
-
微信小程序实现列表分页功能
微信小程序列表分页功能(未使用API),供大家参考,具体内容如下 概述 主要实现功能: 1.列表展示2.上下页点击 效果图: 知识点:wx:for.bindtap.生命周期函数–监听页面加载..filter.取余( % )取整(parseInt(x/y) )函数 js data: { frontPage: false,//上一页 存在true,不存在false nextPage: false,//下一页 存在true,不存在false pages: 0,//所有页
-
微信小程序云开发实现数据添加、查询和分页
本文实例为大家分享了微信小程序云开发实现数据添加.查询和分页,供大家参考,具体内容如下 实现的效果 实现要点 WXML 不同类别数据的显示 通过 if-elif-else 实现,在wxml文件中通过 <block></block>渲染,因为它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性.也就是说可以通过属性来控制页面是否要渲染这部分的内容,可以减少页面渲染时间. 云开发数据的获取 先开通云开发功能 ,参考官方文档,然后在创建项目的时候勾选上 使用云开发模板(看个人吧,
-
微信小程序实现下拉刷新和上拉分页效果的方法详解
目录 下拉刷新 上拉分页 下拉刷新 下拉刷新这个玩意吧,很有用,但是在我博客关联的小程序中,用处不大,也是,我那个小程序一共也没有几个页…… 我这里还是用在首页,上拉分页,下拉刷新重载分页.我就是这么做的. 下拉刷新和上拉分页还是有区别的. 下拉刷新需要在index.json中添加属性: "enablePullDownRefresh": true Index.js Page({ data: { // 文章数组 articleList:[], //每页显示的行数: pagesize: 2
-
微信小程序实现瀑布流分页滚动加载
本文实例为大家分享了微信小程序实现瀑布流分页滚动加载的具体代码,供大家参考,具体内容如下 两种分页方式 普通的分页效果会在页面底部提供点击下一页和上一页的按钮,在点击了按钮之后才会触发调取数据的接口,这种方式的用户体验一般 另一种分页效果不需要用户点击按钮,只要浏览到当前页面的后几条数据时,系统会自动发送请求获取后一页的数据,并展示到页面上,这样就可以实现类似无限滚动的效果 以csdn为例,当滚动条到达这个地方时,会自动调用请求下一页数据的接口,然后累加到加载完成的数据列表中 实现思路 滚动分页
-
微信小程序实现分页查询详解
目录 创建自定义连接器 云开发介绍 分页实现思路 使用连接器 为什么要自定义分页功能 日常小程序经常需要分页查询的功能,本篇我们讲解一下低代码中如何实现分页查询的功能.要自己开发分页功能,可以先参考官方的方法 分页查询我们一般是需要有入参和出参,入参分别需要页码.每页大小.排序字段名称.排序方式.查询条件. 出参分别需要记录总条数.页码.每页大小.记录列表. 入参和出参知道之后,那在哪写代码呢?像分页这种功能一般属于后端的能力,低码工具中是在自定义连接器里写后端代码的. 创建自定义连接器 登录低
-
微信小程序之搜索分页功能的实现代码
直接上代码: wxml: <wxs src="../wxs/changeimg.wxs" module="changeimg" /> <view class="container"> <view class="search_input"> <image class="back" src="" mode="widthFix"&g
-
微信小程序实现移动端滑动分页效果（ajax）
一般在PC上我们要分页都是通过上一页和下一页来实现的,手机通过当下滑到一定程度的时候自动加载下一页面. 实现思路:首先加载部分数据,当下滑到某个元素可见的时候,如果还有数据,则新发送请求,然后追加在当前页面. /* *<div class='topicBox' id='listBox'> *</div> */ //判断元素是否进入可视区域 function see(objLiLast) { //浏览器可视区域的高度 var see = document.documentElemen