小程序實現(xiàn)分頁效果

更新時間：2021年05月26日 10:42:29 作者：MrLi-2018

這篇文章主要為大家詳細介紹了小程序實現(xiàn)分頁效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了小程序實現(xiàn)分頁效果展示的具體代碼，供大家參考，具體內容如下

<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({
 
  /**
   * 頁面的初始數(shù)據
   */
  data: {
    pagesNum:1,
    maxPages:15,//分頁總數(shù)量
    tyindex:1
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  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)
    }
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
   */
  onReady: function () {
 
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow: function () {
 
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面隱藏
   */
  onHide: function () {
 
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面卸載
   */
  onUnload: function () {
 
  },
 
  /**
   * 頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作
   */
  onPullDownRefresh: function () {
 
  },
 
  /**
   * 頁面上拉觸底事件的處理函數(shù)
   */
  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;
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: