uni——抽卡动画（animation、按钮禁用、样式添加等）

最新推荐文章于 2024-04-01 09:15:00 发布

耶啵奶膘

最新推荐文章于 2024-04-01 09:15:00 发布

阅读量541

点赞数 1

分类专栏： uni、vue 文章标签：动画 uni-app css

本文链接：https://blog.csdn.net/xulihua_75/article/details/128654971

版权

案例演示

在这里插入图片描述

案例代码

<template>
	<view class="container">
		<view class="bgBox">
			<!-- <image src="/static/card/gameList_bg.png" mode="aspectFill"></image> -->
		</view>
		<view class="body">
			<view class="logo">
				<!-- <image src="/static/card/gameList_logo.png" mode="aspectFill"></image> -->
			</view>
			<!-- 图片列表 -->
			<view class="imgList">
				<block v-for="(item,index) in imgList" :key="index">
					<button @click="toGame(item,index)" :disabled="item.disabled"
						:class="index === current?'option_active item':'option_default item'"
						:style="item.status == 1?'':' filter: grayscale(0.6)'" :animation="item.animationData">
						<image :src="item.image" mode="aspectFill" v-if="item.isActive == false"></image>
						<image :src="item.activeImg" mode="aspectFill" v-if="item.isActive == true"></image>
					</button>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
   
		data() {
   
			return {
   
				imgList: [{
   
						index: 1,
						image: '/static/card/1.jpeg',
						activeImg: ''</