微信小程序?qū)崿F(xiàn)表格前后臺(tái)分頁(yè)

更新時(shí)間：2022年08月24日 11:31:59 作者：貍貍1009

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)表格前后臺(tái)分頁(yè)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

微信小程序前臺(tái)分頁(yè)（樣式可以根據(jù)自己實(shí)際需要調(diào)整），供大家參考，具體內(nèi)容如下

直接上代碼，這個(gè)其實(shí)也可以調(diào)整為后臺(tái)分頁(yè),但是后面會(huì)寫一個(gè)后臺(tái)分頁(yè)的例子，根據(jù)實(shí)際需要選擇吧
數(shù)據(jù)是寫在data中沒(méi)有調(diào)用url獲取，實(shí)際可以修改

1、index.js

// pages/tablePage/index.js
Page({

? ? /**
? ? ?* 頁(yè)面的初始數(shù)據(jù)
? ? ?*/
? ??
data: {
? ? frontPage: false,//上一頁(yè) 存在true，不存在false
? ? nextPage: false,//下一頁(yè) 存在true，不存在false
? ? pages: 0,//所有頁(yè)
? ? thisPages: 0,//當(dāng)前頁(yè)
? ? rows: 6,//每頁(yè)條數(shù)
? ? total: 0,//總條數(shù)
? ? pageData: [],//本頁(yè)顯示的列表數(shù)據(jù)
? ? prizeListItem:[
? ? ? {name: "測(cè)試1", gift:"12"},?
? ? ? {name: "測(cè)試2", gift:"34"},?
? ? ? {name: "測(cè)試3", ?gift:"43"},?
? ? ? {name: "測(cè)試4", gift:"21"},?
? ? ? {name: "測(cè)試5", ?gift:"32"},?
? ? ? {name: "測(cè)試6", ?gift:"32"},?
? ? ? {name: "測(cè)試7", ?gift:"12"},?
? ? ? {name: "測(cè)試8", ?gift:"32"},
? ? ? {name: "測(cè)試9", ?gift:"32"},?
? ? ? {name: "測(cè)試10", ?gift:"44"},?
? ? ? {name: "測(cè)試11", gift:"231"},?
? ? ? {name: "測(cè)試12", ?gift:"233"},?
? ? ? {name: "測(cè)試13", ?gift:"233"}
? ? ],
? ? myPrize: false,
? ? tab1: '',
? ? tab2: 'selected',
? },


? ?/**
? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
? ?*/
? onLoad: function () {
? ? this.setList();
? },
? // 初始化列表分頁(yè)
? 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) {
? ? ? ? //元素值，元素的索引，原數(shù)組。
? ? ? ? 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; //所有頁(yè)
? ? ? thisPages = thisPages +1; //當(dāng)前頁(yè)
? ? ? if ( pages > 1){
? ? ? ? that.setData({
? ? ? ? ? nextPage: true,
? ? ? ? })
? ? ? }
? ? ? that.setData({
? ? ? ? thisPages: thisPages,
? ? ? ? pageData: pageData,
? ? ? ? pages: pages,
? ? ? ? rows: rows,
? ? ? })
? ? }
? },
//點(diǎn)擊下一頁(yè)
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) {
? ? ? //元素值，元素的索引，原數(shù)組。
? ? ? 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,
? ? })
? },
//點(diǎn)擊上一頁(yè)
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) {
? ? ? //元素值，元素的索引，原數(shù)組。
? ? ? 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">上一頁(yè)</view>
? ? ? ? </view>
? ? ? ? <view class="page_num">第{{thisPages}}頁(yè) 共{{pages}}頁(yè)</view>
? ? ? ? <view class="page_btn">
? ? ? ? ? <view class="down_page" wx:if="{{nextPage}}" bindtap="clickNext">下一頁(yè)</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;
? }

微信小程序后臺(tái)分頁(yè)示例

1、index.js

