小程序如何實(shí)現(xiàn)簡(jiǎn)單分頁(yè)組件

這篇文章主要介紹了小程序如何實(shí)現(xiàn)簡(jiǎn)單分頁(yè)組件的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇小程序如何實(shí)現(xiàn)簡(jiǎn)單分頁(yè)組件文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

wxml:

 <!-- 分頁(yè)組件 -->
    <view class="page_div">
      <view class="page_sum">共{{pagetotal}}頁(yè)</view>
      <view class="page_prev" bindtap="prevFn">上一頁(yè)</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">下一頁(yè)</view>
</view>

wxss:

/************分頁(yè)樣式****************/
.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;
}
/************分頁(yè)樣式結(jié)束************/

js:

Page({
  data: {
    //分頁(yè)數(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);
  },
  //上一頁(yè)
  prevFn:function(){
    if(this.data.pageNumber <=1){
      wx.showToast({
        icon:'none',
        title: '已經(jīng)是最前一頁(yè)',
      })
      return;
    }
    
    wx.showLoading({
      title: '加載中...',
    })
    this.setData({
      pageNumber:Number(this.data.pageNumber)-1
    })
    console.log(this.data.pageNumber);
    setTimeout(function(){
      wx.hideLoading()
    },1000)
  },
  //下一頁(yè)
  nextFn:function(){
    if(this.data.pageNumber === this.data.pagetotal){
      wx.showToast({
        icon:'none',
        title: '已經(jīng)是最后一頁(yè)',
      })
      return;
    }
    wx.showLoading({
      title: '加載中...',
    })
    this.setData({
      pageNumber:Number(this.data.pageNumber)+1
    })
    console.log(this.data.pageNumber);
    setTimeout(function(){
      wx.hideLoading()
    },1000)
  },
  //去到某一頁(yè)
  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)
  }
})

效果圖：

關(guān)于“小程序如何實(shí)現(xiàn)簡(jiǎn)單分頁(yè)組件”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“小程序如何實(shí)現(xiàn)簡(jiǎn)單分頁(yè)組件”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。