微信小程序教學第三章（含視頻）：小程序中級實戰教程：列表-靜態頁面制作

shaonbean 發布于2019-08-01 17:51 / 1939人閱讀

摘要：列表開發準備本文配套視頻地址開始前請把分支中的目錄導入微信開發工具這一章主要會教大家如何用小程序制作一個可以無限加載的列表。包含文章視頻源代碼原創新書移動前端高效開發實戰已在亞馬遜京東當當開售。

§ 列表 - 開發準備

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

開始前請把 ch3-1 分支中的 code/ 目錄導入微信開發工具
這一章主要會教大家如何用小程序制作一個可以無限加載的列表。希望大家能通過這個例子掌握制作各種列表的原理。

無限列表加載的原理

其實所謂的無限列表就是將所有的數據分成一頁一頁的展示給用戶看。我們每次只請求一頁數據。當我們判斷用戶閱讀完了這一頁之后，立馬請求下一頁的數據，然后渲染出來給用戶看，這樣在用戶看來，就感覺一直有內容可看。

當然，這其中很重要的一點就是，涉及到請求就肯定會有等待，處理好請求時的 加載狀態，給用戶以良好的體驗也是非常重要的，否則如果網絡狀況不佳，而且沒有給用戶提示程序正在努力加載的話，用戶很容易就以為他看完了，或者程序死掉了。

我們的列表所提供的功能

靜默加載

標記已讀

提供分享

涉及的核心技術和 API

wx:for 的用法

onReachBottom 的用法

wx.storage 的用法

wx.request 的用法

Promise

onShareAppMessage 的用法

我們將正式投入開發中，在這之前，我們修改 app.json 文件，并修改如下：

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

修改 window 字段，調整小程序的頭部樣式，也就是 navigationBar

{
  "pages":[
    "pages/index/index",
    "pages/detail/detail"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#4abb3b",
    "navigationBarTitleText": "iKcamp英語學習",
    "backgroundColor": "#f8f8f8",
    "navigationBarTextStyle":"white"
  },
  "netWorkTimeout": {
    "request": 10000,
    "connectSocket": 10000,
    "uploadFile": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

現在準備工作已經全部到位，我們開始列表頁面的制作過程。

可以預覽下我們的最終制作效果圖：

分析下頁面，很明顯，日期是一個頁面結構單位，一個單位里面的每篇文章也是一個小的單位。制作我們的頁面如下，過程很簡單，就不再復述了，修改 index.wxml 文件：


    
        
            今日
        
        
            
                為什么聰明人總能保持冷靜？
                
            
        
    
    
        
            06月27日
        
        
            
                為什么聰明人總能保持冷靜？
                
            
        
    
    暫時沒有更多內容

修改 index.wxss 文件：

.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
}

靜態頁面已經制作完成，下一篇中，我們將帶著大家開發業務流程

iKcamp官網：http://www.ikcamp.com

訪問官網更快閱讀全部免費分享課程：《iKcamp出品｜全網最新｜微信小程序｜基于最新版1.0開發者工具之初中級培訓教程分享》。
包含：文章、視頻、源代碼

iKcamp原創新書《移動Web前端高效開發實戰》已在亞馬遜、京東、當當開售。

iKcamp最新活動

報名地址：http://www.huodongxing.com/ev...

與“天天練口語”小程序總榜排名第四、教育類排名第一的研發團隊，面對面溝通交流。

GPU云服務器云服務器不用編程制作微信小程序視頻 vps制作微信小程序工具類微信小程序怎么制作微信小程序實時音視頻

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51418.html

微信小程序教學第三章（含視頻）：小程序中級實戰教程：列表-靜態頁面制作

摘要：列表開發準備本文配套視頻地址開始前請把分支中的目錄導入微信開發工具這一章主要會教大家如何用小程序制作一個可以無限加載的列表。包含文章視頻源代碼原創新書移動前端高效開發實戰已在亞馬遜京東當當開售。 § 列表 - 開發準備本文配套視頻地址：https://v.qq.com/x/page/f0554... showImg(https://segmentfault.com/img/bVXd4...

宋華 2019-08-21 17:13 評論0 收藏0
微信小程序教學第三章（含視頻）：小程序中級實戰教程：列表-靜態頁面制作

摘要：列表開發準備本文配套視頻地址開始前請把分支中的目錄導入微信開發工具這一章主要會教大家如何用小程序制作一個可以無限加載的列表。包含文章視頻源代碼原創新書移動前端高效開發實戰已在亞馬遜京東當當開售。 § 列表 - 開發準備本文配套視頻地址：https://v.qq.com/x/page/f0554... showImg(https://segmentfault.com/img/bVXd4...

CHENGKANG 2019-08-30 13:49 評論0 收藏0
iKcamp出品微信小程序教學共5章16小節匯總(含視頻)

摘要：微信小程序課程，面向所有具備前端基礎知識的同學閱讀要求讀者需要具備但不限于以下技能更佳一共四部分十五小節，適合七天的訓練營。 ?? 微信小程序課程，面向所有具備前端基礎知識的同學 ?? 閱讀要求讀者需要具備但不限于以下技能 HTML JavaScript es6更佳 CSS 一共四部分十五小節，適合七天的訓練營。從現在開始，我假裝你已經掌握了 html、 css以及 ES6...

elliott_hu 2019-08-21 17:28 評論0 收藏0
iKcamp出品微信小程序教學共5章16小節匯總(含視頻)

摘要：微信小程序課程，面向所有具備前端基礎知識的同學閱讀要求讀者需要具備但不限于以下技能更佳一共四部分十五小節，適合七天的訓練營。 ?? 微信小程序課程，面向所有具備前端基礎知識的同學 ?? 閱讀要求讀者需要具備但不限于以下技能 HTML JavaScript es6更佳 CSS 一共四部分十五小節，適合七天的訓練營。從現在開始，我假裝你已經掌握了 html、 css以及 ES6...

paney129 2019-08-01 17:56 評論0 收藏0
iKcamp出品微信小程序教學共5章16小節匯總(含視頻)

摘要：微信小程序課程，面向所有具備前端基礎知識的同學閱讀要求讀者需要具備但不限于以下技能更佳一共四部分十五小節，適合七天的訓練營。 ?? 微信小程序課程，面向所有具備前端基礎知識的同學 ?? 閱讀要求讀者需要具備但不限于以下技能 HTML JavaScript es6更佳 CSS 一共四部分十五小節，適合七天的訓練營。從現在開始，我假裝你已經掌握了 html、 css以及 ES6...

lmxdawn 2019-08-29 13:45 評論0 收藏0