小程序实现简单分页组件
作者：zero___1
这篇文章主要为大家详细介绍了小程序实现简单分页组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了小程序实现简单分页组件的具体代码，供大家参考，具体内容如下
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)
}
})效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。