日本大香伊蕉在人线国产,日日摸日日碰夜夜爽歪歪

无码人妻精品一区二区蜜桃百度,日本猛少妇色xxxxx猛交,免费无码黄真人影片在线,亚洲a成人午夜天堂

11月

微信小程序教學(xué)第三章（含視頻）：小程序中級實(shí)戰(zhàn)教程：列表

1463

§ 列表 - 開發(fā)準(zhǔn)備

本文配套視頻地址：

v.qq.com/x/page/f055…

開始前請把 ch3-1 分支中的 code/ 目錄導(dǎo)入微信開發(fā)工具

這一章主要會教大家如何用小程序制作一個(gè)可以無限加載的列表。希望大家能通過這個(gè)例子掌握制作各種列表的原理。

無限列表加載的原理

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

當(dāng)然，這其中很重要的一點(diǎn)就是，涉及到請求就肯定會有等待，處理好請求時(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

{
  "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è)小的單位。制作我們的頁面如下，過程很簡單，就不再復(fù)述了，修改 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="">暫時(shí)沒有更多內(nèi)容</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
}

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

iKcamp官網(wǎng)：www.ikcamp.com

訪問官網(wǎng)更快閱讀全部免費(fèi)分享課程：《iKcamp出品｜全網(wǎng)較新｜微信小程序｜基于較新版1.0開發(fā)者工具之初中級培訓(xùn)教程分享》。

包含：文章、視頻、源代碼