小程序实现简单分页组件

2025-07-30 发布在行业资讯2

本文实例为大家分享了小程序实现简单分页组件的具体代码，供大家参考，具体内容如下

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; } /************分页样式结束************/

js:

Page({ data: { //分页数据 pageNumber:1, pagetotal:5, page:1 }, onLoad: function (options) { }, //input输入双向绑定数据 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: '已经是最前一页', }) 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: '已经是最后一页', }) 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) } })

效果图：