當前位置：首頁 > 前端技术 > vue >内容正文

vue

vue小程序开发（四）首页推荐

發布時間：2024/3/13 vue 57 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue小程序开发（四）首页推荐小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

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

編寫首頁-推薦模塊

功能介紹

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

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

推薦-月份模塊

月份模塊標題樣式

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

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><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小程序开发（四）首页推荐的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： C# C++ 互操作：C++向C#输出不
下一篇：基于Java+SpringBoot+Vu