国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

微信小程序教學(xué)第三章(含視頻):小程序中級(jí)實(shí)戰(zhàn)教程:列表-靜態(tài)頁面制作

CHENGKANG / 2598人閱讀

摘要:列表開發(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ù)制代碼

  1. 本文配套視頻地址:
    https://v.qq.com/x/page/f0554...

</>復(fù)制代碼

  1. 開始前請(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)記已讀

提供分享


涉及的核心技術(shù)和 API

wx:for 的用法

onReachBottom 的用法

wx.storage 的用法

wx.request 的用法

Promise

onShareAppMessage 的用法

我們將正式投入開發(fā)中,在這之前,我們修改 app.json 文件,并修改如下:

修改 pages 字段,為小程序增加頁面配置

修改 window 字段,調(diào)整小程序的頭部樣式,也就是 navigationBar

</>復(fù)制代碼

  1. {
  2. "pages":[
  3. "pages/index/index",
  4. "pages/detail/detail"
  5. ],
  6. "window":{
  7. "backgroundTextStyle":"light",
  8. "navigationBarBackgroundColor": "#4abb3b",
  9. "navigationBarTitleText": "iKcamp英語學(xué)習(xí)",
  10. "backgroundColor": "#f8f8f8",
  11. "navigationBarTextStyle":"white"
  12. },
  13. "netWorkTimeout": {
  14. "request": 10000,
  15. "connectSocket": 10000,
  16. "uploadFile": 10000,
  17. "downloadFile": 10000
  18. },
  19. "debug": true
  20. }

現(xiàn)在準(zhǔn)備工作已經(jīng)全部到位,我們開始列表頁面的制作過程。

可以預(yù)覽下我們的最終制作效果圖:

分析下頁面,很明顯,日期是一個(gè)頁面結(jié)構(gòu)單位,一個(gè)單位里面的每篇文章也是一個(gè)小的單位。制作我們的頁面如下,過程很簡(jiǎn)單,就不再復(fù)述了,修改 index.wxml 文件:

</>復(fù)制代碼

  1. 今日
  2. 為什么聰明人總能保持冷靜?
  3. 06月27日
  4. 為什么聰明人總能保持冷靜?

修改 index.wxss 文件:

</>復(fù)制代碼

  1. .wrapper .group {
  2. padding: 0 36rpx 10rpx 36rpx;
  3. background: #fff;
  4. margin-bottom: 16rpx
  5. }
  6. .wrapper .group-bar {
  7. height: 114rpx;
  8. text-align: center
  9. }
  10. .wrapper .group-title {
  11. position: relative;
  12. display: inline-block;
  13. padding: 0 12rpx;
  14. height: 40rpx;
  15. line-height: 40rpx;
  16. border-radius: 4rpx;
  17. border: solid 1rpx #e0e0e2;
  18. font-size: 28rpx;
  19. color: #ccc;
  20. margin-top: 38rpx;
  21. overflow: visible
  22. }
  23. .wrapper .group-title:after,.wrapper .group-title:before {
  24. content: "";
  25. top: 18rpx;
  26. position: absolute;
  27. width: 32rpx;
  28. height: 1rpx;
  29. transform: scaleY(.5);
  30. border-bottom: solid 1px #efefef
  31. }
  32. .wrapper .group-title:before {
  33. left: -56rpx
  34. }
  35. .wrapper .group-title:after {
  36. right: -56rpx
  37. }
  38. .wrapper .group-title.on {
  39. border: solid 1rpx #ffc60e;
  40. color: #ffc60e
  41. }
  42. .wrapper .group-title.on:after,.wrapper .group-title.on:before {
  43. border-bottom: solid 1px #ffc60e
  44. }
  45. .wrapper .group-content-item {
  46. position: relative;
  47. width: 100%;
  48. height: 194rpx;
  49. margin-bottom: 28rpx
  50. }
  51. .wrapper .group-content-item-desc {
  52. font-size: 36rpx;
  53. font-weight: 500;
  54. height: 156rpx;
  55. line-height: 52rpx;
  56. margin-right: 300rpx;
  57. margin-top: 8rpx;
  58. overflow: hidden;
  59. color: #333
  60. }
  61. .wrapper .group-content-item-img {
  62. position: absolute;
  63. right: 0;
  64. top: 0;
  65. vertical-align: top;
  66. width: 260rpx;
  67. height: 194rpx
  68. }
  69. .wrapper .group-content-item.visited .group-content-item-desc {
  70. color: #999
  71. }
  72. .wrapper .no-more {
  73. height: 44rpx;
  74. line-height: 44rpx;
  75. font-size: 32rpx;
  76. color: #ccc;
  77. text-align: center;
  78. padding: 20rpx 0
  79. }

靜態(tài)頁面已經(jīng)制作完成,下一篇中,我們將帶著大家開發(fā)業(yè)務(wù)流程

</>復(fù)制代碼

  1. iKcamp官網(wǎng):http://www.ikcamp.com

  2. 訪問官網(wǎng)更快閱讀全部免費(fèi)分享課程:《iKcamp出品|全網(wǎng)最新|微信小程序|基于最新版1.0開發(fā)者工具之初中級(jí)培訓(xùn)教程分享》。
    包含:文章、視頻、源代碼

</>復(fù)制代碼

  1. iKcamp原創(chuàng)新書《移動(dòng)Web前端高效開發(fā)實(shí)戰(zhàn)》已在亞馬遜、京東、當(dāng)當(dāng)開售。

iKcamp最新活動(dòng)

</>復(fù)制代碼

  1. 報(bào)名地址:http://www.huodongxing.com/ev...

  2. “天天練口語”小程序總榜排名第四、教育類排名第一的研發(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

相關(guān)文章

  • 程序教學(xué)三章視頻):程序中級(jí)實(shí)戰(zhàn)教程列表-靜態(tài)頁面制作

    摘要:列表開發(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...

    宋華 評(píng)論0 收藏0
  • 程序教學(xué)三章視頻):程序中級(jí)實(shí)戰(zhàn)教程列表-靜態(tài)頁面制作

    摘要:列表開發(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...

    shaonbean 評(píng)論0 收藏0
  • iKcamp出品程序教學(xué)共5章16節(jié)匯總(視頻)

    摘要:微信小程序課程,面向所有具備前端基礎(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...

    elliott_hu 評(píng)論0 收藏0
  • iKcamp出品程序教學(xué)共5章16節(jié)匯總(視頻)

    摘要:微信小程序課程,面向所有具備前端基礎(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...

    paney129 評(píng)論0 收藏0
  • iKcamp出品程序教學(xué)共5章16節(jié)匯總(視頻)

    摘要:微信小程序課程,面向所有具備前端基礎(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...

    lmxdawn 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<