vue小程序開發（四）首頁 推薦

• • 編寫 首頁-推薦 模塊
  • 推薦-最頂部模塊
  • 推薦-月份模塊
  • • • 月份模塊標題樣式
  • 推薦-熱門模塊
  • • 基本布局
    • 使用scroll-view改造容器
    • • 分頁功能分析
    • 實現頭部固定
    • 分頁
    • 實現底部觸發
  • 首頁 - 專輯
  • • 功能分析
    • 輪播圖實現
    • 列表數據渲染
  • 接口文檔
  • 出錯
  • • net::ERR_PROXY_CONNECTION_FAILED

編寫 首頁-推薦 模塊

功能介紹

• 接口文檔
• 數據動態渲染
• moment.js 的使用
• “熱門”列表的基于scroll-view的分頁加載

在組件中能用生命周期組件沒有太多,使用mouted(){}

推薦-最頂部模塊

接口調用（新）

url:"http://service.picasso.adesk.com/v3/homepage/vertical", data:{limit:30,order:"hot",skip:0 }

接口調用結果

home-recommend/index.vue

<template> <view><!-- 推薦 開始 --><view class="recommend_wrap"><view class="recommend_item" v-for="item in recommends":key="item.id"><image :src="item.thumb"></image></view></view><!-- 推薦 結束 --></view></template><script>export default {data(){return{//推薦列表recommends:[]}},mounted(){this.request({url:"http://service.picasso.adesk.com/v3/homepage/vertical",data:{limit:30,order:"hot",skip:0}}).then(result=>{console.log(result);this.recommends=result.res.homepage[1].items;})}} </script><style></style>

結果

home-recommend/index.vue

<template> <view><!-- 推薦 開始 --><view class="recommend_wrap"><view class="recommend_item" v-for="item in recommends":key="item.id"><image mode="widthFix" :src="item.thumb"></image></view></view><!-- 推薦 結束 --></view></template><script>export default {data(){return{//推薦列表recommends:[]}},mounted(){this.request({url:"http://service.picasso.adesk.com/v3/homepage/vertical",data:{limit:30,order:"hot",skip:0}}).then(result=>{console.log(result);this.recommends=result.res.homepage[1].items;})}} </script><style lang="scss" scoped>.recommend_wrap{//flex布局display:flex;flex-wrap: wrap;.recommend_item{width: 50%;border: 5rpx solid #fff;}}</style>

mode=“widthFix” 圖片高度自適應 》》 知識點隸屬于微信小程序基礎

css 中的 flex 布局需要掌握，排版一般都會用到

結果

推薦-月份模塊

月份模塊標題樣式

省略了上方四張圖片的相關代碼

home-recommend/index.vue

<template> <view><!-- 月份開始 --><view class="moneths_wrap"><view class="moneths_title"><view class="moneths_title_info"><view class="moneths_info"><text>18 /</text>01 月</view><view class="moneths_text">你負責美麗就好</view></view><view class="moneths_title_more">更多 > </view></view><view class="moneths_content"></view></view><!-- 月份結束 --> </view> </template><style lang="scss" scoped>.moneths_wrap {.moneths_title {display: flex;// space 屬性作用就是左邊一塊 右邊一塊justify-content: space-between;padding:20rpx;.moneths_title_info {color:$color;font-size:30rpx;font-weight: 600;// 使得兩行 變成 一行display: flex;.moneths_info {text{font-size: 36rpx;}}.moneths_text {font-size: 34rpx;color:#666;margin-left: 30rpx;}}.moneths_title_more {font-size: 24rpx;color:$color;}}.moneths_content {}} </style>

效果

選中代碼塊 快捷鍵ctrl+shift+p 顯示插件提示框，選擇generate css tress即可

快捷鍵 ctrl + D 選中view 刪除所有的view

src/uni.scss

$color:#d52a7e; npm install moment

http://momentjs.cn/

月份格式輸出

<template><view><!-- 月份開始 --><view class="moneths_wrap"><view class="moneths_title"><view class="moneths_title_info"><view class="moneths_info"><text>{{monthes.DD}} /</text>{{monthes.MM}} 月</view><view class="moneths_text">{{monthes.title}}</view></view><view class="moneths_title_more">更多 > </view></view><view class="moneths_content"></view></view><!-- 月份結束 --></view> </template> <script> //導入 moment.js import moment from "moment"; export default {data() {return {//推薦列表recommends: [],//月份 對象monthes: {}};},mounted() {this.request({url: "http://service.picasso.adesk.com/v3/homepage/vertical",data: {limit: 30,order: "hot",skip: 0},}).then((result) => {console.log(result);//推薦模塊this.recommends = result.res.homepage[1].items;//月份模塊this.monthes = result.res.homepage[2];//將時間戳 改成 18號/月 moment.jsthis.monthes.MM = moment(this.monthes.stime).format("MM");this.monthes.DD = moment(this.monthes.stime).format("DD");console.log(this.monthes);});}, }; </script>

大圖變縮略圖

圖片渲染

image標簽中的mode

aspectFit 等比例拉伸

aspectFill 填滿

優化月份模塊

問題

當請求未返回時顯示undefined，優化便是解決這個問題

做判斷

快捷鍵 替換代碼

ctrl + h

推薦-熱門模塊

基本布局

response數據格式：

代碼：

home-recommend/index.vue

<template><view v-if="recommends.length > 0"><!-- 熱門 開始 --><view class="hots_wrap"><view class="hots_title"><text>熱門</text></view><view class="hots_content"><view class="hot_item" v-for="item in hots" :key="item.id"><image mode="widthFix" :src="item.thumb"></image></view></view></view><!-- 熱門 結束 --></view> </template> <script> import moment from "moment"; export default {data() {return {// 熱門hots: [],};},mounted() {this.request({url: "http://service.picasso.adesk.com/v3/homepage/vertical",data: {limit: 30,order: "hot",skip: 0,},}).then((result) => {//獲取熱門數據的列表this.hots = result.res.vertical;});}, }; </script> <style>.hots_wrap {.hots_title {padding: 20rpx;text {border-left:10rpx solid $color;padding-left: 20rpx;font-size: 34rpx;font-weight: 600;}}.hots_content {display: flex;flex-wrap: wrap;.hot_item {width: 33.33%;border: 3rpx solid #fff;image {}}}} </style>

使用scroll-view改造容器

分頁功能分析

• 使用 scroll-view 標簽充當分頁的容器（小程序內置標簽
• 綁定滾動條觸底時間 scrolltolower
• 實現分頁邏輯

實現頭部固定

目前效果：

目標效果：

需要實現頭部固定變不變

思路：

給容器定個高度，應該是整個屏幕的高?頭部的高，底部的bar不用管，因為小程序把底部剔除出來了

過程：

將根標簽改成scroll-view，加入scroll-y表示上下滑動

固定上方頭部

注意 - 號左右有空格鍵

100vh 代表整個屏幕的高度，此處忽略底部bar

分頁

分頁主要參數：

skip ： 跳過多少條

• 當我們請求第一頁的時候，跳過0條
• 當請求第二頁的時候，需要跳過30條
• 當請求第三頁數據時，需要跳過60條

提取出來 ，方便改動

data() {return {//推薦列表recommends: [],//月份 對象monthes: {},// 熱門hots: [],//請求的參數params: {limit: 30,order: "hot",skip: 0,},//是否還有下一頁hasMore: true,}; }

實現底部觸發

底部觸發函數 handleToLower

@scrolltolower="handleToLower"

hasMore：表示是否還有數據

getList()：封裝了請求

handleToLower() {/*** 1 修改參數 skip += limit* 2 重新發送請求 getList()* 3 請求回來成功 hots 數據的疊加*/if (this.hasMore) {this.params.skip += this.params.limit;this.getList();} else {//彈窗提示用戶uni.showToast({title: "已經沒圖片啦",duration: 2000,});} },

getList()

獲得接口的數據

經過調試，發現視頻中 length的方法并不能判斷是否有圖片數據

通過數據觀察，發現當沒有數據的時候，接口中code的返回值為1，有數據的時候，接口的code的返回值為0

拼接熱門數據（es6）：this.hots = […this.hots, …result.res.vertical];

//獲取接口的數據 getList() {this.request({url: "http://service.picasso.adesk.com/v3/homepage/vertical",data: this.params,}).then((result) => {console.log(result);//判斷還有沒有下一頁數據if (result.code === 1) {this.hasMore = false;return;}//第一次發請求的時候if (this.recommends.length === 0) {//推薦模塊this.recommends = result.res.homepage[1].items;//月份模塊this.monthes = result.res.homepage[2];//將時間戳 改成 18號/月 moment.jsthis.monthes.MM = moment(this.monthes.stime).format("MM");this.monthes.DD = moment(this.monthes.stime).format("DD");console.log(this.monthes);}//獲取熱門數據的列表//改成數組拼接的方式 es6this.hots = [...this.hots, ...result.res.vertical];}); }

首頁 - 專輯

功能分析

• 使用 setNavigationBarTitle 修改 頁面標題
• 發送請求獲取數據
• 使用 swiper 輪播圖組件
• 使用 scroll-view 組件實現分頁
• 點擊跳轉到 專輯詳情頁

setNavigationBarTitle

在組件中動態修改主題

動態修改頁面標題

home-album/index.vue

mounted() {//修改頁面標題uni.setNavigationBarTitle({title:"專輯"}); }

專輯接口：

http://service.picasso.adesk.com/v1/wallpaper/album

輪播圖實現

<template><view><!-- swiper1 自動輪播 autoplay2 指示器 indicator-dots3 銜接輪播 circular4 swiper 默認高度 150px5 image默認的寬度 320px =》 基本樣式中 重置了 100%默認高度 240px6 計算圖片的寬度和高度的比例7 把圖片的比例也寫到 swiper標簽樣式8 默認寬高 100%--><!-- 輪播圖 開始 --><!-- 輪播圖結束 --><view class="album_swiper"><swiperautoplayindicator-dotscircular><swiper-itemv-for="item in banner":key="item.id"><image :src="item.thumb"></image></swiper-item></swiper></view></view> </template> <script>export default { data(){return{params:{limit:30,order:"new",skip:0},//輪播圖數組banner:[],//列表數組album:[]} } ,mounted() {//修改頁面標題uni.setNavigationBarTitle({title:"專輯"});this.getList();},methods:{//獲取接口的數據getList(){this.request({url:"http://service.picasso.adesk.com/v1/wallpaper/album",data:this.params}).then(result=>{console.log(result);this.banner = result.res.banner;this.album = result.res.album;})}} }; </script> <style lang="scss" scoped> .album_swiper{swiper{//750rpxheight: calc( 750rpx / 2.3);image{height: 100%;}} } </style>

列表數據渲染

接口文檔

P29

https://www.jianshu.com/p/fb1d1ad58a0b

https://www.showdoc.cc/414855720281749?page_id=3678621017219602

接口文檔 推薦: http://service.picasso.adesk.com/v3/homepage/vertical 專輯 http://service.picasso.adesk.com/v1/wallpaper/album 分類: http://service.picasso.adesk.com/v1/vertical/category 分類-最新-熱門 http://service.picasso.adesk.com/v1/vertical/category/i d / v e r t i c a l 專 輯 h t t p : / / s e r v i c e . p i c a s s o . a d e s k . c o m / v 1 / w a l l p a p e r / a l b u m 專 輯 ? 詳 情 h t t p : / / s e r v i c e . p i c a s s o . a d e s k . c o m / v 1 / w a l l p a p e r / a l b u m / {id}/vertical 專輯 http://service.picasso.adesk.com/v1/wallpaper/album 專輯-詳情 http://service.picasso.adesk.com/v1/wallpaper/album/id/vertical專輯http://service.picasso.adesk.com/v1/wallpaper/album專輯?詳情http://service.picasso.adesk.com/v1/wallpaper/album/{id}/wallpaper 圖片評論 http://service.picasso.adesk.com/v2/wallpaper/wallpaper/${id}/comment

出錯

net::ERR_PROXY_CONNECTION_FAILED

當處理一個錯誤超過一個小時，且錯誤不在代碼在環境，可以重新構建環境，而不是一直找錯！

總結

以上是生活随笔為你收集整理的vue小程序开发（四）首页 推荐的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。