快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)分頁(yè)功能

更新時(shí)間：2022年08月24日 14:29:06 作者：蠻筍

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

本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)分頁(yè)的具體代碼，供大家參考，具體內(nèi)容如下

今天被提了個(gè)需求，需要小程序上實(shí)現(xiàn)分頁(yè)，搜索能力不行，沒(méi)找到demo，自己想了一下邏輯然后，就自己寫了，不知道有沒(méi)有相同的，如果比我的思路好分享一下，這個(gè)是我剛剛寫出來(lái)的，后期可以進(jìn)行修改，拿去用吧，寫完后感覺(jué)挺簡(jiǎn)單的沒(méi)有特別的思路完全可以優(yōu)化，上代碼

小程序端

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>

js

data: {
? ? allpage:16,//總頁(yè)數(shù)
? ? nowpage:1,//當(dāng)前頁(yè)數(shù)
? ? page1:1,//第一頁(yè)
? ? page2:2,//第二頁(yè)
? ? page3:3,//‘'‘'
? ? page4:4,
? ? step:4,//步長(zhǎng)
? },
? /**主要函數(shù)*/
? //初始化渲染數(shù)據(jù)
? onLoad: function (options) {
? ? var that = this
? ? wx.request({
? ? ? url: "你的網(wǎng)址",
? ? ? data: {
? ? ? ? userphone: 你的參數(shù),
? ? ? },
? ? ? success: function (res) {
? ? ? ? console.log(res);
? ? ? ? if (res.data.code == 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
? ? ? ? ? })
? ? ? ? }
? ? ? }
? ? })

? },
? /**
? ?* 上一頁(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,
? ? ? });
? ? }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,
? ? ? });
? ? } 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,
? ? });
? ? var that = this
? ? wx.request({
? ? ? url: "你的地址",
? ? ? data: {
? ? ? ? userphone: 你的查詢參數(shù),
? ? ? ? page: e.currentTarget.dataset.id//當(dāng)前頁(yè)數(shù)的參
? ? ? },
? ? ? success: function (res) {
? ? ? ? if (res.data.code == 0) {
? ? ? ? ? that.setData({
? ? ? ? ? ? allworkflow: res.data.data,
? ? ? ? ? })
? ? ? ? } else {
? ? ? ? ? wx.showToast({
? ? ? ? ? ? title: '沒(méi)有數(shù)據(jù)的提示！',
? ? ? ? ? ? icon: 'none',
? ? ? ? ? ? duration: 20000
? ? ? ? ? })
? ? ? ? }
? ? ? }
? ? })
? }

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)的查詢，我是php，你可以java或者其他，畢竟多掌握幾門語(yǔ)言沒(méi)有壞處
-初次渲染的后臺(tái)

/**數(shù)量查詢*/
$querysum = "select count(id) as sums from yv_order where user_bankid='$user_bankid' order by id desc";
/**數(shù)據(jù)查詢*/
$query2 = "select yvtype,yvtime,sta,id from yv_order where user_bankid='$user_bankid' order by id desc limit 4";
?$data=array(
?? ?'code'=>0,
?? ?'msg'=>'ok',
?? ?'data'=>$allorder,
?? ?'count'=>ceil($countsum/4),
);
echo json_encode($data,JSON_UNESCAPED_UNICODE);
exit;

-每次點(diǎn)擊頁(yè)數(shù)查詢的后臺(tái)

//之后查詢的頁(yè)面
$userphone=$_GET['userphone'];//你許喲啊查詢條件的參數(shù)
$page=$_GET['page'];//頁(yè)數(shù)
//我的分頁(yè)是4條一頁(yè)，你自己按照你自己的來(lái)我只提供思路
if($pagel>0){
?? ??? ??? ?$query2 = "select yvtype,yvtime,sta,id from yv_order where user_bankid='$user_bankid' order by id desc limit $pagel,4";
?? ??? ?}else{
?? ??? ??? ?$query2 = "select yvtype,yvtime,sta,id from yv_order where user_bankid='$user_bankid' order by id desc limit 4";
?? ??? ?}
//對(duì)不起我只能為你提供片段
$data=array(
?? ?'code'=>0,
?? ?'msg'=>'ok',
?? ?'data'=>$allorder,
);
echo json_encode($data,JSON_UNESCAPED_UNICODE);
exit;

界面展示