快捷導(dǎo)航

小程序?qū)崿F(xiàn)簡單分頁組件

更新時間：2022年08月24日 11:44:11 作者：zero___1

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

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

wxml:

?<!-- 分頁組件 -->
? ? <view class="page_div">
? ? ? <view class="page_sum">共{{pagetotal}}頁</view>
? ? ? <view class="page_prev" bindtap="prevFn">上一頁</view>
? ? ? <view class="page_number_div">
? ? ? ? <input value="{{pageNumber}}" bindinput="inputValue" data-name="pageNumber"></input>
? ? ? ? <view class="pageGo" bindtap="pageGo">Go</view>
? ? ? </view>
? ? ? <view class="page_next" bindtap="nextFn">下一頁</view>
</view>

wxss:

/************分頁樣式****************/
.page_div{
? display: flex;
? width: 100%;
? justify-content: flex-end;
? box-sizing: border-box;
? padding:20rpx;
? background-color: #fff;
}
.page_div .page_sum,
.page_div .page_prev,
.page_div .page_number_div,
.page_div .page_next{
? height: 50rpx;
? line-height: 50rpx;
? font-size:24rpx;
? color: #333;
}
.page_div .page_prev,
.page_div .page_next{
? background-color: #eee;
? padding:0 10rpx;
? margin:0 10rpx;
}
.page_div .page_number_div .pageGo{
? display: inline-block;
? vertical-align: middle;
? width: 50rpx;
? box-sizing: border-box;
? background-color: #eee;
? text-align: center;
? margin:0 10rpx;
}
.page_div .page_number_div input{
? width: 100rpx;
? display: inline-block;
? vertical-align: middle;
? text-align: center;
? border:1px solid #eee;
}
/************分頁樣式結(jié)束************/

js:

Page({
? data: {
? ? //分頁數(shù)據(jù)
? ? pageNumber:1,
? ? pagetotal:5,
? ? page:1
? },
? onLoad: function (options) {
? ?
? },
? //input輸入雙向綁定數(shù)據(jù)
? inputValue:function(e){
? ? let name = e.currentTarget.dataset.name;
? ? let mapName ={};
? ? mapName[name]=e.detail && e.detail.value;
? ? // console.log(mapName);
? ? this.setData(mapName);
? },
? //上一頁
? prevFn:function(){
? ? if(this.data.pageNumber <=1){
? ? ? wx.showToast({
? ? ? ? icon:'none',
? ? ? ? title: '已經(jīng)是最前一頁',
? ? ? })
? ? ? return;
? ? }
? ??
? ? wx.showLoading({
? ? ? title: '加載中...',
? ? })
? ? this.setData({
? ? ? pageNumber:Number(this.data.pageNumber)-1
? ? })
? ? console.log(this.data.pageNumber);
? ? setTimeout(function(){
? ? ? wx.hideLoading()
? ? },1000)
? },
? //下一頁
? nextFn:function(){
? ? if(this.data.pageNumber === this.data.pagetotal){
? ? ? wx.showToast({
? ? ? ? icon:'none',
? ? ? ? title: '已經(jīng)是最后一頁',
? ? ? })
? ? ? return;
? ? }
? ? wx.showLoading({
? ? ? title: '加載中...',
? ? })
? ? this.setData({
? ? ? pageNumber:Number(this.data.pageNumber)+1
? ? })
? ? console.log(this.data.pageNumber);
? ? setTimeout(function(){
? ? ? wx.hideLoading()
? ? },1000)
? },
? //去到某一頁
? pageGo:function(){
? ? console.log(Number(this.data.pageNumber));
? ? if(Number(this.data.pageNumber) > this.data.pagetotal){
? ? ? this.setData({
? ? ? ? pageNumber:this.data.pagetotal
? ? ? })
? ? }else if(Number(this.data.pageNumber) <= 0){
? ? ? this.setData({
? ? ? ? pageNumber:1
? ? ? })
? ? }
? ? console.log(Number(this.data.pageNumber));
? ? wx.showLoading({
? ? ? title: '加載中...',
? ? })
? ? setTimeout(function(){
? ? ? wx.hideLoading()
? ? },1000)
? }
})

效果圖：