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

資訊專欄INFORMATION COLUMN

微信小程序教學(xué)第四章第三節(jié)（含視頻）：小程序中級實戰(zhàn)教程：詳情-功能完善

phodal / 1514人閱讀

摘要：詳情功能完善本文配套視頻地址開始前請把分支中的目錄導(dǎo)入微信開發(fā)工具這一節(jié)中，我們把詳情的其他功能完善起來下一篇分享返回列表。

詳情 - 功能完善 
本文配套視頻地址：
https://v.qq.com/x/page/f0555...
開始前請把 ch4-3 分支中的 code/ 目錄導(dǎo)入微信開發(fā)工具  
這一節(jié)中，我們把詳情的其他功能完善起來：下一篇、 分享、 返回列表。


Step 1. 增加 下一篇 功能

增加 下一篇 的功能，我們需要在視圖中綁定一個事件，來觸發(fā)代碼中的響應(yīng)函數(shù)，此函數(shù)會調(diào)用接口，返回下一篇文章內(nèi)容數(shù)據(jù)。


1、修改視圖文件 detail.wxml，增加相應(yīng)的綁定事件


2、修改代碼 detail.js，增加綁定事件對應(yīng)的 next 及相關(guān)函數(shù)：

next(){
  this.requestNextContentId()
    .then(data => {
      let contentId = data && data.contentId || 0;
      this.init(contentId);
    })
},
requestNextContentId () {
  let pubDate = this.data.detailData && this.data.detailData.lastUpdateTime || ""
  let contentId = this.data.detailData && this.data.detailData.contentId || 0
  return util.request({
    url: "detail",
    mock: true,
    data: {
      tag:"微信熱門",
      pubDate: pubDate,
      contentId: contentId,
      langs: config.appLang || "en"
    }
  })
  .then(res => {
    if (res && res.status === 0 && res.data && res.data.contentId) {
      util.log(res)
      return res.data
    } else {
      util.alert("提示", "沒有更多文章了!")
      return null
    }
  })
}


大概介紹下這兩個函數(shù)：
點擊觸發(fā) next 函數(shù)，它會先調(diào)用 requestNextContentId，通過把當(dāng)前文章的 lastUpdateTime 和 contentId 參數(shù)傳遞給后端，后端會返回下一篇文章的 contentId，這樣我們就知道了文章 Id，然后就像剛開始一樣，把 contentId 再次傳遞給 init(contentId) 函數(shù)，獲取文章的詳情數(shù)據(jù)，然后是渲染視圖…… ?


這個時候，可能你已經(jīng)發(fā)現(xiàn)了一個用戶體驗上的 bug：當(dāng)頁面滾動到一定程度后點擊下一篇，新的頁面沒有滾動到頂部。所以我們需要修復(fù)這個 bug，當(dāng)文章更新后，正常情況下，頁面應(yīng)該滾動到頂部，也就是滾動條在最開始位置。現(xiàn)在我們開始修復(fù)它： ?


scroll-view 組件有個屬性 scroll-top，這個屬性代表著滾動條當(dāng)前的位置，也就是說，當(dāng)它的值為 0 時候，滾動條在最頂部，所以我們需要在數(shù)據(jù) data 中記錄這個值，當(dāng)需要文章滾動到頁面頂部時候，我們只需要修改 scroll-top 的值就可以了。
這里我們用 scrollTop 來表示：

// 修改 detail.js 的數(shù)據(jù) data
data:{
  scrollTop: 0,
  detailData: {}
}


修改視圖文件，注意增加 enable-back-to-top 屬性，作用就不解釋了，直接看屬性名的單詞應(yīng)該就明白：


當(dāng)我們需要文章返回到頂部時候，只要設(shè)置這個變量值就可以了。這里我們對賦值操作提取出多帶帶的函數(shù)：

goTop () {
  this.setData({
    scrollTop: 0
  })
}


在函數(shù) init() 中調(diào)用：

