uniapp 活动组件
uniapp 活动组件实现方法
在uniapp中实现活动组件通常需要结合页面布局、交互逻辑和数据绑定。以下是一些常见的实现方式：
基础活动组件结构
<template>
<view class="activity-container">
<image :src="activityData.imageUrl" mode="aspectFill"></image>
<view class="activity-info">
<text class="title">{{activityData.title}}</text>
<text class="time">{{activityData.time}}</text>
<button @click="joinActivity">立即参与</button>
</view>
</view>
</template>数据绑定与交互
export default {
data() {
return {
activityData: {
title: '限时优惠活动',
time: '2023-07-01至2023-07-31',
imageUrl: '/static/activity-banner.jpg'
}
}
},
methods: {
joinActivity() {
uni.navigateTo({
url: '/pages/activity/detail?id=123'
})
}
}
}样式优化
.activity-container {
margin: 20rpx;
border-radius: 16rpx;
overflow: hidden;
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
}
.activity-info {
padding: 20rpx;
background: #fff;
}
.title {
font-size: 32rpx;
font-weight: bold;
color: #333;
}
.time {
font-size: 24rpx;
color: #999;
margin: 10rpx 0;
}
button {
background: #ff5500;
color: white;
border-radius: 50rpx;
}高级功能实现
倒计时功能可以这样实现：
data() {
return {
countdown: '00:00:00',
timer: null
}
},
mounted() {
this.startCountdown()
},
methods: {
startCountdown() {
this.timer = setInterval(() => {
// 计算剩余时间逻辑
this.countdown = this.formatTime(remainingTime)
}, 1000)
},
formatTime(seconds) {
// 时间格式化逻辑
}
}组件复用方案
创建可复用的活动组件：
- 在components目录新建activity-card.vue
- 使用props接收外部数据：
props: { activity: { type: Object, default: () => ({}) } } - 在页面中引入使用：
<activity-card :activity="item" v-for="item in activityList" :key="item.id"></activity-card>
注意事项
- 图片资源建议使用网络地址或正确配置的本地路径
- 样式单位推荐使用rpx保持多端适配
- 交互事件需考虑各端兼容性
- 大数据量列表使用虚拟滚动优化性能
