🤵?♂? 個人主頁: @計算機魔術師
👨?💻 作者簡介：CSDN內容合伙人，全棧領域優質創作者。

🌐 推薦一款找工作神器網站: 點擊跳轉牛客網 |筆試題庫|面試經驗|實習招聘內推|

還沒有賬戶的小伙伴 速速點擊鏈接登錄注冊把！🎉🎉

該文章收錄專欄
? 2022微信小程序京東商城實戰 ?

文章目錄

• 一、新建tabBar分支（選讀*）
• 二、配置網絡請求（掛載$http)
• 三、輪播圖區域
• • • 3.1 主頁API
• 四、注意事項！：
• 五、渲染輪播圖UI結構
• 六、輪播圖點擊頁面跳轉

一、新建tabBar分支（選讀*）

之所以為了創建分支，也是養成良好的項目開發習慣，這樣在開放項目井井有條
也可以跳過本節內容，不影響閱讀觀感🌹

在根目錄下，右鍵打開bash
基于 master 分支在本地創建 home 子分支，用來開發和 home 相關的功能：

git checkout -b home

查看分支（前面有*代表著當前分支）

git branch

二、配置網絡請求（掛載$http)

由于平臺的限制，小程序項目中不支持 axios，而且原生的 wx.request() API 功能較為簡單，不支持攔截器等全局定制的功能。因此，建議在 uni-app 項目中使用 @escook/request-miniprogram 第三方包發起網絡數據請求。

請參考 @escook/request-miniprogram 的官方文檔進行安裝、配置、使用
官方文檔：https://www.npmjs.com/package/@escook/request-miniprogram

按照官方流程，我們首先安裝對應包，使用命令行工具cmd進入到項目根目錄下 進行初始化一個package.json文件

npm init -y

復制官網的導入命令輸入

npm install @escook/request-miniprogram

