uni-appDay02
1.首页-通用轮播组件
轮播图组件需要再首页和分类页使用，封装成通用组件
- 准备组件
- 自动导入组件
<script setup lang="ts">
import XtxSwiper from '@/components/XtxSwiper.vue'
import CustomNavbar from './components/CustomNavbar.vue'
</script><template><CustomNavbarom /><XtxSwiper /><view class="index">index</view>
</template><style lang="scss">
//
</style>- 添加组件类型声明
import XtxSwiper from './XtxSwiper.vue'
declare module '@vue/runtime-core' {export interface GlobalComponents {// 确认类型，全局定义XtxSwiper: typeof XtxSwiper}
}2.轮播图-指示点
@change=“onChange”
<script setup lang="ts">
import { ref } from 'vue'const activeIndex = ref(0)
// 当swiper下标变化时触发
const onChange: UniHelper.SwiperOnChange = (ev) => {// 非空断言用!. 主观上排除掉空值情况activeIndex.value = ev.detail!.current
}
</script>
3.轮播图-获取轮播图数据
- 封装获取轮播图数据API
import { http } from '@/utils/http'export const getHomeBannerAPI = (distributionSite = 1) => {return http({method: 'GET',url: '/home/banner',data: {distributionSite,},})
}
- 页面初始化API
<script setup lang="ts">
import XtxSwiper from '@/components/XtxSwiper.vue'
import { getHomeBannerAPI } from '@/services/home'
import CustomNavbar from './components/CustomNavbar.vue'
import { onLoad } from '@dcloudio/uni-app'const bannerList = ref([])
const getHomeBannerData = async () => {const res = await getHomeBannerAPI()bannerList.value = res.result
}onLoad(() => {getHomeBannerData()
})
</script><template><CustomNavbarom /><XtxSwiper /><view class="index">index</view>
</template><style lang="scss">
//
</style>
4.首页-轮播图数据类型并渲染
- 定义轮播图数据类型
/** 首页-广告区域数据类型 */
export type BannerItem = {/** 跳转链接 */hrefUrl: string/** id */id: string/** 图片链接 */imgUrl: string/** 跳转类型 */type: number
}
- 指定类型并传值给子组件
import { http } from '@/utils/http'
import { BannerItem } from '@/types/home'export const getHomeBannerAPI = (distributionSite = 1) => {return http<BannerItem[]>({method: 'GET',url: '/home/banner',data: {distributionSite,},})
}<script setup lang="ts">
import { BannerItem } from '@/types/home'
import { ref } from 'vue'const activeIndex = ref(0)
// 当swiper下标变化时触发
const onChange: UniHelper.SwiperOnChange = (ev) => {// 非空断言用!. 主观上排除掉空值情况activeIndex.value = ev.detail!.current
}
defineProps<{list: BannerItem[]
}>()
</script>
- 渲染数据
<template><view class="carousel"><swiper :circular="true" :autoplay="false" :interval="3000" @change="onChange"><swiper-item v-for="item in list" :key="item.id"><navigator url="/pages/index/index" hover-class="none" class="navigator"><image mode="aspectFill" class="image" :src="item.imgUrl"></image></navigator></swiper-item></swiper><!-- 指示点 --><view class="indicator"><textv-for="(item, index) in list":key="item.id"class="dot":class="{ active: index === activeIndex }"></text></view></view>
</template>
5.前台分类-组件封装
- 准备组件（只有首页使用）
- 导入并使用组件
- 设置首页底色为#F7F7F7
// 导入
<script setup lang="ts">
import CategoryPanel from './components/CategoryPanel.vue'
</script><template><!-- 分类面板 --><CategoryPanel /><view class="index">index</view>
</template><style lang="scss">
page {background-color: #f7f7f7;
}
</style>
6.前台分类数据
- 封装获取前台分类数据API
export const getHomeCategoryAPI = () => {return http({method: 'GET',url: '/home/category/mutli',})
}- 页面初始化调用API
<script setup lang="ts">
import XtxSwiper from '@/components/XtxSwiper.vue'
import { getHomeBannerAPI, getHomeCategoryAPI } from '@/services/home'
import CustomNavbar from './components/CustomNavbar.vue'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import type { BannerItem } from '@/types/home'
import CategoryPanel from './components/CategoryPanel.vue'// 获取轮播图数据
const bannerList = ref<BannerItem[]>([])
const getHomeBannerData = async () => {const res = await getHomeBannerAPI()bannerList.value = res.result
}const getHomeCategoryData = async () => {const res = await getHomeCategoryAPI()
}
// 页面加载
onLoad(() => {getHomeBannerData()getHomeCategoryData()
})
</script>
7.前台分类数据类型并渲染
- 定义前台分类数据类型
export const getHomeCategoryAPI = () => {return http<CategoryItem[]>({method: 'GET',url: '/home/category/mutli',})
}
- 指定类型并传值给子组件
const categoryList = ref<CategoryItem[]>([])
const getHomeCategoryData = async () => {const res = await getHomeCategoryAPI()categoryList.value = res.result
}
- 渲染前台分类数据
<script setup lang="ts">
import { CategoryItem } from '@/types/home'defineProps<{list: CategoryItem[]
}>()
</script><template><view class="category"><navigatorclass="category-item"hover-class="none"url="/pages/index/index"v-for="item in list":key="item.id"><image class="icon" :src="item.icon"></image><text class="text">{{ item.name }}</text></navigator></view>
</template>
8.首页-热门推荐
- 准备组件（只有首页使用）
- 导入并使用组件
- 封装获取热门推荐数据API
export const getHomeHotAPI = () => {return http({method: 'GET',url: '/home/hot/mutli',})
}
- 定义热门推荐数据类型并指定
/** 首页-热门推荐数据类型 */
export type HotItem = {/** 说明 */alt: string/** id */id: string/** 图片集合[ 图片路径 ] */pictures: string[]/** 跳转地址 */target: string/** 标题 */title: string/** 推荐类型 */type: string
}export const getHomeHotAPI = () => {return http<HotItem[]>({method: 'GET',url: '/home/hot/mutli',})
}
- 传递给子组件并渲染
// 获取热门推荐数据
const hotList = ref<HotItem[]>([])
const getHomeHotData = async () => {const res = await getHomeHotAPI()hotList.value = res.result
}<script setup lang="ts">
import { CategoryItem } from '@/types/home'defineProps<{list: CategoryItem[]
}>()
</script><template><view class="category"><navigatorclass="category-item"hover-class="none"url="/pages/index/index"v-for="item in list":key="item.id"><image class="icon" :src="item.icon"></image><text class="text">{{ item.name }}</text></navigator></view>
</template>
9.猜你喜欢-组件封装
- 准备组件（通用组件）
- 定义组件类型
import XtxSwiper from '../components/XtxSwiper.vue'
import XtxGuess from '../components/XtxGuess.vue'
declare module '@vue/runtime-core' {export interface GlobalComponents {// 确认类型，全局定义XtxSwiper: typeof XtxSwiperXtxGuess: typeof XtxGuess}
}
- 准备scroll-view滚动容器
<template><!-- 自定义导航栏 --><CustomNavbarom /><scroll-view class="scroll-view" scroll-y><!-- 自定义轮播图 --><XtxSwiper :list="bannerList" /><!-- 分类面板 --><CategoryPanel :list="categoryList" /><!-- 热门推荐 --><HotPanel :list="hotList" /><!-- 猜你喜欢 --><XtxGuess /></scroll-view>
</template>
- 设置page和scroll-view样式
<style lang="scss">
page {background-color: #f7f7f7;height: 100%;display: flex;flex-direction: column;
}
.scroll-view {flex: 1;
}
</style>
10.获取猜你喜欢数据
- 封装获取猜你喜欢数据API