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

資訊專欄INFORMATION COLUMN

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

宋華 / 2457人閱讀

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

開始前請(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 

{
  "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è)小的單位。制作我們的頁面如下，過程很簡(jiǎn)單，就不再復(fù)述了，修改 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
}

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

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


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



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

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


與“天天練口語”小程序總榜排名第四、教育類排名第一的研發(fā)團(tuán)隊(duì)，面對(duì)面溝通交流。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/89274.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...

    CHENGKANG 評(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)練營。 ?? 微信小程序課程，面向所有具備前端基礎(chǔ)知識(shí)的同學(xué) ?? 閱讀要求 讀者需要具備但不限于以下技能 HTML JavaScript es6更佳 CSS 一共四部分十五小節(jié)，適合七天的訓(xùn)練營。 從現(xiàn)在開始，我假裝你已經(jīng)掌握了 html、 css以及 ES6...

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

  • iKcamp出品微信小程序教學(xué)共5章16小節(jié)匯總(含視頻)

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

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

  • iKcamp出品微信小程序教學(xué)共5章16小節(jié)匯總(含視頻)

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

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

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

0條評(píng)論

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