小程式實現分頁效果
阿新 • • 發佈:2021-05-27
本文例項為大家分享了小程式實現分頁效果展示的具體程式碼,供大家參考,具體內容如下
<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:ifhttp://www.cppcns.com="{{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 www.cppcns.com<= _that.data.maxPages){ _that.setData({ tyindex:type,pagesNum:type,}) } } if(type<_that.data.pagesNum){ if(type >=1){ _that.setData({ tyindex: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-cowww.cppcns.comlor: #F39800; } 程式設計客棧.pages_box>view:last-child,.pages_box>view:first-child{ border-radius: 60rpx; padding: 0 30rpx; }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。