// pages/tableAfterPage/index.js
Page({
? ? data: {
? ? ? ? allpage:16,//總頁(yè)數(shù)
? ? ? ? nowpage:1,//當(dāng)前頁(yè)數(shù)
? ? ? ? page1:1,//第一頁(yè)
? ? ? ? page2:2,//第二頁(yè)
? ? ? ? page3:3,//
? ? ? ? page4:4,
? ? ? ? step:1,//步長(zhǎng)
? ? ? },
? ? ? /**主要函數(shù)*/
? ? ? //初始化渲染數(shù)據(jù)
? ? ? 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,//初始數(shù)據(jù)列表
? ? ? ? ? ? ? ? allpage:res.data.count//數(shù)據(jù)總頁(yè)數(shù)
? ? ? ? ? ? ? })
? ? ? ? ? ? } else {
? ? ? ? ? ? ? wx.showToast({
? ? ? ? ? ? ? ? title: '暫無(wú)待處理工作流！',
? ? ? ? ? ? ? ? icon: 'none',
? ? ? ? ? ? ? ? duration: 20000
? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? })
? ??
? ? ? },
? ? ? getPageDate:function(nowpage){
? ? ? ? var that = this
? ? ? ? wx.request({
? ? ? ? ? ? url: 'http://localhost:8080/text/auth/queryTableNew',
? ? ? ? ? data: {
? ? ? ? ? ? page: nowpage//當(dāng)前頁(yè)數(shù)的參
? ? ? ? ? },
? ? ? ? ? success: function (res) {
? ? ? ? ? ? if (res.data.data.length != 0) {
? ? ? ? ? ? ? that.setData({
? ? ? ? ? ? ? ? allworkflow: res.data.data,
? ? ? ? ? ? ? })
? ? ? ? ? ? } else {
? ? ? ? ? ? ? wx.showToast({
? ? ? ? ? ? ? ? title: '沒(méi)有數(shù)據(jù)的提示！',
? ? ? ? ? ? ? ? icon: 'none',
? ? ? ? ? ? ? ? duration: 20000
? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? })
? ? ? },
? ? ? /**
? ? ? ?* 上一頁(yè)
? ? ? ?*/
? ? ? 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: '已為第一頁(yè)',
? ? ? ? ? ? icon: 'none',
? ? ? ? ? ? duration: 1000
? ? ? ? ? })
? ? ? ? }
? ? ? },
? ? ? /**
? ? ? ?* 下一頁(yè)
? ? ? ?*/
? ? ? 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: '已為最后一頁(yè)',
? ? ? ? ? ? icon: 'none',
? ? ? ? ? ? duration: 1000
? ? ? ? ? })
? ? ? ? }
? ? ? },
? ? ? /**
? ? ? ?* 點(diǎn)擊后頁(yè)面渲染，重新查詢數(shù)據(jù)頁(yè)面重新渲染
? ? ? ?*/
? ? ? dd_status:function(e){
? ? ? ? this.setData({
? ? ? ? ? nowpage: e.currentTarget.dataset.id,
? ? ? ? });
? ? ? ? this.getPageDate(this.data.nowpage);
? ? ? }

})

2、index.wxml

?<!-- 有數(shù)據(jù)的話循環(huán)第一個(gè)就歐剋啦 -->
?<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'>訂單狀態(tài)：
? ? ? ? <text bindtap='dd_status' data-id='{{item.id}}' wx:if="{{item.sta=='待審核' || item.sta=='審核通過(guò)'}}" 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);'>
? ? 上一頁(yè)
? ? </text> -->
? ? <text ? bindtap='pu' style='color: rgb(79, 193, 229);'>
? ? 上一頁(yè)
? ? </text>
? ? <text bindtap='dd_status' wx:if="{{page1<=allpage}}" data-id='{{page1}}' style='color: rgb(79, 193, 229);'>
? ? 第{{page1}}頁(yè)
? ? </text>
? ? <text bindtap='dd_status' ?wx:if="{{page2<=allpage}}" data-id='{{page2}}' style='color: rgb(79, 193, 229);'>
? ? 第{{page2}}頁(yè)
? ? </text>
? ? <text bindtap='dd_status' ?wx:if="{{page3<=allpage}}" data-id='{{page3}}' style='color: rgb(79, 193, 229);'>
? ? 第{{page3}}頁(yè)
? ? </text>
? ? <text bindtap='dd_status' ?wx:if="{{page4<=allpage}}" data-id='{{page4}}' style='color: rgb(79, 193, 229);'>
? ? 第{{page4}}頁(yè)
? ? </text>
? ? <!-- <text wx:if="{{page4<allpage}}" bindtap='pd' data-id='{{item.id}}' style='color: rgb(79, 193, 229);'>
? ? 下一頁(yè)
? ? </text> -->
? ? ?<text bindtap='pd' data-id='{{item.id}}' style='color: rgb(79, 193, 229);'>
? ? 下一頁(yè)
? ? </text>
? ??
</view>
<view style="text-align:center">
? <text ?data-id='{{item.id}}' style='color: rgb(79, 193, 229);'>
? ? 共{{allpage}}頁(yè) ? ?當(dāng)前為第{{nowpage}}頁(yè)
? </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;
}

后臺(tái)模塊springboot，數(shù)據(jù)是隨機(jī)寫的，實(shí)際編寫時(shí)需要后臺(tái)調(diào)用jdbc獲取，根據(jù)實(shí)際需求修改，這里只提供模板

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.*;

/**
?* 微信小程序數(shù)據(jù)傳送接口
?*/
@RestController

@RequestMapping("/text/auth")
public class WxController {
? ? @RequestMapping("/queryTable")
? ? public Map ?queryTableInfo(){
? ? ? ? String[] types = {"預(yù)約存款","預(yù)約入戶","預(yù)約退款"};
? ? ? ? String[] status = {"審核失敗","審核通過(guò)","待審核"};
? ? ? ? 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 = {"預(yù)約存款","預(yù)約入戶","預(yù)約退款"};
? ? ? ? String[] status = {"審核失敗","審核通過(guò)","待審核"};
? ? ? ? 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;
? ? }
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: