摘要:列表開發(fā)準(zhǔn)備本文配套視頻地址開始前請(qǐng)把分支中的目錄導(dǎo)入微信開發(fā)工具這一章主要會(huì)教大家如何用小程序制作一個(gè)可以無限加載的列表。包含文章視頻源代碼原創(chuàng)新書移動(dòng)前端高效開發(fā)實(shí)戰(zhàn)已在亞馬遜京東當(dāng)當(dāng)開售。
§ 列表 - 開發(fā)準(zhǔn)備
</>復(fù)制代碼
本文配套視頻地址:
https://v.qq.com/x/page/f0554...
無限列表加載的原理</>復(fù)制代碼
開始前請(qǐng)把 ch3-1 分支中的 code/ 目錄導(dǎo)入微信開發(fā)工具
這一章主要會(huì)教大家如何用小程序制作一個(gè)可以無限加載的列表。希望大家能通過這個(gè)例子掌握制作各種列表的原理。
其實(shí)所謂的無限列表就是將所有的數(shù)據(jù)分成一頁一頁的展示給用戶看。我們每次只請(qǐng)求一頁數(shù)據(jù)。當(dāng)我們判斷用戶閱讀完了這一頁之后,立馬請(qǐng)求下一頁的數(shù)據(jù),然后渲染出來給用戶看,這樣在用戶看來,就感覺一直有內(nèi)容可看。
當(dāng)然,這其中很重要的一點(diǎn)就是,涉及到請(qǐng)求就肯定會(huì)有等待,處理好請(qǐng)求時(shí)的 加載狀態(tài),給用戶以良好的體驗(yàn)也是非常重要的,否則如果網(wǎng)絡(luò)狀況不佳,而且沒有給用戶提示程序正在努力加載的話,用戶很容易就以為他看完了,或者程序死掉了。
我們的列表所提供的功能靜默加載
標(biāo)記已讀
提供分享
wx:for 的用法
onReachBottom 的用法
wx.storage 的用法
wx.request 的用法
Promise
onShareAppMessage 的用法
我們將正式投入開發(fā)中,在這之前,我們修改 app.json 文件,并修改如下:
修改 pages 字段,為小程序增加頁面配置
修改 window 字段,調(diào)整小程序的頭部樣式,也就是 navigationBar
</>復(fù)制代碼
{
"pages":[
"pages/index/index",
"pages/detail/detail"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#4abb3b",
"navigationBarTitleText": "iKcamp英語學(xué)習(xí)",
"backgroundColor": "#f8f8f8",
"navigationBarTextStyle":"white"
},
"netWorkTimeout": {
"request": 10000,
"connectSocket": 10000,
"uploadFile": 10000,
"downloadFile": 10000
},
"debug": true
}
現(xiàn)在準(zhǔn)備工作已經(jīng)全部到位,我們開始列表頁面的制作過程。
可以預(yù)覽下我們的最終制作效果圖:
分析下頁面,很明顯,日期是一個(gè)頁面結(jié)構(gòu)單位,一個(gè)單位里面的每篇文章也是一個(gè)小的單位。制作我們的頁面如下,過程很簡(jiǎn)單,就不再復(fù)述了,修改 index.wxml 文件:
</>復(fù)制代碼
今日
為什么聰明人總能保持冷靜?
06月27日
為什么聰明人總能保持冷靜?
暫時(shí)沒有更多內(nèi)容
修改 index.wxss 文件:
</>復(fù)制代碼
.wrapper .group {
padding: 0 36rpx 10rpx 36rpx;
background: #fff;
margin-bottom: 16rpx
}
.wrapper .group-bar {
height: 114rpx;
text-align: center
}
.wrapper .group-title {
position: relative;
display: inline-block;
padding: 0 12rpx;
height: 40rpx;
line-height: 40rpx;
border-radius: 4rpx;
border: solid 1rpx #e0e0e2;
font-size: 28rpx;
color: #ccc;
margin-top: 38rpx;
overflow: visible
}
.wrapper .group-title:after,.wrapper .group-title:before {
content: "";
top: 18rpx;
position: absolute;
width: 32rpx;
height: 1rpx;
transform: scaleY(.5);
border-bottom: solid 1px #efefef
}
.wrapper .group-title:before {
left: -56rpx
}
.wrapper .group-title:after {
right: -56rpx
}
.wrapper .group-title.on {
border: solid 1rpx #ffc60e;
color: #ffc60e
}
.wrapper .group-title.on:after,.wrapper .group-title.on:before {
border-bottom: solid 1px #ffc60e
}
.wrapper .group-content-item {
position: relative;
width: 100%;
height: 194rpx;
margin-bottom: 28rpx
}
.wrapper .group-content-item-desc {
font-size: 36rpx;
font-weight: 500;
height: 156rpx;
line-height: 52rpx;
margin-right: 300rpx;
margin-top: 8rpx;
overflow: hidden;
color: #333
}
.wrapper .group-content-item-img {
position: absolute;
right: 0;
top: 0;
vertical-align: top;
width: 260rpx;
height: 194rpx
}
.wrapper .group-content-item.visited .group-content-item-desc {
color: #999
}
.wrapper .no-more {
height: 44rpx;
line-height: 44rpx;
font-size: 32rpx;
color: #ccc;
text-align: center;
padding: 20rpx 0
}
靜態(tài)頁面已經(jīng)制作完成,下一篇中,我們將帶著大家開發(fā)業(yè)務(wù)流程
</>復(fù)制代碼
iKcamp官網(wǎng):http://www.ikcamp.com
訪問官網(wǎng)更快閱讀全部免費(fèi)分享課程:《iKcamp出品|全網(wǎng)最新|微信小程序|基于最新版1.0開發(fā)者工具之初中級(jí)培訓(xùn)教程分享》。
包含:文章、視頻、源代碼
iKcamp最新活動(dòng)</>復(fù)制代碼
iKcamp原創(chuàng)新書《移動(dòng)Web前端高效開發(fā)實(shí)戰(zhàn)》已在亞馬遜、京東、當(dāng)當(dāng)開售。
</>復(fù)制代碼
報(bào)名地址:http://www.huodongxing.com/ev...
與“天天練口語”小程序總榜排名第四、教育類排名第一的研發(fā)團(tuán)隊(duì),面對(duì)面溝通交流。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/115576.html
摘要:列表開發(fā)準(zhǔn)備本文配套視頻地址開始前請(qǐng)把分支中的目錄導(dǎo)入微信開發(fā)工具這一章主要會(huì)教大家如何用小程序制作一個(gè)可以無限加載的列表。包含文章視頻源代碼原創(chuàng)新書移動(dòng)前端高效開發(fā)實(shí)戰(zhàn)已在亞馬遜京東當(dāng)當(dāng)開售。 § 列表 - 開發(fā)準(zhǔn)備 本文配套視頻地址:https://v.qq.com/x/page/f0554... showImg(https://segmentfault.com/img/bVXd4...
摘要:列表開發(fā)準(zhǔn)備本文配套視頻地址開始前請(qǐng)把分支中的目錄導(dǎo)入微信開發(fā)工具這一章主要會(huì)教大家如何用小程序制作一個(gè)可以無限加載的列表。包含文章視頻源代碼原創(chuàng)新書移動(dòng)前端高效開發(fā)實(shí)戰(zhàn)已在亞馬遜京東當(dāng)當(dāng)開售。 § 列表 - 開發(fā)準(zhǔn)備 本文配套視頻地址:https://v.qq.com/x/page/f0554... showImg(https://segmentfault.com/img/bVXd4...
摘要:微信小程序課程,面向所有具備前端基礎(chǔ)知識(shí)的同學(xué)閱讀要求讀者需要具備但不限于以下技能更佳一共四部分十五小節(jié),適合七天的訓(xùn)練營(yíng)。 ?? 微信小程序課程,面向所有具備前端基礎(chǔ)知識(shí)的同學(xué) ?? 閱讀要求 讀者需要具備但不限于以下技能 HTML JavaScript es6更佳 CSS 一共四部分十五小節(jié),適合七天的訓(xùn)練營(yíng)。 從現(xiàn)在開始,我假裝你已經(jīng)掌握了 html、 css以及 ES6...
摘要:微信小程序課程,面向所有具備前端基礎(chǔ)知識(shí)的同學(xué)閱讀要求讀者需要具備但不限于以下技能更佳一共四部分十五小節(jié),適合七天的訓(xùn)練營(yíng)。 ?? 微信小程序課程,面向所有具備前端基礎(chǔ)知識(shí)的同學(xué) ?? 閱讀要求 讀者需要具備但不限于以下技能 HTML JavaScript es6更佳 CSS 一共四部分十五小節(jié),適合七天的訓(xùn)練營(yíng)。 從現(xiàn)在開始,我假裝你已經(jīng)掌握了 html、 css以及 ES6...
摘要:微信小程序課程,面向所有具備前端基礎(chǔ)知識(shí)的同學(xué)閱讀要求讀者需要具備但不限于以下技能更佳一共四部分十五小節(jié),適合七天的訓(xùn)練營(yíng)。 ?? 微信小程序課程,面向所有具備前端基礎(chǔ)知識(shí)的同學(xué) ?? 閱讀要求 讀者需要具備但不限于以下技能 HTML JavaScript es6更佳 CSS 一共四部分十五小節(jié),適合七天的訓(xùn)練營(yíng)。 從現(xiàn)在開始,我假裝你已經(jīng)掌握了 html、 css以及 ES6...
閱讀 952·2021-09-26 09:55
閱讀 3205·2021-09-22 15:36
閱讀 2989·2021-09-04 16:48
閱讀 3148·2021-09-01 11:41
閱讀 2599·2019-08-30 13:49
閱讀 1497·2019-08-29 18:46
閱讀 3553·2019-08-29 17:28
閱讀 3434·2019-08-29 14:11