在入口文件進行相關配置main.js
導入對應包并進行掛載，以及定義 響應攔截器和請求響應器
(在uni-app開發中，盡量都是以uni作為頂級對象）

//導入網絡請求包 import {$http } from '@escook/request-miniprogram' //掛載 uni.$http = $http //設置請求地址的域名 $http.baseUrl = 'https://www.uinav.com' // 請求攔截器 $http.beforeRequest = function() {uni.showLoading({title: '數據加載中...',}); } // 響應攔截器 $http.afterRequest = function(){uni.hideLoading() }

三、輪播圖區域

請求輪播圖的數據
實現步驟：

在 data 中定義輪播圖的數組

在 onLoad 生命周期函數中調用獲取輪播圖數據的方法

在 methods 中定義獲取輪播圖數據的方法

3.1 主頁API

獲取首頁輪播圖數據：

• 請求路徑：https://請求域名/api/public/v1/home/swiperdata
• 請求方法：GET
• 請求參數

參數名參數說明備注

無

• 響應參數

參數名參數說明備注

image_src	圖片路徑
open_type	導航鏈接類型
navigator_url	導航鏈接路徑

• 響應數據參考

{"message": [{"image_src": "https://www.zhengzhicheng.cn/pyg/banner1.png","open_type": "navigate","goods_id": 129,"navigator_url": "/pages/goods_detail/main?goods_id=129"},{"image_src": "https://www.zhengzhicheng.cn/pyg/banner2.png","open_type": "navigate","goods_id": 395,"navigator_url": "/pages/goods_detail/main?goods_id=395"},{"image_src": "https://www.zhengzhicheng.cn/pyg/banner3.png","open_type": "navigate","goods_id": 38,"navigator_url": "/pages/goods_detail/main?goods_id=38"}],"meta": { "msg": "獲取成功", "status": 200 } }

在home.vue 文件 中

<script>export default {data() {return {// 定義數據swiperList: []};},onLoad() {// 調取方法，獲取輪播圖數據this.getSwiperList()},methods: {async getSwiperList() {// '/' 根目錄即為在main.js的文件配置的 baseUrl const res = await uni.$http.get('/api/public/v1/home/swiperdata')//輸出 數據console.log(res.data)}}} </script>

打印成功（獲取數據成功）

通過meta的status屬性值判斷是否 成功獲取數據

methods: {async getSwiperList() {// '/' 根目錄即為在main.js的文件配置的 baseUrl const res = await uni.$http.get('/api/public/v1/home/swiperdata')// 調取失敗彈出錯誤提示if (res.data.meta.status != 200) {uni.showToast({title: "數據拉取失敗", // 文字顯示'icon': "error", // 顯示錯誤圖標"duration": 1500 // 設置停留事件為 1.5s duration - 持續事件})// 將調用的數據 賦值this.swiperList = res.data.message}}}

賦值成功

四、注意事項！：

這里賦值不能像 原生小程序 調用 this.setData()使用，在小程序中可以使用this.data 更新數據不更新視圖和 thsi.setData({}) 數據和視圖同步更新（會重新加載數據渲染頁面），原理是因為在小程序中 渲染層和邏輯層無法直接數據共享，需要通過evalutejavascipt ，而setData將其封裝。

uni-app 框架 比 原生小程序 性能優化好得多， 在小程序中需要使用setData()方法實現差量數據跟新，如果不使用則代碼性能不好，那么在實現邏輯交換修改數據會麻煩得多，而uni-app則在底層實現自動差量數據更新，簡單而高性能。
uni-app 與 原生小程序 (很不錯文章）

五、渲染輪播圖UI結構

uswiper 快速生成 輪播代碼塊

• 使用 vue-for 動態循環輪播圖數組，循環動態綁定需要標簽屬性節點前都要加上 :（冒號:是 v-bind的縮寫，即動態綁定數據，后面可以跟變量或者變量表達式，如果沒有冒號的則為字符串，此時循環會無法顯示效果

<!-- 模板 --> <template><view><!-- 渲染輪播圖UI結構 --><swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"><!-- 類似python for i,j in object 得到對應項目i以及索引j --><swiper-item v-for="(item,i) in swiperList" :key="i"><view class="swiper-item"><image :src="item.image_src"></image></view></swiper-item></swiper></view> </template><!-- 樣式 --> <style lang="scss">swiper {height: 333rpx;.swiper-item,image {width: 100%;height: 100%;}} </style>

• 效果：
  

六、輪播圖點擊頁面跳轉

• 輪播圖UI結構的view標簽改為navigator標簽

由于navigator 標簽 是導航標簽，是按照內部組件的大小，分配頁面的
這里將view組件轉化為 navigator組件，并加上url屬性跳轉到商品頁，對其傳商品id參數

改造前：

<!-- 渲染輪播圖UI結構 --><swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"><!-- 類似python for i,j in object 得到對應項目i以及索引j --><swiper-item v-for="(item,i) in swiperList" :key="i"><view class="swiper-item"><image :src="item.image_src"></image></view></swiper-item></swiper>

改造后

<!-- 渲染輪播圖UI結構 --> <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"><!-- 類似python for i,j in object 得到對應項目i以及索引j --><swiper-item v-for="(item,i) in swiperList" :key="i"><!-- 拼接字符串進行動態傳參--!><navigator class="swiper-item" :url="'/subpackages/goods_detail/goods_detail?good_id=' + item.goods_id"><image :src="item.image_src"></image></navigator> </swiper-item></swiper>

• 注意事項！：
  由于是動態傳參，所以在配置url屬性中前面要加上分號:（:是v-bind的縮寫，不然無法跳轉頁面。

效果：

• 頁面也成功傳參
  
  ?謝謝你的閱讀，您的點贊和收藏就是我創造的最大動力！?

總結

以上是生活随笔為你收集整理的【小程序项目开发-- 京东商城】uni-app开发之轮播图的全部內容，希望文章能夠幫你解決所遇到的問題。

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