init (contentId) {
  if (contentId) {
    this.goTop()
    this.requestDetail(contentId)
        .then(data => {
          this.configPageData(data);
        })
        //調(diào)用wxparse
        .then(()=>{
          this.articleRevert();
        });
  }
}


Step 2. 增加 分享 功能

調(diào)用小程序會對分享事件做監(jiān)聽，如果觸發(fā)分享功能后，監(jiān)聽事件會返回一個對象，包含了分享出去的信息內(nèi)容，并且可以分別對分享成功和分享失敗做處理


button 組件增加了 open-type="share" 屬性后，就可以觸發(fā) onShareAppMessage 監(jiān)聽事件：

onShareAppMessage () {
  let title = this.data.detailData && this.data.detailData.title || config.defaultShareText;
  let contentId = this.data.detailData && this.data.detailData.contentId || 0;
  return {
    // 分享出去的內(nèi)容標(biāo)題
    title: title,

    // 用戶點擊分享出去的內(nèi)容，跳轉(zhuǎn)的地址
    // contentId為文章id參數(shù)；share參數(shù)作用是說明用戶是從分享出去的地址進(jìn)來的，我們后面會用到
    path: `/pages/detail/detail?share=1&contentId=${contentId}`,
    
    // 分享成功
    success: function(res) {},
    
    // 分享失敗
    fail: function(res) {}
  }
},


這里需要我們注意下，此接口對部分版本不支持，所以如果版本不支持時候，我們要給用戶一個提示信息。所以我們需要給分享按鈕另外綁定一個點擊事件，如果不支持的話，提示用戶：

notSupportShare () {
  // deviceInfo 是用戶的設(shè)備信息，我們在 app.js 中已經(jīng)獲取并保存在 globalData 中
  let device = app.globalData.deviceInfo;
  let sdkVersion = device && device.SDKVersion || "1.0.0";
  return /1.0.0|1.0.1|1.1.0|1.1.1/.test(sdkVersion);
},
share () {
  if (this.notSupportShare()) {
    wx.showModal({
      title: "提示",
      content: "您的微信版本較低，請點擊右上角分享"
    })
  }
}


在視圖中綁定 share 監(jiān)聽事件：


Step 3. 增加 返回列表 功能

我們需要在 detail.js 中增加一個返回列表的函數(shù)，然后視圖中綁定觸發(fā)事件

// detail.js 增加以下內(nèi)容
Page({
  back(){
    wx.navigateBack()
  }
})


在視圖中綁定事件：


由于 wx.navigateBack 相當(dāng)于瀏覽器的 history，通過瀏覽記錄返回的。那么如果用戶并不是從列表進(jìn)來的，比如是從分享出去的詳情打開呢？這時候記錄是不存在的。


如果是通過分享進(jìn)來的，有帶進(jìn)來參數(shù) share=1，如 step 2 中的分享功能，那么我們在剛進(jìn)到頁面時候，就可以通過 share=1 是否存在來標(biāo)識出來：

onLoad (option) {
  let id = option.contentId || 0;
  this.setData({
    isFromShare: !!option.share
  });
  this.init(id);
},


然后修改 back 函數(shù)，如果是從分享入口進(jìn)來的，那么我們就通過導(dǎo)航的方式來返回列表；如果不是，就正常的通過加載記錄來返回：

// detail.js 增加以下內(nèi)容
Page({
  back(){
    if (this.data.isFromShare) {
      wx.navigateTo({
        url: "../index/index"
      })
    } else {
      wx.navigateBack()  
    }
  }
})


至此，我們簡單的小程序?qū)崙?zhàn)已經(jīng)完成！！！

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


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



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

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


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

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/89492.html

