§ 列表 - 開發準備

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

無限列表載入的原理

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

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

我們的列表所提供的功能

1. 靜默載入
2. 標記已讀
3. 提供分享

涉及的核心技術和 API

1. wx:for 的用法
2. onReachBottom 的用法
3. wx.storage 的用法
4. wx.request 的用法
5. Promise
6. onShareAppMessage 的用法

我們將正式投入開發中，在這之前，我們修改 app.json 檔案，並修改如下：
1. 修改 pages 欄位，為小程式增加頁面配置
2. 修改 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 檔案：

<view class="wrapper">
    <view class="group">
        <view class="group-bar">
            <view class="group-title on">今日</view>
        </view>
        <view class="group-content">
            <view class="group-content-item">
                <view class="group-content-item-desc ellipsis-multi-line ellipsis-line-3">為什麼聰明人總能保持冷靜？</view>
                <image class="group-content-item-img" mode="aspectFill" src="https://n1image.hjfile.cn/mh/2017/06/26/9ffa8c56cfd76cf5159011f4017f022e.jpg"/>
            </view>
        </view>
    </view>
    <view class="group">
        <view class="group-bar">
            <view class="group-title">06月27日</view>
        </view>
        <view class="group-content">
            <view class="group-content-item">
                <view class="group-content-item-desc ellipsis-multi-line ellipsis-line-3">為什麼聰明人總能保持冷靜？</view>
                <image class="group-content-item-img" mode="aspectFill" src="https://n1image.hjfile.cn/mh/2017/06/26/9ffa8c56cfd76cf5159011f4017f022e.jpg"/>
            </view>
        </view>
    </view>
    <view class="no-more" hidden="">暫時沒有更多內容</view>
</view>    

修改 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出品｜全網最新｜微信小程式｜基於最新版1.0開發者工具之初中級培訓教程分享》。
包含：文章、視訊、原始碼

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

iKcamp最新活動