微信小程序?qū)崿F(xiàn)表格前后臺分頁
更新時間：2022年08月24日 11:31:59 作者：貍貍1009
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)表格前后臺分頁，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
微信小程序前臺分頁（樣式可以根據(jù)自己實際需要調(diào)整），供大家參考，具體內(nèi)容如下
直接上代碼，這個其實也可以調(diào)整為后臺分頁,但是后面會寫一個后臺分頁的例子，根據(jù)實際需要選擇吧
數(shù)據(jù)是寫在data中沒有調(diào)用url獲取，實際可以修改
1、index.js
// pages/tablePage/index.js
Page({
? ? /**
? ? ?* 頁面的初始數(shù)據(jù)
? ? ?*/
? ??
data: {
? ? frontPage: false,//上一頁 存在true，不存在false
? ? nextPage: false,//下一頁 存在true，不存在false
? ? pages: 0,//所有頁
? ? thisPages: 0,//當前頁
? ? rows: 6,//每頁條數(shù)
? ? total: 0,//總條數(shù)
? ? pageData: [],//本頁顯示的列表數(shù)據(jù)
? ? 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',
? },
? ?/**
? ?* 生命周期函數(shù)--監(jiān)聽頁面加載
? ?*/
? 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) {
? ? ? ? //元素值，元素的索引，原數(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; //所有頁
? ? ? 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) {
? ? ? //元素值，元素的索引，原數(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,
? ? })
? },
//點擊上一頁
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">上一頁</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,//總頁數(shù)
? ? ? ? nowpage:1,//當前頁數(shù)
? ? ? ? page1:1,//第一頁
? ? ? ? page2:2,//第二頁
? ? ? ? page3:3,//
? ? ? ? page4:4,
? ? ? ? step:1,//步長
? ? ? },
? ? ? /**主要函數(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ù)總頁數(shù)
? ? ? ? ? ? ? })
? ? ? ? ? ? } 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//當前頁數(shù)的參
? ? ? ? ? },
? ? ? ? ? success: function (res) {
? ? ? ? ? ? if (res.data.data.length != 0) {
? ? ? ? ? ? ? that.setData({
? ? ? ? ? ? ? ? allworkflow: res.data.data,
? ? ? ? ? ? ? })
? ? ? ? ? ? } else {
? ? ? ? ? ? ? wx.showToast({
? ? ? ? ? ? ? ? title: '沒有數(shù)據(jù)的提示！',
? ? ? ? ? ? ? ? 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
? ? ? ? ? })
? ? ? ? }
? ? ? },
? ? ? /**
? ? ? ?* 點擊后頁面渲染，重新查詢數(shù)據(jù)頁面重新渲染
? ? ? ?*/
? ? ? dd_status:function(e){
? ? ? ? this.setData({
? ? ? ? ? nowpage: e.currentTarget.dataset.id,
? ? ? ? });
? ? ? ? this.getPageDate(this.data.nowpage);
? ? ? }
})2、index.wxml
?<!-- 有數(shù)據(jù)的話循環(huán)第一個就歐剋啦 -->
?<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=='審核通過'}}" 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，數(shù)據(jù)是隨機寫的，實際編寫時需要后臺調(diào)用jdbc獲取，根據(jù)實際需求修改，這里只提供模板
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 = {"審核失敗","審核通過","待審核"};
? ? ? ? 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 = {"審核失敗","審核通過","待審核"};
? ? ? ? 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;
? ? }
}以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
ABP是“ASP.NET Boilerplate Project (ASP.NET樣板項目)”的簡稱，它是一個成熟的開源框架，基于DDD+Repository模式，自帶Zero權(quán)限和認證模塊，避免了從零開始搭建框架的煩惱。今天來分享下如何在ABP框架的模式里面使用bootstrapTable組件。2017-07-07
這篇文章主要幫助大家理解學習javascript封裝，通過封裝可以強制實施信息隱藏，本文為大家分析了封裝的利弊，感興趣的小伙伴們可以參考一下2016-02-02
這篇文章主要介紹了JS去掉字符串中所有的逗號,需要的朋友可以參考下2017-10-10
原生js實現(xiàn)ajax請求和JSONP跨域請求操作示例
這篇文章主要介紹了原生js實現(xiàn)ajax請求和JSONP跨域請求操作,結(jié)合實例形式分析了基于原生js實現(xiàn)的ajax請求和JSONP跨域請求相關(guān)操作技巧與使用注意事項,需要的朋友可以參考下2020-03-03
JavaScript是用來在數(shù)據(jù)被傳輸?shù)椒?wù)前對html表單中輸入的數(shù)據(jù)進行驗證，使用javascript對用戶輸入的信息進行驗證是項目必須的，下面小編給大家整理一些比較常用的javascript表單驗證，需要的朋友可以參考下2015-08-08
本篇文章主要介紹了ionic 3.0+ 項目搭建運行的教程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要給大家介紹了關(guān)于js獲取當前年月日的相關(guān)資料,JavaScript內(nèi)置的Date對象是獲取當前日期最常用的工具之一,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-12-12
event.srcElement+表格應(yīng)用...2006-08-08
使用javascript訪問XML數(shù)據(jù)的實例
使用javascript訪問XML數(shù)據(jù)的實例...2006-12-12
JavaScript encodeURI 和encodeURIComponent
encodeURI和encodeURIComponet函數(shù)都是javascript中用來對URI進行編碼，將相關(guān)參數(shù)轉(zhuǎn)換成UTF-8編碼格式的數(shù)據(jù)。URI在進行定位跳轉(zhuǎn)時，參數(shù)里面的中文、日文等非ASCII編碼都會進行編碼轉(zhuǎn)換2015-12-12