微信小程序?qū)崿F(xiàn)表格前后臺分頁
微信小程序前臺分頁(樣式可以根據(jù)自己實(shí)際需要調(diào)整),供大家參考,具體內(nèi)容如下
直接上代碼,這個其實(shí)也可以調(diào)整為后臺分頁,但是后面會寫一個后臺分頁的例子,根據(jù)實(shí)際需要選擇吧
數(shù)據(jù)是寫在data中沒有調(diào)用url獲取,實(shí)際可以修改
1、index.js
// pages/tablePage/index.js Page({ ? ? /** ? ? ?* 頁面的初始數(shù)據(jù) ? ? ?*/ ? ?? data: { ? ? frontPage: false,//上一頁 存在true,不存在false ? ? nextPage: false,//下一頁 存在true,不存在false ? ? pages: 0,//所有頁 ? ? thisPages: 0,//當(dāng)前頁 ? ? 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; //當(dāng)前頁 ? ? ? if ( pages > 1){ ? ? ? ? that.setData({ ? ? ? ? ? nextPage: true, ? ? ? ? }) ? ? ? } ? ? ? that.setData({ ? ? ? ? thisPages: thisPages, ? ? ? ? pageData: pageData, ? ? ? ? pages: pages, ? ? ? ? rows: rows, ? ? ? }) ? ? } ? }, //點(diǎn)擊下一頁 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)擊上一頁 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,//當(dāng)前頁數(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//當(dāng)前頁數(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 ? ? ? ? ? }) ? ? ? ? } ? ? ? }, ? ? ? /** ? ? ? ?* 點(diǎn)擊后頁面渲染,重新查詢數(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}}頁 ? ?當(dāng)前為第{{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ù)是隨機(jī)寫的,實(shí)際編寫時需要后臺調(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 = {"審核失敗","審核通過","待審核"}; ? ? ? ? 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)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
原生js實(shí)現(xiàn)ajax請求和JSONP跨域請求操作示例
這篇文章主要介紹了原生js實(shí)現(xiàn)ajax請求和JSONP跨域請求操作,結(jié)合實(shí)例形式分析了基于原生js實(shí)現(xiàn)的ajax請求和JSONP跨域請求相關(guān)操作技巧與使用注意事項(xiàng),需要的朋友可以參考下2020-03-03ionic 3.0+ 項(xiàng)目搭建運(yùn)行環(huán)境的教程
本篇文章主要介紹了ionic 3.0+ 項(xiàng)目搭建運(yùn)行的教程,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-08-08js獲取當(dāng)前年月日詳細(xì)教程(看這一篇就夠了)
這篇文章主要給大家介紹了關(guān)于js獲取當(dāng)前年月日的相關(guān)資料,JavaScript內(nèi)置的Date對象是獲取當(dāng)前日期最常用的工具之一,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12使用javascript訪問XML數(shù)據(jù)的實(shí)例
使用javascript訪問XML數(shù)據(jù)的實(shí)例...2006-12-12JavaScript encodeURI 和encodeURIComponent
encodeURI和encodeURIComponet函數(shù)都是javascript中用來對URI進(jìn)行編碼,將相關(guān)參數(shù)轉(zhuǎn)換成UTF-8編碼格式的數(shù)據(jù)。URI在進(jìn)行定位跳轉(zhuǎn)時,參數(shù)里面的中文、日文等非ASCII編碼都會進(jìn)行編碼轉(zhuǎn)換2015-12-12