欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序?qū)崿F(xiàn)列表分頁(yè)功能

 更新時(shí)間:2022年08月24日 11:58:22   作者:四月邇安  
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)列表分頁(yè)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

微信小程序列表分頁(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í)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • js電話號(hào)碼驗(yàn)證方法

    js電話號(hào)碼驗(yàn)證方法

    JS電話號(hào)碼驗(yàn)證是比較常的一種驗(yàn)證,下邊給出一個(gè)JavaScript驗(yàn)證電話號(hào)碼的小例子。國(guó)內(nèi)固定電話都是七位或8位的數(shù)字組成的,還可以帶有長(zhǎng)途的區(qū)號(hào)。
    2015-09-09
  • C++中的string類(lèi)的用法小結(jié)

    C++中的string類(lèi)的用法小結(jié)

    通過(guò)在網(wǎng)站上的資料搜集,得到了很多關(guān)于string類(lèi)用法的文檔,通過(guò)對(duì)這些資料的整理和加入一些自己的代碼,就得出了一份比較完整的關(guān)于string類(lèi)函數(shù)有哪些和怎樣用的文檔了!
    2015-08-08
  • 深入淺析var,let,const的異同點(diǎn)

    深入淺析var,let,const的異同點(diǎn)

    這篇文章主要介紹了var,let,const異同點(diǎn),文中較詳細(xì)的給大家介紹了let和const的相同點(diǎn)和不同點(diǎn),需要的朋友可以參考下
    2018-08-08
  • js open() 與showModalDialog()方法使用介紹

    js open() 與showModalDialog()方法使用介紹

    項(xiàng)目開(kāi)發(fā)中經(jīng)常要用到j(luò)s open() 與showModalDialog()方法,下面有個(gè)不錯(cuò)的示例,喜歡的朋友可以研究下
    2013-09-09
  • javascript中關(guān)于執(zhí)行環(huán)境的雜談

    javascript中關(guān)于執(zhí)行環(huán)境的雜談

    如你所知,javascript里執(zhí)行環(huán)境是作為一個(gè)最核心的概念存在的。相信廣大FE筒子們對(duì)于這個(gè)概念不會(huì)陌生,它定義了變量或函數(shù)有權(quán)訪問(wèn)其他數(shù)據(jù)范圍以及其行為。
    2011-08-08
  • js實(shí)現(xiàn)無(wú)縫輪播圖插件封裝

    js實(shí)現(xiàn)無(wú)縫輪播圖插件封裝

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)無(wú)縫輪播圖插件封裝,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-07-07
  • JS限制input框只能輸入0~100的正整數(shù)的兩種方法

    JS限制input框只能輸入0~100的正整數(shù)的兩種方法

    本文給大家分享兩種方法實(shí)現(xiàn)JS限制input框只能輸入0~100的正整數(shù),方法二是直接通過(guò)設(shè)置三個(gè)屬性,type、min、max即可,就可以設(shè)置0~100的整數(shù),感興趣的朋友跟隨小編一起看看吧
    2024-02-02
  • webpack4 配置 ssr 環(huán)境遇到“document is not defined”

    webpack4 配置 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
  • 微信小程序彩票號(hào)碼生成器

    微信小程序彩票號(hào)碼生成器

    這篇文章主要為大家詳細(xì)介紹了微信小程序彩票號(hào)碼生成器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • 基于JavaScript實(shí)現(xiàn)留言板功能

    基于JavaScript實(shí)現(xiàn)留言板功能

    這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)留言板功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-03-03

最新評(píng)論