uniapp背景色跟随轮播图改变 vue

天使的同类

已于 2022-06-24 09:51:56 修改

阅读量1.2k

点赞数 3

分类专栏： uniapp vue.js 文章标签： vue.js uniapp 前端

于 2022-06-24 09:51:09 首次发布

本文链接：https://blog.csdn.net/summer_jk/article/details/125439742

版权

小程序 Vue 轮播图背景颜色数据绑定

关键词由CSDN通过智能技术生成

背景色跟随轮播图改变

在看酒便利小程序时，看他的首页轮播效果挺好的，于是就模仿了一下，啥也不说，上代码：

<template>
	<view class="container">
		<!-- 个人信息 -->
		<view class="mineInfoBox" :style="{ backgroundColor:imgData[swiperIndex].background}">
			<uni-row class="demo-uni-row">
				<uni-col :span="6">
					<view class="mineHead">
						<img src="../../static/studentAvt.png" alt="">
					</view>
				</uni-col>
				<uni-col :span="18">
					<view class="mineNews">
						<view class="mineName">
							<text class="name">柳叶</text>
							<text class="tag">语文老师</text>
						</view>
						<view class="mineClass">
							<text class="classList">{
   {
   className}}</text>
							<img src="../../static/change.png" alt="" class="changeBtn">
							<span>切换</span>
						</view>
					</view>
				</uni-col