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

iKcamp發表於2017-10-24

原文網址 : https://juejin.im/post/59eeaddd6fb9a045167c5eb2

微信小程式

§ 列表 - 開發準備

本文配套視訊地址： v.qq.com/x/page/f055…

開始前請把 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 檔案：

<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
}
複製程式碼