619 lines
15 KiB
Vue
619 lines
15 KiB
Vue
<template>
|
|
<view class="slot-swiper-example">
|
|
<view class="demo-title">轮播组件插槽使用示例</view>
|
|
|
|
<!-- 示例1: 基础插槽使用 -->
|
|
<view class="demo-section">
|
|
<view class="section-title">1. 基础插槽 - 自定义卡片</view>
|
|
<simple-vertical-swiper
|
|
:items="customItems"
|
|
:height="100"
|
|
type="custom"
|
|
:autoplay="true"
|
|
:interval="3000"
|
|
:show-indicators="true"
|
|
>
|
|
<template #default="{ item, index }">
|
|
<view class="custom-card">
|
|
<view class="card-header">
|
|
<text class="card-icon">{{ item.icon }}</text>
|
|
<text class="card-title">{{ item.title }}</text>
|
|
</view>
|
|
<text class="card-desc">{{ item.description }}</text>
|
|
<view class="card-badge">#{{ index + 1 }}</view>
|
|
</view>
|
|
</template>
|
|
</simple-vertical-swiper>
|
|
</view>
|
|
|
|
<!-- 示例2: 通知类插槽 -->
|
|
<view class="demo-section">
|
|
<view class="section-title">2. 通知插槽 - 带按钮的通知</view>
|
|
<simple-vertical-swiper
|
|
:items="notificationItems"
|
|
:height="80"
|
|
type="custom"
|
|
:autoplay="true"
|
|
:interval="4000"
|
|
:show-indicators="false"
|
|
>
|
|
<template #default="{ item, index }">
|
|
<view class="notification-card">
|
|
<view class="notification-content">
|
|
<text class="notification-icon">{{ item.icon }}</text>
|
|
<text class="notification-text">{{ item.message }}</text>
|
|
</view>
|
|
<view
|
|
class="notification-action"
|
|
@click="handleNotificationClick(item)"
|
|
>
|
|
<text class="action-text">{{ item.actionText }}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</simple-vertical-swiper>
|
|
</view>
|
|
|
|
<!-- 示例3: 活动推广插槽 -->
|
|
<view class="demo-section">
|
|
<view class="section-title">3. 活动推广插槽 - 带图片和按钮</view>
|
|
<simple-vertical-swiper
|
|
:items="promotionItems"
|
|
:height="120"
|
|
type="custom"
|
|
:autoplay="true"
|
|
:interval="5000"
|
|
:show-indicators="true"
|
|
>
|
|
<template #default="{ item, index }">
|
|
<view class="promotion-card">
|
|
<image
|
|
class="promotion-bg"
|
|
:src="item.bgImage"
|
|
mode="aspectFill"
|
|
></image>
|
|
<view class="promotion-content">
|
|
<view class="promotion-info">
|
|
<text class="promotion-title">{{ item.title }}</text>
|
|
<text class="promotion-subtitle">{{ item.subtitle }}</text>
|
|
</view>
|
|
<view class="promotion-btn" @click="handlePromotionClick(item)">
|
|
<text class="btn-text">{{ item.btnText }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</simple-vertical-swiper>
|
|
</view>
|
|
|
|
<!-- 示例4: 复杂数据插槽 -->
|
|
<view class="demo-section">
|
|
<view class="section-title">4. 复杂数据插槽 - 用户动态</view>
|
|
<simple-vertical-swiper
|
|
:items="userActivityItems"
|
|
:height="90"
|
|
type="custom"
|
|
:autoplay="true"
|
|
:interval="6000"
|
|
:circular="true"
|
|
>
|
|
<template #default="{ item, index }">
|
|
<view class="activity-card">
|
|
<view class="user-info">
|
|
<image
|
|
class="user-avatar"
|
|
:src="item.user.avatar"
|
|
mode="aspectFill"
|
|
></image>
|
|
<view class="user-details">
|
|
<text class="user-name">{{ item.user.name }}</text>
|
|
<text class="activity-time">{{ item.timestamp }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="activity-content">
|
|
<text class="activity-text">{{ item.activity }}</text>
|
|
<view v-if="item.tags" class="activity-tags">
|
|
<text v-for="tag in item.tags" :key="tag" class="tag">{{
|
|
tag
|
|
}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</simple-vertical-swiper>
|
|
</view>
|
|
|
|
<!-- 示例5: 交互式插槽 -->
|
|
<view class="demo-section">
|
|
<view class="section-title">5. 交互式插槽 - 可点击的项目</view>
|
|
<simple-vertical-swiper
|
|
:items="interactiveItems"
|
|
:height="100"
|
|
type="custom"
|
|
:autoplay="false"
|
|
:show-indicators="true"
|
|
>
|
|
<template #default="{ item, index }">
|
|
<view class="interactive-card" @click="handleItemClick(item, index)">
|
|
<view class="item-icon-wrapper">
|
|
<text class="item-icon">{{ item.icon }}</text>
|
|
</view>
|
|
<view class="item-content">
|
|
<text class="item-title">{{ item.title }}</text>
|
|
<text class="item-value">{{ item.value }}</text>
|
|
</view>
|
|
<view class="item-arrow">
|
|
<text class="arrow-icon">→</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</simple-vertical-swiper>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import SimpleVerticalSwiper from './simple-vertical-swiper.vue'
|
|
|
|
export default {
|
|
name: 'SlotSwiperExample',
|
|
components: {
|
|
SimpleVerticalSwiper,
|
|
},
|
|
data() {
|
|
return {
|
|
// 基础自定义数据
|
|
customItems: [
|
|
{
|
|
icon: '🎉',
|
|
title: '新功能上线',
|
|
description: '体验全新的用户界面设计',
|
|
},
|
|
{
|
|
icon: '🔥',
|
|
title: '热门推荐',
|
|
description: '发现最受欢迎的内容',
|
|
},
|
|
{
|
|
icon: '⭐',
|
|
title: '精选内容',
|
|
description: '为您精心挑选的优质内容',
|
|
},
|
|
],
|
|
|
|
// 通知数据
|
|
notificationItems: [
|
|
{
|
|
icon: '📦',
|
|
message: '您的订单已发货，预计明天送达',
|
|
actionText: '查看',
|
|
orderId: '12345',
|
|
},
|
|
{
|
|
icon: '💰',
|
|
message: '恭喜获得5元优惠券',
|
|
actionText: '使用',
|
|
couponId: 'COUP001',
|
|
},
|
|
{
|
|
icon: '🎁',
|
|
message: '签到7天获得神秘礼品',
|
|
actionText: '领取',
|
|
giftId: 'GIFT001',
|
|
},
|
|
],
|
|
|
|
// 推广活动数据
|
|
promotionItems: [
|
|
{
|
|
title: '双十一大促',
|
|
subtitle: '全场5折起',
|
|
btnText: '立即抢购',
|
|
bgImage: '/static/images/promotion1.jpg',
|
|
promoId: 'PROMO001',
|
|
},
|
|
{
|
|
title: '新用户专享',
|
|
subtitle: '注册送豪礼',
|
|
btnText: '立即注册',
|
|
bgImage: '/static/images/promotion2.jpg',
|
|
promoId: 'PROMO002',
|
|
},
|
|
{
|
|
title: '限时秒杀',
|
|
subtitle: '每日10点开抢',
|
|
btnText: '设置提醒',
|
|
bgImage: '/static/images/promotion3.jpg',
|
|
promoId: 'PROMO003',
|
|
},
|
|
],
|
|
|
|
// 用户动态数据
|
|
userActivityItems: [
|
|
{
|
|
user: {
|
|
name: '张小明',
|
|
avatar: '/static/images/avatar1.jpg',
|
|
},
|
|
activity: '刚刚购买了iPhone 15 Pro',
|
|
timestamp: '2分钟前',
|
|
tags: ['数码', '热销'],
|
|
},
|
|
{
|
|
user: {
|
|
name: '李小红',
|
|
avatar: '/static/images/avatar2.jpg',
|
|
},
|
|
activity: '分享了一篇关于旅行的文章',
|
|
timestamp: '5分钟前',
|
|
tags: ['旅行', '分享'],
|
|
},
|
|
{
|
|
user: {
|
|
name: '王小强',
|
|
avatar: '/static/images/avatar3.jpg',
|
|
},
|
|
activity: '完成了今日运动目标',
|
|
timestamp: '10分钟前',
|
|
tags: ['运动', '健康'],
|
|
},
|
|
],
|
|
|
|
// 交互式数据
|
|
interactiveItems: [
|
|
{
|
|
icon: '📊',
|
|
title: '今日销售',
|
|
value: '¥12,580',
|
|
type: 'sales',
|
|
},
|
|
{
|
|
icon: '👥',
|
|
title: '新增用户',
|
|
value: '156人',
|
|
type: 'users',
|
|
},
|
|
{
|
|
icon: '📈',
|
|
title: '增长率',
|
|
value: '+23.5%',
|
|
type: 'growth',
|
|
},
|
|
{
|
|
icon: '🎯',
|
|
title: '完成率',
|
|
value: '89.2%',
|
|
type: 'completion',
|
|
},
|
|
],
|
|
}
|
|
},
|
|
methods: {
|
|
// 处理通知点击
|
|
handleNotificationClick(item) {
|
|
console.log('通知点击:', item)
|
|
uni.showToast({
|
|
title: `点击了: ${item.actionText}`,
|
|
icon: 'none',
|
|
})
|
|
},
|
|
|
|
// 处理推广点击
|
|
handlePromotionClick(item) {
|
|
console.log('推广点击:', item)
|
|
uni.showToast({
|
|
title: `点击了: ${item.title}`,
|
|
icon: 'none',
|
|
})
|
|
},
|
|
|
|
// 处理项目点击
|
|
handleItemClick(item, index) {
|
|
console.log('项目点击:', item, index)
|
|
uni.showModal({
|
|
title: item.title,
|
|
content: `当前值: ${item.value}\n类型: ${item.type}`,
|
|
showCancel: false,
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.slot-swiper-example {
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
min-height: 100vh;
|
|
|
|
.demo-title {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.demo-section {
|
|
margin-bottom: 30px;
|
|
background-color: #fff;
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
|
.section-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 15px;
|
|
padding-bottom: 8px;
|
|
border-bottom: 2px solid #007aff;
|
|
}
|
|
}
|
|
|
|
// 自定义卡片样式
|
|
.custom-card {
|
|
position: relative;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
border-radius: 10px;
|
|
padding: 15px;
|
|
margin: 0 10px;
|
|
color: white;
|
|
height: calc(100% - 20px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
|
|
.card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 8px;
|
|
|
|
.card-icon {
|
|
font-size: 20px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
.card-desc {
|
|
font-size: 12px;
|
|
opacity: 0.9;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.card-badge {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
border-radius: 12px;
|
|
padding: 2px 8px;
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
|
|
// 通知卡片样式
|
|
.notification-card {
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
margin: 0 10px;
|
|
height: calc(100% - 20px);
|
|
display: flex;
|
|
align-items: center;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
border-left: 4px solid #ff9500;
|
|
|
|
.notification-content {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.notification-icon {
|
|
font-size: 18px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.notification-text {
|
|
font-size: 14px;
|
|
color: #333;
|
|
line-height: 1.4;
|
|
}
|
|
}
|
|
|
|
.notification-action {
|
|
background-color: #007aff;
|
|
border-radius: 16px;
|
|
padding: 6px 12px;
|
|
|
|
.action-text {
|
|
color: white;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 推广卡片样式
|
|
.promotion-card {
|
|
position: relative;
|
|
border-radius: 10px;
|
|
margin: 0 10px;
|
|
height: calc(100% - 20px);
|
|
overflow: hidden;
|
|
|
|
.promotion-bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.promotion-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
background: linear-gradient(to right, rgba(0, 0, 0, 0.7), transparent);
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 20px;
|
|
|
|
.promotion-info {
|
|
.promotion-title {
|
|
display: block;
|
|
color: white;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.promotion-subtitle {
|
|
color: rgba(255, 255, 255, 0.9);
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
.promotion-btn {
|
|
background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
|
|
border-radius: 20px;
|
|
padding: 8px 16px;
|
|
|
|
.btn-text {
|
|
color: white;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 用户动态样式
|
|
.activity-card {
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
margin: 0 10px;
|
|
height: calc(100% - 20px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
|
|
.user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 8px;
|
|
|
|
.user-avatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 16px;
|
|
margin-right: 10px;
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
.user-details {
|
|
.user-name {
|
|
display: block;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #333;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.activity-time {
|
|
font-size: 11px;
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
|
|
.activity-content {
|
|
.activity-text {
|
|
font-size: 13px;
|
|
color: #666;
|
|
line-height: 1.4;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.activity-tags {
|
|
display: flex;
|
|
gap: 4px;
|
|
|
|
.tag {
|
|
background-color: #f0f0f0;
|
|
color: #666;
|
|
font-size: 10px;
|
|
padding: 2px 6px;
|
|
border-radius: 8px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 交互式卡片样式
|
|
.interactive-card {
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
margin: 0 10px;
|
|
height: calc(100% - 20px);
|
|
display: flex;
|
|
align-items: center;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
transform: scale(0.98);
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.item-icon-wrapper {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 8px;
|
|
background: linear-gradient(135deg, #74b9ff, #0984e3);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 12px;
|
|
|
|
.item-icon {
|
|
font-size: 18px;
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
.item-content {
|
|
flex: 1;
|
|
|
|
.item-title {
|
|
display: block;
|
|
font-size: 14px;
|
|
color: #333;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.item-value {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
color: #007aff;
|
|
}
|
|
}
|
|
|
|
.item-arrow {
|
|
.arrow-icon {
|
|
font-size: 16px;
|
|
color: #ccc;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|