uniapp中如何实现侧边tab切换点击变颜色右边内容跟着联动

最新推荐文章于 2024-07-19 10:35:16 发布

原创最新推荐文章于 2024-07-19 10:35:16 发布 · 1.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #sass

template的内容块代码

<template>
	<view class="wrap">
		<view class="trademark">社区图片</view>
		<view class="box">
			<scroll-view class="scrool-more" style="height: 100%" scroll-y="true" scroll-with-animation="true">
				<view class="box_left">
					<scroll-view scroll-y="true">
						<view class="box_left_item" v-for="(item,index) in title" :key="index" @click="tab(index)"
							:class="{'active':actives==index}">
							{{item}}
						</view>
					</scroll-view>
				</view>
				<view class="box_right">
					<view class="tu" v-for="(item,index) in imgUrl" :key="index" :class="actives == index?'tu1':'tu2'">
						<view class="actiid">
							<text>{{item.title}}</text>
						</view>
						<view v-for="(imgItem,indexs) in item.imgs" :key="indexs" class="top_img">
							<image :src="imgItem" mode="aspectFit" @tap="SKUpreviewImage(imgItem,indexs)"></image>
						</view>
				
					
					</view>
				</view>
			</scroll-view>

		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				title: [
					"摄影设计", "明星美女", "空间设计",
					"户型装饰", "广告摄影", "摄影学习",
					"摄影器材", "明星写真", "清纯甜美",
					"古典美女", "动物写真", "精美壁纸",
					"古风中国"
				],
				imgUrl: [{
						title: "摄影设计",
						imgs: [

							"https://images.pexels.com/photos/9944370/pexels-photo-9944370.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500 ",
							"https://images.pexels.com/photos/9558174/pexels-photo-9558174.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500",

						]

					},
					{
						title: "明星美女",
						imgs: [
							"https://images.pexels.com/photos/9060582/pexels-photo-9060582.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500",
							"https://images.pexels.com/photos/10217800/pexels-photo-10217800.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500",
							"https://images.pexels.com/photos/10369570/pexels-photo-10369570.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500 "
						]
					},
					{
						title: "空间设计",
						imgs: [

							"https://images.pexels.com/photos/10217800/pexels-photo-10217800.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500",
							"https://images.pexels.com/photos/9060582/pexels-photo-9060582.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"
						]
					},
					{
						title: "户型装饰",
						imgs: [
							"https://images.pexels.com/photos/9060582/pexels-photo-9060582.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500",
							"https://images.pexels.com/photos/10217800/pexels-photo-10217800.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"
						]
					},
					{
						title: "广告摄影",
						imgs: [

							"https://images.pexels.com/photos/10217800/pexels-photo-10217800.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500",
							"https://images.pexels.com/photos/9060582/pexels-photo-9060582.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"
						]
					},
					{
						title: "摄影学习",
						imgs: [
							"https://images.pexels.com/photos/9060582/pexels-photo-9060582.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500",
							"https://images.pexels.com/photos/10217800/pexels-photo-10217800.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"
						]
					},
					{
						title: "摄影器材",
						imgs: [

							"https://images.pexels.com/photos/10217800/pexels-photo-10217800.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500",
							"https://images.pexels.com/photos/9060582/pexels-photo-9060582.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"
						]
					},
					{
						title: "明星写真",
						imgs: [
							"https://images.pexels.com/photos/9060582/pexels-photo-9060582.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500",
							"https://images.pexels.com/photos/10217800/pexels-photo-10217800.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"
						]
					},
					{
						title: "清纯甜美",
						imgs: [
							"https://images.pexels.com/photos/9060582/pexels-photo-9060582.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500",
							"https://images.pexels.com/photos/10217800/pexels-photo-10217800.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"
						]
					},
					{
						title: "古典美女",
						imgs: [
							"https://images.pexels.com/photos/9060582/pexels-photo-9060582.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500",
							"https://images.pexels.com/photos/10217800/pexels-photo-10217800.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"
						]
					},
					{
						title: "动物写真",
						imgs: [
							"https://images.pexels.com/photos/9060582/pexels-photo-9060582.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500",
							"https://images.pexels.com/photos/10217800/pexels-photo-10217800.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"
						]
					},
					{
						title: "精美壁纸",
						imgs: [
							"https://images.pexels.com/photos/9060582/pexels-photo-9060582.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500",
							"https://images.pexels.com/photos/10217800/pexels-photo-10217800.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"
						]
					},
					{
						title: "古风中国",
						imgs: [
							"https://images.pexels.com/photos/9060582/pexels-photo-9060582.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500",
							"https://images.pexels.com/photos/10217800/pexels-photo-10217800.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"
						]
					}
				],
				actives: 0,
				phone: 0
			}
		},
		methods: {
			tab(index) {
				this.actives = index;
			},
		    //点击不同的颜色，改变图片地址
		    	colorImg:function(img){
		    		//定义一个变量
		    		var me = this;
		    		me.imgUrl.imgs = img;  //点击当前的颜色替换成当前颜色的图片
		    	},
		    	//SKU里面的图片预览
		    	SKUpreviewImage:function(imgItem,indexs){
		    		//此方法传图片地址要数组的形式，所以定义一个数组，然后将内容push进去，再去做图片预览
		    		var arr = [];
		    		arr.push(imgItem);
		    		//uniapp预览轮播图方法
		    		uni.previewImage({
		    			current:indexs, //预览图片的下标
		    			urls:arr //预览图片的地址，必须要数组形式
		    		})
		    	},
		  

		},
		onLoad() {

		}
	}
</script>

css

<style lang="less">
	page {
		width: 100%;
		height: 100%;
	}

	.wrap {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.trademark {
		width: 100%;
		height: 80rpx;
		font-size: 32rpx;
		font-weight: 800;
		color: #fff;
		background: rgb(196, 30, 0);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.box {
		width: 100%;
		position: relative;
		flex: 1;

		.scrool-more {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
		}

		.box_left {
			width: 30%;
			height: 100%;
			border-right: 1rpx solid #f3f3f3;
			background: #F1F1F1;
			position: fixed;
			overflow: auto;

			.box_left_item {
				width: 100%;
				height: 100rpx;
				margin-top: 3rpx;
				background: #fff;
				text-align: center;
				line-height: 100rpx;
				color: rgb(125, 125, 125);
			}

			.active {
				width: 100%;
				height: 100rpx;
				background: rgb(196, 30, 0);
				color: #fff;
			}
		}

		.box_right {
			width: 70%;
			float: right;

			.tu1 {
				display: block;
			}

			.tu2 {
				display: none;
			}

			.tu {
				.actiid {
					text-align: center;
					margin: 30rpx 0;
				}

				.top_img {
					width: 100%;

					image {
						width: 200rpx;
						height: 200rpx;
						margin: 20rpx 30rpx;
					}
				}

			}
		}

	}
</style>

点击预览有问题只能一张一张看

效果图：

侧边tab切换效果