微信小程序?qū)崿F(xiàn)列表分頁(yè)功能
微信小程序列表分頁(yè)功能(未使用API),供大家參考,具體內(nèi)容如下
概述
主要實(shí)現(xiàn)功能:
1.列表展示
2.上下頁(yè)點(diǎn)擊
效果圖:
知識(shí)點(diǎn):wx:for、bindtap、生命周期函數(shù)–監(jiān)聽(tīng)頁(yè)面加載、.filter、取余( %
)取整(parseInt(x/y)
)函數(shù)
js
data: { ? ? frontPage: false,//上一頁(yè) 存在true,不存在false ? ? nextPage: false,//下一頁(yè) 存在true,不存在false ? ? pages: 0,//所有頁(yè) ? ? thisPages: 0,//當(dāng)前頁(yè) ? ? rows: 6,//每頁(yè)條數(shù) ? ? total: 0,//總條數(shù) ? ? pageData: [],//本頁(yè)顯示的列表數(shù)據(jù) ? ? prizeListItem:[ ? ? ? {name: "張三", pic: "../../images/1.png", gift:"小蛋糕"},? ? ? ? {name: "李四", pic: "../../images/2.png", gift:"冰淇淋"},? ? ? ? {name: "陳工", pic: "../../images/3.png", gift:"按摩椅"},? ? ? ? {name: "孫悟空", pic: "../../images/3.png", gift:"桃子"},? ? ? ? {name: "豬八戒", pic: "../../images/2.png", gift:"紅燒肉"},? ? ? ? {name: "薩赫尚", pic: "../../images/1.png", gift:"新衣服"},? ? ? ? {name: "程序員", pic: "../../images/2.png", gift:"電腦"},? ? ? ? {name: "甄姬", pic: "../../images/3.png", gift:"口紅"}, ? ? ? {name: "孫悟空", pic: "../../images/3.png", gift:"桃子"},? ? ? ? {name: "豬八戒", pic: "../../images/2.png", gift:"紅燒肉"},? ? ? ? {name: "薩赫尚", pic: "../../images/1.png", gift:"新衣服"},? ? ? ? {name: "程序員", pic: "../../images/1.png", gift:"電腦"},? ? ? ? {name: "甄姬", pic: "../../images/2.png", gift:"口紅"} ? ? ], ? ? myPrize: false, ? ? tab1: '', ? ? tab2: 'selected', ? },
/** ? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載 ? ?*/ ? onLoad: function () { ? ? this.setList(); ? }, ? // 初始化列表分頁(yè) ? setList() { ? ? let that = this; ? ? let thisPages = that.data.thisPages; ? ? let rows = that.data.rows; ? ? let prizeListItem = that.data.prizeListItem; ? ? let pageData = that.data.pageData; ? ? let pages = that.data.pages; ? ? if (pageData !== []){ ? ? ? pageData = prizeListItem.filter(function (item, index, prizeListItem) { ? ? ? ? //元素值,元素的索引,原數(shù)組。 ? ? ? ? return index >= rows*thisPages && index <= rows*(thisPages+1)-1; ?//初始為0,0 < index < 6-1 ? ? ? }); ? ? ? let x = 0; ? ? ? let y = prizeListItem.length; ? ? ? if ( y%rows !== 0){ ? ? ? ? x = 1 ? ? ? }; ? ? ? pages = parseInt(y/rows) + x; //所有頁(yè) ? ? ? thisPages = thisPages +1; //當(dāng)前頁(yè) ? ? ? if ( pages > 1){ ? ? ? ? that.setData({ ? ? ? ? ? nextPage: true, ? ? ? ? }) ? ? ? } ? ? ? that.setData({ ? ? ? ? thisPages: thisPages, ? ? ? ? pageData: pageData, ? ? ? ? pages: pages, ? ? ? ? rows: rows, ? ? ? }) ? ? } ? },
//點(diǎn)擊下一頁(yè) ? clickNext() { ? ? let that = this; ? ? let thisPages = that.data.thisPages; ? ? let prizeListItem = that.data.prizeListItem; ? ? let pageData = that.data.pageData; ? ? let pages = that.data.pages; ? ? let rows = that.data.rows; ? ? pageData = prizeListItem.filter(function (item, index, prizeListItem) { ? ? ? //元素值,元素的索引,原數(shù)組。 ? ? ? return index >= rows*thisPages && index <= rows*(thisPages+1)-1; ? ? ? }); ? ? thisPages = thisPages + 1; ? ? if ( pages === thisPages){ ? ? ? that.setData({ ? ? ? ? nextPage: false, ? ? ? }) ? ? } ? ? that.setData({ ? ? ? thisPages: thisPages, ? ? ? pageData: pageData, ? ? ? frontPage: true, ? ? }) ? },
//點(diǎn)擊上一頁(yè) ? clickFront() { ? ? let that = this; ? ? let thisPages = that.data.thisPages; ? ? let prizeListItem = that.data.prizeListItem; ? ? let pageData = that.data.pageData; ? ? let rows = that.data.rows; ? ? pageData = prizeListItem.filter(function (item, index, prizeListItem) { ? ? ? //元素值,元素的索引,原數(shù)組。 ? ? ? return index >= rows*(thisPages-2) && index <= rows*(thisPages-1)-1; ? ? ? }); ? ? thisPages = thisPages - 1; ? ? if ( thisPages === 1){ ? ? ? that.setData({ ? ? ? ? frontPage: false, ? ? ? }) ? ? } ? ? that.setData({ ? ? ? thisPages: thisPages, ? ? ? pageData: pageData, ? ? ? nextPage: true, ? ? }) ? },
wxml
<view class="prizelist"> ? ? ? <view class="info_con"> ? ? ? ? <view class="list" wx:for="{{pageData}}"> ? ? ? ? ? <image class="list_bg" src="../../images/wi_listbg.png"></image> ? ? ? ? ? <view class="list_head"> ? ? ? ? ? ? <image class="list_headpic" src="{{item.pic}}"></image> ? ? ? ? ? ? <view class="list_name">{{item.name}}</view> ? ? ? ? ? </view> ? ? ? ? ? <view class="list_prize">{{item.gift}}</view> ? ? ? ? </view> ? ? ? </view> ?? ? ? ? <view class="paging"> ? ? ? ? <view class="page_btn"> ? ? ? ? ? <view wx:if="{{frontPage}}" bindtap="clickFront">上一頁(yè)</view> ? ? ? ? </view> ? ? ? ? <view class="page_num">第{{thisPages}}頁(yè) 共{{pages}}頁(yè)</view> ? ? ? ? <view class="page_btn"> ? ? ? ? ? <view wx:if="{{nextPage}}" bindtap="clickNext">下一頁(yè)</view> ? ? ? ? </view> ? ? ? </view> ? ? </view>
wxss
【外框
.con .prizelist{ ? width: 100%; ? height: max-content; ? margin-top: 38rpx; } .con .prizelist .info_con{ ? width: 639rpx; ? height: 787rpx; ? display: inline-block; }
【list的樣式
.con .prizelist .info_con .list{ ? width: 639rpx; ? height: 108rpx; ? position: relative; ? margin: 20rpx 0; } .list .wi_prize{ ? width: 186rpx; ? height: 69rpx; ? margin: 20rpx 0 0 60rpx; } .list .prizeinfo{ ? width: 350rpx; ? height: 108rpx; ? float: right; } .list .prizeinfo .prize_name{ ? font-size: 28rpx; ? color: #87562e; ? line-height: 42rpx; ? margin-top: 20rpx; } .list .prizeinfo .prize_state{ ? font-size: 20rpx; ? color: #ff2d2d; ? line-height: 25rpx; } .list .list_bg{ ? width: 639rpx; ? height: 108rpx; ? position: absolute; ? left: 56rpx; ? z-index: -1; } .list .list_head{ ? height: 100%; ? width: max-content; ? margin-left: 100rpx; ? float: left; } .list .list_head .list_headpic{ ? border-radius: 50%; ? background-color: rgb(43, 93, 216); ? width: 46rpx; ? height: 46rpx; ? margin: 31rpx 0rpx; ? float: left; } .list .list_head .list_name{ ? color: #000; ? line-height: 108rpx; ? font-size: 28rpx; ? float: left; ? margin-left: 31rpx; } .list .list_prize{ ? height: 100%; ? line-height: 108rpx; ? font-size: 28rpx; ? color: #87562e; ? float: right; }
【上下頁(yè)樣式
.con .prizelist .paging{ ? width: 580rpx; ? height: 108rpx; ? margin: 30rpx auto; } .con .prizelist .paging .page_btn{ ? width: 96rpx; ? height: 32rpx; ? font-size: 32rpx; ? font-family: "PingFangSC"; ? color: #ffffff; ? line-height: 36rpx; ? float: left; ? margin: auto 23rpx; } .con .prizelist .page_num{ ? font-size: 24rpx; ? font-family: "PingFangSC"; ? color: #ffffff; ? line-height: 36rpx; ? float: left; ? margin: auto 75rpx; }
結(jié)語(yǔ)
有一個(gè)可有可無(wú)的警告:
Now you can provide attr wx:key
for a wx:for
to improve performance.
解決辦法:添加wx:key屬性,
①使用循環(huán)的 array 中 item 的某個(gè)property
,比如 wx:key=“item.id”
此時(shí)數(shù)組的格式應(yīng)為:
?{id: "1", name: "張三", pic: "../../images/1.png", gift:"小蛋糕"},?
②使用數(shù)組的下標(biāo),即 wx:key=“index”
③ wx:key="*this" 我沒(méi)太看懂,是
官方文檔說(shuō)的有一個(gè)經(jīng)歷過(guò)的低級(jí)錯(cuò)誤:
錯(cuò)誤:
onLoad: function () { ? ? setList(); ? },
改正:
onLoad: function () { ? ? this.setList(); ? },
(我都沒(méi)眼看了,馬虎或則腦子不清楚的錯(cuò)誤總是次次能碰到——2021年3月9日)
后續(xù)
1.被指出 “第 X 頁(yè) 共 X 頁(yè)”的margin固定,當(dāng)頁(yè)數(shù)增加到雙位數(shù)后,下一頁(yè)被擠到下一行了。
方法1(同事腦力成果,擔(dān)待了):修改class為page_name的margin為百分比。
即
.con .prizelist .page_num{ ? margin: auto 75rpx; }
改為:
.con .prizelist .page_num{ ? margin: auto 10%; }
方法2(我自己的老辦法):給“上一頁(yè)”“共 頁(yè)”“下一個(gè)”分別定義class:
<view class="paging"> ? ? ? ? <view class="up_page" bindtap="up_page" >{{current_page > 1 ? '上一頁(yè)' : ''}}</view> ? ? ? ? <view class="down_page" bindtap="next_page">{{current_page < last_page ? '下一頁(yè)' : ''}}</view> ? ? ? ? <view class="page_num">第{{current_page}}頁(yè) 共{{last_page}}頁(yè)</view> </view>
樣式:
.con .prizelist .paging{ ? width: 100%; ? height: 108rpx; ? font-size: 32rpx; ? font-family: "PingFangSC"; ? color: #ffffff; ? line-height: 36rpx; ? text-align: center; } .con .prizelist .paging .up_page{ ? width: 96rpx; ? height: 32rpx; ? float: left; ? margin-left: 72rpx; } .con .prizelist .paging .down_page{ ? width: 96rpx; ? height: 32rpx; ? float: right; ? margin-right: 72rpx; } .con .prizelist .page_num{ ? width: 500rpx; ? font-size: 24rpx; ? font-family: "PingFangSC"; ? color: #ffffff; ? line-height: 36rpx; ? margin: auto; }
(時(shí)間:2021年3月22日)
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序分頁(yè)加載的實(shí)例代碼
- 微信小程序云開(kāi)發(fā)實(shí)現(xiàn)數(shù)據(jù)添加、查詢和分頁(yè)
- 微信小程序模板之分頁(yè)滑動(dòng)欄
- 微信小程序?qū)崿F(xiàn)分頁(yè)加載效果
- 微信小程序?qū)崿F(xiàn)下拉刷新和上拉分頁(yè)效果的方法詳解
- 微信小程序之搜索分頁(yè)功能的實(shí)現(xiàn)代碼
- 微信小程序?qū)崿F(xiàn)分頁(yè)查詢?cè)斀?/a>
- 微信小程序?qū)崿F(xiàn)表格前后臺(tái)分頁(yè)
- 微信小程序云開(kāi)發(fā)實(shí)現(xiàn)分頁(yè)刷新獲取數(shù)據(jù)
- 微信小程序?qū)崿F(xiàn)分頁(yè)功能
相關(guān)文章
js open() 與showModalDialog()方法使用介紹
項(xiàng)目開(kāi)發(fā)中經(jīng)常要用到j(luò)s open() 與showModalDialog()方法,下面有個(gè)不錯(cuò)的示例,喜歡的朋友可以研究下2013-09-09javascript中關(guān)于執(zhí)行環(huán)境的雜談
如你所知,javascript里執(zhí)行環(huán)境是作為一個(gè)最核心的概念存在的。相信廣大FE筒子們對(duì)于這個(gè)概念不會(huì)陌生,它定義了變量或函數(shù)有權(quán)訪問(wèn)其他數(shù)據(jù)范圍以及其行為。2011-08-08JS限制input框只能輸入0~100的正整數(shù)的兩種方法
本文給大家分享兩種方法實(shí)現(xiàn)JS限制input框只能輸入0~100的正整數(shù),方法二是直接通過(guò)設(shè)置三個(gè)屬性,type、min、max即可,就可以設(shè)置0~100的整數(shù),感興趣的朋友跟隨小編一起看看吧2024-02-02webpack4 配置 ssr 環(huán)境遇到“document is not defined”
這篇文章主要介紹了webpack4 配置 ssr 環(huán)境遇到“document is not defined”,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10基于JavaScript實(shí)現(xiàn)留言板功能
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)留言板功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-03-03