相關(guān)文章

  • 微信小程序教學(xué)第四章第三節(jié)（含視頻）：小程序中級實戰(zhàn)教程：詳情-功能完善

    摘要：詳情功能完善本文配套視頻地址開始前請把分支中的目錄導(dǎo)入微信開發(fā)工具這一節(jié)中，我們把詳情的其他功能完善起來下一篇分享返回列表。 詳情 - 功能完善 本文配套視頻地址：https://v.qq.com/x/page/f0555... 開始前請把 ch4-3 分支中的 code/ 目錄導(dǎo)入微信開發(fā)工具 這一節(jié)中，我們把詳情的其他功能完善起來：下一篇、 分享、 返回列表。 Step 1....

    cocopeak 評論0 收藏0

  • 微信小程序教學(xué)第四章第三節(jié)（含視頻）：小程序中級實戰(zhàn)教程：詳情-功能完善

    摘要：詳情功能完善本文配套視頻地址開始前請把分支中的目錄導(dǎo)入微信開發(fā)工具這一節(jié)中，我們把詳情的其他功能完善起來下一篇分享返回列表。 詳情 - 功能完善 本文配套視頻地址：https://v.qq.com/x/page/f0555... 開始前請把 ch4-3 分支中的 code/ 目錄導(dǎo)入微信開發(fā)工具 這一節(jié)中，我們把詳情的其他功能完善起來：下一篇、 分享、 返回列表。 Step 1....

    fizz 評論0 收藏0

  • 微信小程序教學(xué)第三章第三節(jié)（含視頻）：小程序中級實戰(zhàn)教程：視圖與數(shù)據(jù)關(guān)聯(lián)

    摘要：因為循環(huán)中當(dāng)前項的下標(biāo)變量名默認(rèn)為，當(dāng)前項的變量名默認(rèn)為。包含文章視頻源代碼原創(chuàng)新書移動前端高效開發(fā)實戰(zhàn)已在亞馬遜京東當(dāng)當(dāng)開售。最新活動報名地址與天天練口語小程序總榜排名第四教育類排名第一的研發(fā)團(tuán)隊，面對面溝通交流。 § 視圖與數(shù)據(jù)關(guān)聯(lián) 本文配套視頻地址：https://v.qq.com/x/page/z0554... 開始前請把 ch3-3 分支中的 code/ 目錄導(dǎo)入微信開發(fā)工...

    haitiancoder 評論0 收藏0

  • 微信小程序教學(xué)第三章第三節(jié)（含視頻）：小程序中級實戰(zhàn)教程：視圖與數(shù)據(jù)關(guān)聯(lián)

    摘要：因為循環(huán)中當(dāng)前項的下標(biāo)變量名默認(rèn)為，當(dāng)前項的變量名默認(rèn)為。包含文章視頻源代碼原創(chuàng)新書移動前端高效開發(fā)實戰(zhàn)已在亞馬遜京東當(dāng)當(dāng)開售。最新活動報名地址與天天練口語小程序總榜排名第四教育類排名第一的研發(fā)團(tuán)隊，面對面溝通交流。 § 視圖與數(shù)據(jù)關(guān)聯(lián) 本文配套視頻地址：https://v.qq.com/x/page/z0554... 開始前請把 ch3-3 分支中的 code/ 目錄導(dǎo)入微信開發(fā)工...

    scola666 評論0 收藏0

  • 微信小程序教學(xué)第三章第三節(jié)（含視頻）：小程序中級實戰(zhàn)教程：視圖與數(shù)據(jù)關(guān)聯(lián)

    摘要：因為循環(huán)中當(dāng)前項的下標(biāo)變量名默認(rèn)為，當(dāng)前項的變量名默認(rèn)為。包含文章視頻源代碼原創(chuàng)新書移動前端高效開發(fā)實戰(zhàn)已在亞馬遜京東當(dāng)當(dāng)開售。最新活動報名地址與天天練口語小程序總榜排名第四教育類排名第一的研發(fā)團(tuán)隊，面對面溝通交流。 § 視圖與數(shù)據(jù)關(guān)聯(lián) 本文配套視頻地址：https://v.qq.com/x/page/z0554... 開始前請把 ch3-3 分支中的 code/ 目錄導(dǎo)入微信開發(fā)工...

    Nekron 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<