Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
jgdl
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
hookehuyr
2025-07-18 17:12:43 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
8a664d7f3f1f9d0d6422a8a47962fe52ba5a3393
8a664d7f
1 parent
3e5bf68c
feat(首页): 添加轮播图点击跳转功能并优化数据结构
修改轮播图数据结构以包含id字段 添加点击事件跳转到详情页功能
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
18 additions
and
5 deletions
src/pages/index/index.vue
src/pages/index/index.vue
View file @
8a664d7
<!--
* @Date: 2025-06-28 10:33:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-1
7 09:58:32
* @LastEditTime: 2025-07-1
8 17:11:10
* @FilePath: /jgdl/src/pages/index/index.vue
* @Description: 捡个电驴首页
-->
...
...
@@ -31,8 +31,8 @@
<view class="px-4 pt-4" style="background: linear-gradient( 180deg, #fb923c 0%, rgba(255,203,53,0) 61%);">
<nut-swiper :init-page="0" :pagination-visible="true" pagination-color="#ffffff" auto-play="3000"
class="rounded-lg overflow-hidden" height="160">
<nut-swiper-item v-for="(image, index) in bannerImages" :key="index">
<image :src="image" mode="aspectFill" class="w-full h-40 object-cover" />
<nut-swiper-item v-for="(image, index) in bannerImages" :key="index"
@click="onBannerClick(image)"
>
<image :src="image
.front_photo
" mode="aspectFill" class="w-full h-40 object-cover" />
</nut-swiper-item>
</nut-swiper>
</view>
...
...
@@ -180,9 +180,15 @@ onMounted(async () => {
// 获取首页轮播
const res1 = await getRecommendVehicleAPI({ section: 1 })
if (res1.code) {
bannerImages.value = res1.data.list.map(item => item.front_photo);
bannerImages.value = res1.data.list.map(item => ({
id: item.id,
front_photo: item.front_photo
}));
if (!bannerImages.value.length) {
bannerImages.value = [DEFAULT_COVER_IMG]
bannerImages.value = [{
id: 0,
front_photo: DEFAULT_COVER_IMG
}]
}
}
})
...
...
@@ -210,4 +216,11 @@ useShareAppMessage(() => {
// 返回shareObj
return shareObj;
})
// 点击banner图片跳转到详情页
const onBannerClick = ({id}) => {
Taro.navigateTo({
url: `/pages/productDetail/index?id=${id}`
})
}
</script>
...
...
Please
register
or
login
to post a comment