通用轮播组件
参考效果
小兔鲜儿项目中总共有两处广告位，分别位于【首页】和【商品分类页】。
轮播图组件需要在首页和分类页使用，需要封装成通用组件。
静态结构
首页广告布局为独立的组件 XtxSwiper ，位于的 src/components 目录中。
该组件定义了 list 属性接收外部传入的数据，内部通过小程序内置组件 swiper 展示首页广告的数据。
轮播图组件
静态结构：src/components/XtxSwiper.vue
<script setup lang="ts">
import { ref } from 'vue'
const activeIndex = ref(0)
</script>
<template>
<view class="carousel">
<swiper :circular="true" :autoplay="false" :interval="3000">
<swiper-item>
<navigator
url="/pages/index/index"
hover-class="none"
class="navigator"
>
<image
mode="aspectFill"
class="image"
src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_1.jpg"
></image>
</navigator>
</swiper-item>
<swiper-item>
<navigator
url="/pages/index/index"
hover-class="none"
class="navigator"
>
<image
mode="aspectFill"
class="image"
src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_2.jpg"
></image>
</navigator>
</swiper-item>
<swiper-item>
<navigator
url="/pages/index/index"
hover-class="none"
class="navigator"
>
<image
mode="aspectFill"
class="image"
src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_3.jpg"
></image>
</navigator>
</swiper-item>
</swiper>
<!-- 指示点 -->
<view class="indicator">
<text
v-for="(item, index) in 3"
:key="item"
class="dot"
:class="{ active: index === activeIndex }"
></text>
</view>
</view>
</template>
<style lang="scss">
:host {
display: block;
height: 280rpx;
}
/* 轮播图 */
.carousel {
height: 100%;
position: relative;
overflow: hidden;
transform: translateY(0);
background-color: #efefef;
.indicator {
position: absolute;
left: 0;
right: 0;
bottom: 16rpx;
display: flex;
justify-content: center;
.dot {
width: 30rpx;
height: 6rpx;
margin: 0 8rpx;
border-radius: 6rpx;
background-color: rgba(255, 255, 255, 0.4);
}
.active {
background-color: #fff;
}
}
.navigator,
.image {
width: 100%;
height: 100%;
}
}
</style>自动导入全局组件
参考配置
{
// 组件自动引入规则
"easycom": {
// 是否开启自动扫描 @/components/$1/$1.vue 组件
"autoscan": true,
// 以正则方式自定义组件匹配规则
"custom": {
// uni-ui 规则如下配置
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
// 以 Xtx 开头的组件，在 components 目录中查找
"^Xtx(.*)": "@/components/Xtx$1.vue"
}
}
}全局组件类型声明
Volor 插件说明：Vue Language Tools
// src/types/components.d.ts
import XtxSwiper from './XtxSwiper.vue’
declare module '@vue/runtime-core' {
export interface GlobalComponents {
XtxSwiper: typeof XtxSwiper
}
}获取数据
接口调用
该业务功能对于前端来说比较简单，只需调用后端提供的接口将获得的数据展现，结合运营人员的营销策略跳转到对应的链接地址即可。
接口地址：/home/banner
请求方式：GET
请求参数：
Query:
字段名 | 必须 | 默认值 | 备注 |
distributionSite | 否 | 1 | 活动 banner 位置，1 代表首页，2 代表商品分类页，默认为 1 |
请求封装
// 存放路径: src/services/home.ts
import type { BannerItem } from '@/types/home'
/**
* 首页-广告区域-小程序
* @param distributionSite 广告区域展示位置（投放位置 投放位置，1为首页，2为分类商品页） 默认是1
*/
export const getHomeBannerAPI = (distributionSite = 1) => {
return http<BannerItem[]>({
method: 'GET',
url: '/home/banner',
data: {
distributionSite,
},
})
}类型声明
存放路径：src/types/home.d.ts
/** 首页-广告区域数据类型 */
export type BannerItem = {
/** 跳转链接 */
hrefUrl: string
/** id */
id: string
/** 图片链接 */
imgUrl: string
/** 跳转类型 */
type: number
}最后，将获得的数据结合模板语法渲染到页面中。
参考代码
轮播图组件：src\components\XtxSwiper.vue
<script setup lang="ts">
import type { BannerItem } from '@/types/home'
import { ref } from 'vue'
const activeIndex = ref(0)
// 当 swiper 下标发生变化时触发
const onChange: UniHelper.SwiperOnChange = (ev) => {
// ! 非空断言，主观上排除掉空值情况
activeIndex.value = ev.detail!.current
}
// 定义 props 接收
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">
<text
v-for="(item, index) in list"
:key="item.id"
class="dot"
:class="{ active: index === activeIndex }"
></text>
</view>
</view>
</template>
