效果预览
组件封装
src\components\SUI_Swiper.vue
可参考官网配置更多属性
- swiper
- navigator
<script setup lang="ts"> import { ref } from 'vue' defineProps({ config: Object, }) const activeIndex = ref(0) const change: UniHelper.SwiperOnChange = (e) => { activeIndex.value = e.detail.current } </script> <template> <view class="carousel"> <swiper @change="change" :circular="config?.circular || true" :autoplay="config?.autoplay || false" :interval="config?.interval || 3000" > <swiper-item v-for="(item, index) in config?.itemList" :key="index"> <navigator :url="item.url" :open-type="item.openType || 'navigate'" hover-class="none" class="navigator" > <image mode="aspectFill" class="image" :src="item.src"></image> </navigator> </swiper-item> </swiper> <!-- 指示点 --> <view class="indicator"> <text v-for="(item, index) in config?.itemList" :key="item" class="dot" :class="{ active: index === activeIndex }" ></text> </view> </view> </template> <style lang="scss"> /* 轮播图 */ .carousel { height: 280rpx; 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>
自动注册全局组件
在 src\pages.json 中添加
// 自动导入src/components 目录中以 SUI_开头的组件 "^SUI_(.*)": "@/components/SUI_$1.vue"
完整范例代码如下:
src\pages.json
// 组件自动导入 "easycom": { "autoscan": true, "custom": { // uni-ui 规则如下配置 "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue", // 自动导入src/components 目录中以 SUI_开头的组件 "^SUI_(.*)": "@/components/SUI_$1.vue" } },
使用组件
<SUI_Swiper :config="swiperConfig" />
const swiperConfig = { autoplay: true, interval: 3000, itemList: [ { // 跳转到页面 '/pages/login/login' url: '/pages/login/login', src: 'https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_1.jpg', }, { // 跳转到tab页签 '/pages/my/my' openType: 'switchTab', url: '/pages/my/my', src: 'https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_2.jpg', }, ], }
添加全局组件类型声明
src\types\component.d.ts
import 'vue' import SUI_Swiper from '@/components/SUI_Swiper.vue' declare module 'vue' { export interface GlobalComponents { SUI_Swiper: typeof SUI_Swiper } }