uniapp——scroll-view卡片横向滚动

scroll-view卡片横向滚动

效果图：

代码

<template>

	<view class="scroll_box">

		<scroll-view class="sc_contain" scroll-x="true">
			<block v-for="item in scList">
				<view class="view_sc_1">
					<view class="card1" :style="{background: item.background}">
						<view class="text-area">
							<text class="title" :style="{color:item.text_color1}">{{item.title}}</text>
							<text class="text_content" :style="{color:item.text_color2}">{{item.content}}</text>
						</view>
						<image class="logo" src="/static/logo.png"></image>
					</view>
				</view>
			</block>


			<!-- <view class="view_sc_1">
				<view class="card1" style="background-color: #ffede6;">
					<view class="text-area">
						<text class="title" style="color:#ff7341 ;">{{title}}</text>
						<text class="text_content" style="color:#ff9c7e ;">每天10点抢大奖</text>
					</view>
					<image class="logo" src="/static/logo.png"></image>
				</view>
			</view>

			<view class="view_sc_1">
				<view class="card1" style="background-color: #fdf4d5;">
					<view class="text-area">
						<text class="title" style="color:#c58268 ;">{{title}}</text>
						<text class="text_content" style="color:#d5a08e ;">每天10点抢大奖</text>
					</view>
					<image class="logo" src="/static/logo.png"></image>
				</view>
			</view>

			<view class="view_sc_1">
				<view class="card1" style="background-color: #e9f2dd;">
					<view class="text-area">
						<text class="title" style="color:#84a379 ;">{{title}}</text>
						<text class="text_content" style="color:#a6be9d ;">每天10点抢大奖</text>
					</view>
					<image class="logo" src="/static/logo.png"></image>
				</view>
			</view> -->

		</scroll-view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				scList: [{
					title: "每日抽奖",
					content: "每天10点抢大奖",
					background: "#ffede6",
					text_color1: "#ff7341",
					text_color2: "#ff9c7e",
				}, {
					title: "疯狂领劵",
					content: "每天定时疯抢",
					background: "#fdf4d5",
					text_color1: "#c58268",
					text_color2: "#d5a08e",

				}, {
					title: "五折优惠",
					content: "大奖不断发送",
					background: "#e9f2dd",
					text_color1: "#84a379",
					text_color2: "#a6be9d",
				}],
				title: '每日抽奖',

			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
	}

	.sc_contain {
		width: 100%;
		height: 140upx;
		white-space: nowrap;
	}

	.view_sc_1 {
		/*控制横向排列*/
		display: inline-block;
		/* background-color: #ffede6; */
		border-radius: 15upx;
		width: 280upx;
		height: 120upx;
		margin-left: 20upx;

	}

	.card1 {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 120upx;
		border-radius: 15upx;
	}

	.logo {
		height: 100upx;
		width: 80upx;
		margin-left: 10upx;

	}

	.text-area {
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.title {
		font-size: 30upx;
		/* color: #ff7341; */
	}

	.text_content {
		font-size: 23upx;
		/* color: #ff9c7e; */
	}
</style>