当前位置：首页 > uni-app

uniapp 活动组件

2026-03-05 04:50:53uni-app

uniapp 活动组件实现方法

使用内置组件实现基础活动

uniapp提供了丰富的内置组件，可以快速搭建活动页面。swiper组件适合轮播图展示活动海报，scroll-view可实现活动列表滚动展示。结合image组件加载活动图片，button组件设置活动参与按钮。

<template>
  <view>
    <swiper indicator-dots autoplay>
      <swiper-item v-for="(item,index) in banners" :key="index">
        <image :src="item.imgUrl" mode="aspectFill"></image>
      </swiper-item>
    </swiper>
    <scroll-view scroll-y>
      <view v-for="(act,idx) in activities" :key="idx">
        <image :src="act.cover"></image>
        <text>{{act.title}}</text>
        <button @click="joinActivity(act.id)">立即参与</button>
      </view>
    </scroll-view>
  </view>
</template>

自定义活动组件开发

对于复杂活动需求，可创建自定义组件。在components目录新建activity-card组件，封装活动卡片样式和逻辑。通过props接收活动数据，emit事件处理用户交互。

// components/activity-card.vue
<template>
  <view class="activity-card" @click="handleClick">
    <image :src="data.cover" mode="aspectFill"></image>
    <view class="info">
      <text class="title">{{data.title}}</text>
      <text class="time">{{data.time}}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    data: Object
  },
  methods: {
    handleClick() {
      this.$emit('click', this.data.id)
    }
  }
}
</script>

状态管理与数据绑定

使用vuex管理活动状态数据，实现跨页面共享。定义actions异步获取活动列表，mutations更新状态，getters提供计算属性。

// store/modules/activity.js
export default {
  state: {
    list: []
  },
  mutations: {
    SET_ACTIVITIES(state, payload) {
      state.list = payload
    }
  },
  actions: {
    async fetchActivities({commit}) {
      const res = await uni.request({url: '/api/activities'})
      commit('SET_ACTIVITIES', res.data)
    }
  }
}

动画效果增强体验

利用uniapp的动画API或CSS3动画提升交互体验。为活动入口添加缩放效果，列表项增加入场动画，按钮设置点击反馈。

.activity-card {
  transition: all 0.3s;
}
.activity-card:active {
  transform: scale(0.95);
}
@keyframes fadeIn {
  from {opacity: 0; transform: translateY(20px);}
  to {opacity: 1; transform: translateY(0);}
}
.activity-item {
  animation: fadeIn 0.5s forwards;
}

跨平台兼容处理

针对不同平台进行样式适配。使用条件编译处理平台差异，确保H5、小程序、App端显示一致。

// #ifdef H5
.activity-card {
  border-radius: 8px;
}
// #endif
// #ifdef MP-WEIXIN
.activity-card {
  border-radius: 0;
}
// #endif

性能优化建议

活动页面需注意图片懒加载、数据分页加载。大图使用CDN加速，列表数据分页请求，避免一次性加载过多内容。

uniapp 活动组件

onReachBottom() {
  this.page++
  this.loadData()
},
methods: {
  loadData() {
    uni.request({
      url: '/api/activities',
      data: {page: this.page}
    })
  }
}