uniapp实现左右滑动_uniapp 左右滑动-优快云博客

本文链接：https://blog.youkuaiyun.com/admin_web/article/details/117650717

这是一个关于移动端推广营销的界面设计代码示例。内容包括：置顶推广、上热门、钻石会员和黄金会员四个功能模块的展示，每个模块包含图片和描述。通过uni-app的scroll-view组件实现水平滑动效果，并利用getSystemInfo获取元素高度以适应不同设备。代码中还定义了各模块的背景渐变色和文字描述，为用户提供不同的视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<template>
	<view class="content">
		<view class="model_box">
			<view class="model_title">推广营销</view>
			<view class="model_scrollx flex_row">
				<scroll-view class="uni-swiper-tab" scroll-x :style="'height:'+scrollH+'px'">
					<view class="scrollx_items tg_zdtg">
						<image src="/static/my/icon_tg1.png" mode=""></image>
						<view class="tgyx_title">置顶推广</view>
						<view class="tgyx_desc">搜索页最强特权</view>
					</view>
					<view class="scrollx_items tg_hot">
						<image src="/static/my/icon_tg2.png" mode=""></image>
						<view class="tgyx_title">我要上热门</view>
						<view class="tgyx_desc">多十倍商机</view>
					</view>
					<view class="scrollx_items tg_zshy">
						<image src="/static/my/icon_tg3.png" mode=""></image>
						<view class="tgyx_title">钻石会员</view>
						<view class="tgyx_desc">抢占无限商机</view>
					</view>
					<view class="scrollx_items tg_hjhy">
						<image src="/static/my/icon_tg4.png" mode=""></image>
						<view class="tgyx_title">黄金会员</view>
						<view class="tgyx_desc">提供供应排名</view>
					</view>
				</scroll-view>
				
			</view>
		</view>
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				scrollH: 130
			}
		},
		onLoad() {
			uni.getSystemInfo({
			　　success: function(res) { // res - 各种参数
			　　    let info = uni.createSelectorQuery().select(".scrollx_items");
			　　　  　info.boundingClientRect(function(data) { //data - 各种参数
			　　　  　console.log(data.height)  // 获取元素宽度
						this.scrollH = data.height
			　　    }).exec()
			       }
			});
		},
		onShow() {
			
			
		},
		methods: {
			
		}
	}
</script>

<style>

	/* 左右滑动 */
	.uni-swiper-tab{
		white-space: nowrap;
	}
	.model_scrollx{
		justify-content: space-between;
		padding: 40rpx 0;
	}
	.scrollx_items{
		padding: 30rpx 20rpx;
		text-align: center;
		display: inline-block;
		width: 210rpx;
		box-sizing: border-box;
		margin-left: 30rpx;
	}
	.scrollx_items:last-child{
		margin-right: 30rpx;
	}
	.scrollx_items image{
		width: 70rpx;
		height: 66rpx;
	}
	.tgyx_title{
		font-size: 28rpx;
		color: #333333;
		margin-top: 30rpx;
	}
	.tgyx_desc{
		font-size: 24rpx;
		margin-top: 10rpx;
	}
	.tg_zdtg{
		background: linear-gradient(bottom right, #d5e4fa, #dae7fb);
		color: #477cd3;
	}
	.tg_hot{background: linear-gradient(bottom right, #fffcec, #fbf6d9);color: #ffa800;}
	.tg_zshy{background: linear-gradient(bottom right, #fdf7fe, #f9e5fe);color: #c559de;}
	.tg_hjhy{background: linear-gradient(bottom right, #fff8f0, #fff0df);color: #f3791f;}
	
	
</style>