小程序实现分页效果
更新时间：2021年05月26日 10:42:29 作者：MrLi-2018
这篇文章主要为大家详细介绍了小程序实现分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了小程序实现分页效果展示的具体代码，供大家参考，具体内容如下
<view class="pages_box">
<view bindtap="pagesFn" class="{{pagesNum==0?'active':''}}" data-type="0">上一页</view>
<block wx:for="shujuDataArr11111" wx:key="index" wx:if="{{index+1<4}}">
<view wx:if="{{tyindex+index <=maxPages}}" bindtap="pagesFn" class="{{pagesNum==tyindex+index?'active':''}}" data-type="{{tyindex+index}}">{{tyindex+index}}</view>
</block>
<view bindtap="pagesFn" class="{{pagesNum==-1?'active':''}}" data-type="-1">下一页</view>
</view>
js：
// pages/ceshiPages/index.js
Page({
/**
* 页面的初始数据
*/
data: {
pagesNum:1,
maxPages:15,//分页总数量
tyindex:1
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
pagesFn:function(e){
let type = e.currentTarget.dataset.type;
let _that = this;
if(typeof type == "string"){//上下页
if(type == "previous_page"){//上一页
if(_that.data.pagesNum-1 >0){
_that.setData({
pagesNum:_that.data.pagesNum-1,
tyindex:_that.data.pagesNum-1,
})
}
console.log(_that.data.pagesNum)
}else{//下一页
if(_that.data.pagesNum+1 <= _that.data.maxPages){
if((_that.data.pagesNum+1)%3 == 0){
_that.setData({
tyindex:_that.data.pagesNum+1,
})
}
_that.setData({
pagesNum:_that.data.pagesNum+1,
})
console.log(_that.data.pagesNum)
}
}
}else{
console.log(_that.data.pagesNum)
if(type>_that.data.pagesNum){
if(type <= _that.data.maxPages){
_that.setData({
tyindex:type,
pagesNum:type,
})
}
}
if(type<_that.data.pagesNum){
if(type >=1){
_that.setData({
tyindex:type,
pagesNum:type,
})
}
}
console.log(_that.data.pagesNum)
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
CSS：
/* pages/ceshiPages/index.wxss */
.pages_box{
margin-top: 20rpx;
display: flex;
display: -webkit-flex;
flex-direction: row;
justify-content: space-around;
align-content: flex-start;
flex-wrap: nowrap;
}
.pages_box>view{
line-height: 60rpx;
font-size: 30rpx;
border: 1px solid #A0A0A0;
background-color: #F7F7F7;
display: inline-block;
padding: 0 25rpx;
margin-left: 12rpx;
color: #64646C;
border-radius: 10rpx;
}
.pages_box>view.active{
background-color: #FCD821;
border-color: #F39800;
}
.pages_box>view:last-child,.pages_box>view:first-child{
border-radius: 60rpx;
padding: 0 30rpx;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
JS 中document.write()的用法和清空的原因浅析
这篇文章主要介绍了JS 中document.write()的用法和清空的原因浅析,需要的朋友可以参考下2017-12-12
在 JavaScript 中，对象是引用类型的数据，其优点在于频繁的修改对象时都是在原对象的基础上修改，并不需要重新创建，这样可以有效的利用内存，不会造成内存空间的浪费，对象的这种特性可以称之为 Mutable，中文的字面意思是「可变」2016-05-05
这篇文章主要为大家详细介绍了微信小程序实现下拉选项框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了JS 插件dropload下拉刷新、上拉加载使用小结,需要的朋友可以参考下2017-04-04
这篇文章主要介绍了js读取配置文件的方法,需要的朋友可以参考下2014-02-02
这篇文章主要介绍了JavaScript兼容性总结之获取非行间样式的相关资料,需要的朋友可以参考下2016-08-08
这篇文章主要介绍了JavaScript中return false的用法,在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为,需要的朋友可以参考下2015-03-03
今天就来介绍一个在其它开源库中见到的既花里胡哨，又实用的TS类型——TS类型过滤，你会发现这些 TS骚操作真的很重要，因为它能很好地帮助你做静态类型校验2022-04-04
今天小编就为大家分享一篇解决bootstrap中下拉菜单点击后不关闭的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了JavaScript点击按钮后弹出透明浮动层的方法,可实现点击按钮弹出居中的透明浮动层的效果,涉及javascript操作鼠标事件及页面样式的相关技巧,需要的朋友可以参考下2015-05-05
最新评论