uniApp-08 动态横向滑轮菜单栏

最新推荐文章于 2024-05-28 23:21:42 发布
最新推荐文章于 2024-05-28 23:21:42 发布
阅读量779 收藏 4
点赞数
分类专栏： uniApp 文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59214979/article/details/121277348
版权

本节：可以横向滑动的菜单栏。 

在外面套这个标签就可以了。

    <scroll-view scroll-x="true">

    </scroll-view>

完整代码：

<template>
	<view>
		<view class="top">
			<view class="" style="display: flex;">
				<view class="" style="font-size: 40rpx;font-weight:600">
					推荐
				</view>
				<view class="" style="color: #dcdbe3;margin-left: 30rpx;margin-top: 10rpx
				;">
					直播
				</view>
				<view class="" style="color: #dcdbe3;margin-left: 30rpx;margin-top: 10rpx">
					关注
				</view>
			</view>
			<view class="">
				<image style="margin-right: 30rpx;width: 90rpx;height: 80rpx;" src="../../static/suos.jpg" mode="">
				</image>
			</view>
		</view>

		<view class="lunbo1">
			<view class="page-section swiper">
				<view>

					<view class="" style="margin-top: 50rpx;">
						<scroll-view class="nav1" scroll-x="true" style="">
							<view class="" style="background-color:#FFFFFF;display: flex;width:1800rpx;height: 200rpx;">

								<view class="" style="padding-left: 20rpx;margin-top: 10rpx;">
									<image src="../../static/11.jpg" mode="" style="width: 270rpx;height: 160rpx;">
									</image>

								</view>
								<view class="" style="padding-left: 20rpx;margin-top: 10rpx;">

									<image src="../../static/22.jpg" mode="" style=" width: 270rpx;height: 160rpx;">
									</image>



								</view>
								<view class="" style="padding-left: 20rpx;margin-top: 10rpx;">

									<image src="../../static/11.jpg" mode="" style="width: 270rpx;height: 160rpx;">
									</image>



								</view>
								<view class="" style="padding-left: 20rpx;margin-top: 10rpx;">

									<image src="../../static/22.jpg" mode="" style="width: 270rpx;height: 160rpx;">
									</image>


								</view>
								<view class="" style="padding-left: 20rpx;margin-top: 10rpx;">

									<image src="../../static/11.jpg" mode="" style="width: 270rpx;height: 160rpx;">
									</image>


								</view>
								<view class="" style="padding-left: 20rpx;margin-top: 10rpx;">

									<image src="../../static/11.jpg" mode="" style="width: 270rpx;height: 160rpx;">
									</image>


								</view>
							</view>
						</scroll-view>
					</view>

				</view>

				<view class="" style="margin-left: 30rpx;font-weight: 550;margin-top: 30rpx;">
					排行榜
				</view>
				<view class="">
					<view class="" style="margin-top: 20rpx;">
						<scroll-view class="nav1" scroll-x="true" style="">
							<view class="" style="background-color:#FFFFFF;display: flex;width:1200rpx;height: 350rpx;">
								<view class="" style="padding-left: 20rpx;margin-top: 10rpx;">
									<image src="../../static/xia.png" mode=""
										style="width: 230rpx;height: 250rpx;  position: absolute;">
									</image>
									<view class=""
										style="text-align: center; position: relative;width: 230rpx;height: 130rpx;border-radius: 20rpx;margin-top: 230rpx;background-color: white;">
										<view class="" style="font-weight: 50;">
											畅销排行
										</view>
										<view class="" style="color: #d4d2dd;margin-top: 10rpx;">
											2019/09/09
										</view>
									</view>

								</view>
								<view class="" style="padding-left: 20rpx;margin-top: 10rpx;">

									<image src="../../static/cc.png" mode=""
										style="width: 230rpx;height: 250rpx;  position: absolute;">
									</image>
									<view class=""
										style="text-align: center; position: relative;width: 230rpx;height: 130rpx;border-radius: 20rpx;margin-top: 230rpx;background-color: white;">

										<view class="" style="font-weight: 50;">
											畅销排行
										</view>
										<view class="" style="color: #d4d2dd;margin-top: 10rpx;">
											2019/09/09
										</view>
									</view>

								</view>
								<view class="" style="padding-left: 20rpx;margin-top: 10rpx;">

									<image src="../../static/caje.png" mode=""
										style="width: 230rpx;height: 250rpx;  position: absolute;">
									</image>
									<view class=""
										style="text-align: center; position: relative;width: 230rpx;height: 130rpx;border-radius: 20rpx;margin-top: 230rpx;background-color: white;">

										<view class="" style="font-weight: 50;">
											畅销排行
										</view>
										<view class="" style="color: #d4d2dd;margin-top: 10rpx;">
											2019/09/09
										</view>
									</view>

								</view>
								<view class="" style="padding-left: 20rpx;margin-top: 10rpx;">

									<image src="../../static/cc.png" mode=""
										style="width: 230rpx;height: 250rpx;  position: absolute;">
									</image>
									<view class=""
										style="text-align: center; position: relative;width: 230rpx;height: 130rpx;border-radius: 20rpx;margin-top: 230rpx;background-color: white;">

										<view class="" style="font-weight: 50;">
											畅销排行
										</view>
										<view class="" style="color: #d4d2dd;margin-top: 10rpx;">
											2019/09/09
										</view>
									</view>

								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>

		</view>

		<view class="" style="display: flex;
		justify-content: space-between;margin-top: 20rpx;">
			<view class="" style="margin-left: 30rpx;font-weight: 550;">
				最近上线
			</view>
			<view class="" style="color: #c9c9c9; margin-right: 50rpx;font-size: 20rpx;">
				查看全部
			</view>
		</view>
		<view class="" style="height: 1200rpx;">
			<view class="" style="display: flex;
		justify-content: space-between;">
				<view class="" style="margin-top: 30rpx;margin-left: 20rpx;">
					<image src="../../static/xia.png" mode="" style="width: 250rpx;height: 250rpx;"></image>
				</view>
				<view class="">
					<view class="" style="margin-top: 50rpx; font-weight: 550;font-size: 35rpx;">
						你一直在寻找的西湖大闸蟹...
					</view>
					<view class="" style="margin-top: 35rpx;color: #d0ceda;">
						千里寻海岸酒店
					</view>

					<view class="" style="margin-top: 35rpx;display: flex;">
						<view class="" style="color: #ff5d37;font-weight: 550;font-size: 35rpx;">
							￥199.9
						</view>
						<view class="" style="margin-left: 100rpx; color: #dadada;">
							1999人已买
						</view>
					</view>
				</view>
			</view>

			<view class="" style="display: flex;
			justify-content: space-between;">
				<view class="" style="margin-top: 30rpx;margin-left: 20rpx;">
					<image src="../../static/cc.png" mode="" style="width: 250rpx;height: 250rpx;"></image>
				</view>
				<view class="">
					<view class="" style="margin-top: 50rpx; font-weight: 550;font-size: 35rpx;">
						你一直在寻找的西湖大闸蟹...
					</view>
					<view class="" style="margin-top: 35rpx;color: #d0ceda;">
						千里寻海岸酒店
					</view>

					<view class="" style="margin-top: 35rpx;display: flex;">
						<view class="" style="color: #ff5d37;font-weight: 550;font-size: 35rpx;">
							￥199.9
						</view>
						<view class="" style="margin-left: 100rpx; color: #dadada;">
							1999人已买
						</view>
					</view>
				</view>
			</view>
			<view class="" style="display: flex;
		justify-content: space-between;">
				<view class="" style="margin-top: 30rpx;margin-left: 20rpx;">
					<image src="../../static/xia.png" mode="" style="width: 250rpx;height: 250rpx;"></image>
				</view>
				<view class="">
					<view class="" style="margin-top: 50rpx; font-weight: 550;font-size: 35rpx;">
						你一直在寻找的西湖大闸蟹...
					</view>
					<view class="" style="margin-top: 35rpx;color: #d0ceda;">
						千里寻海岸酒店
					</view>

					<view class="" style="margin-top: 35rpx;display: flex;">
						<view class="" style="color: #ff5d37;font-weight: 550;font-size: 35rpx;">
							￥199.9
						</view>
						<view class="" style="margin-left: 100rpx; color: #dadada;">
							1999人已买
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class=""
			style="width: 100%;height: 120rpx;display: flex;position: fixed;bottom: 0rpx;background-color: white;">
			<view class="" style="flex: 1; ">

				<image style="margin-top: 10rpx;margin-left: 70rpx;width: 60rpx;height: 60rpx;"
					src="../../static/sy.png" mode=""></image>
				<view class="" style="margin-left: 70rpx; color: #fe915d;">
					首页
				</view>
			</view>
			<view class="" style="flex: 1; ">
				<image style="margin-top: 10rpx;margin-left: 70rpx;width: 60rpx;height: 60rpx;"
					src="../../static/xx.png" mode=""></image>
				<view class="" style="margin-left: 70rpx; color: #d2d2d2;">
					学习
				</view>
			</view>
			<view class="" style="flex: 1; ">

				<image style="margin-top: 10rpx;margin-left: 70rpx;width: 60rpx;height: 60rpx;"
					src="../../static/ld.png" mode=""></image>
				<view class="" style="margin-left: 70rpx;color: #d2d2d2;">
					消息
				</view>
			</view>
			<view class="" style="flex: 1;">
				<image style="margin-top: 10rpx;margin-left: 70rpx;width: 60rpx;height: 60rpx;"
					src="../../static/zx.png" mode=""></image>
				<view class="" style="margin-left: 70rpx; color: #d2d2d2;">
					我的
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				indicatorColor: "#292b40",
				indicatorActiveColor: "#ffffff"

			}
		},
		methods: {

		}
	}
</script>

<style>
	.banner {
		width: 350rpx;
		height: 422rpx;
		background-color: #0f0f27;
	}

	.banner .swiper {
		width: 350rpx;
		height: 422rpx !important;
	}

	.banner .swiper-item {
		width: 350rpx;
		height: 422rpx !important;
	}

	.banner .swiper-item image {
		display: block;
		width: 350rpx;
		height: 422rpx !important;
	}


	.top {
		padding-top: 30rpx;
		width: 100%rpx;
		height: 35rpx;
		display: flex;
		justify-content: space-between;
		padding-left: 30rpx;
	}
</style>

V_zcm
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uni-app 开发卡片横向滚轮
StephenEvan的博客
07-03 313
在开发过程中经常会碰到如下的横向滚轮来展现多数据卡片的情况，但是根据uni官网给的示例发现一直无法实现，后来发现是css的内置样式需要调整。 html <scroll-view class="tabScroll" scroll-x="true" > <view class="tabScroll_item" v-for="(items,indexs) in boxList" :key="indexs"> //内容 </view> </scroll-view&
uniapp scroll-view 横向和纵向滚动 带滚动回调
09-10
同时，这两个属性可以动态改变，以实现动态滚动效果。 5. **滚动回调**：`scroll-view`提供了`@scroll`事件，当滚动发生时触发该事件，可以获取到滚动的相关信息，如滚动位置、速度等。例如，在上面的示例中，`...
uni-app：使用scroll-view实现横向滚动
weixin_48596030的博客
05-31 5131
【代码】uni-app：使用scroll-view实现横向滚动。
uniapp中scroll-view横向滚动错乱,左右滑动样式错乱
最新发布
weixin_48095278的博客
05-28 260
uniapp中scroll-view横向滚动错乱,左右滑动样式错乱
uniapp实现横向滚动样式条
jakelihua
11-20 5936
本文讲解，uniapp如何实现横向滚动样式条
uni-app学习04 添加横向滑动导航栏
qq_51575392的博客
07-04 591
【代码】uni-app学习04 添加横向滑动导航栏。
uniapp 横向滑动list（不同内容）分部问题:scroll-view，swiper overflow-x
qq_27909209的博客
06-06 3277
试过一些设置，目前无法通过直接设置让它顶端对齐，并且高度一致。所以如果非要用这个，可以通过辅助方法：自己设置list里面的内容让内容条数相同，并且自己设置的内容可以设置颜色及背景，即可达到视觉对齐效果。横向的话：内容高度一致，（如果不一致的话，scroll-view会自动以底部对齐，形成山峰状，看下图）除了官网说的scroll-view的 横向，纵向，横线滑动，这里遇到一些问题写一下，如果要使用scroll-view也很简单，必备三要素。1：scroll-x或者scroll-y。或者使用swiper。
uniapp横向选项卡（水平导航栏）滚动效果
weixin_51523667的博客
03-23 1139
【代码】uniapp横向选项卡（水平导航栏）滚动效果。
jquery横向动态滑动导航菜单插件
06-05
而“jQuery横向动态滑动导航菜单插件”则为开发者提供了一种高效且吸引人的解决方案，使得网页的导航功能更加直观和互动。这个插件特别适用于那些希望提升用户体验，增加网站视觉吸引力的设计师和开发者。 jQuery是...
fg-menu下拉横向支持四级菜单导航，快捷键
06-06
在IT界，构建高效、易用的用户界面是至关重要的，而“fg-menu下拉横向支持四级菜单导航，快捷键”这一技术就是为了解决这一问题。它是一种UI设计模式，用于提供多层级的导航菜单，使用户能够通过鼠标或键盘快捷键...
横向单行菜单栏
06-06
横向单行菜单栏是UI设计中的一个重要元素，它在移动应用和网页设计中广泛使用，为用户提供简洁且高效的导航方式。这种菜单通常显示在屏幕顶部或底部，包含一系列水平排列的选项，用户可以通过左右滑动来浏览超出视窗...
swift-ElegantSlideMenuView一个优雅的横向滑动导航栏菜单
08-15
"ElegantSlideMenuView"就是这样一个专为Swift设计的高效、优雅的横向滑动导航栏菜单库。 这个库的目标是简化开发过程，让开发者仅用少量代码就能实现具有动画效果的横向滑动菜单。通过集成此库，开发者可以快速地...
Uniapp 横向滚动抽奖页面 组件 引用即可 全端
09-26
引入组件即可 <TC-choujiang></TC-choujiang> 里面的商品图片和被抽出商品跳转页面按照实际情况进行修改。 商品图片可以从数据库中获取进行赋值即可 位置：uni_modules/TC-choujiang/components/TC-choujiang/TC-...
jquery实现可横向和竖向展开的动态下滑菜单效果
10-23
主要介绍了jquery实现可横向和竖向展开的动态下滑菜单效果,以实例形式较为详细的分析了jquery实现横向与竖向展开菜单的相关技巧,非常具有实用价值,需要的朋友可以参考下
uniapp实现横向滚动选择日期
01-18
本文实例为大家分享了uniapp实现横向滚动选择日期的具体代码，供大家参考，具体内容如下 1.方法封装 common.js //获取当前时间，格式YYYY-MM-DD HH:MM:SS const GetNowTime = time => { var date = time, year = ...
Android自定义横向滑动菜单的实现
08-27
同时，横向滑动菜单也可以实现菜单项的动态添加和删除。 7. 横向滑动菜单的缺点 横向滑动菜单的缺点是需要自定义控件来实现，需要一定的编程基础和经验。同时，横向滑动菜单也需要占用屏幕的宽度，可能会影响其他...
uniapp横向滚动示例
Jiaxin_02的博客
01-18 943
uniapp实现横向滚动并隐藏滚动条。
uni-app，使用scroll-view实现横向滚动
也简的博客
07-12 6721
uni-app使用scroll-view实现横向滚动；uni-app中使用scroll-view实现横向滚动
uniapp横向滚动（scroll-view）
babyxuqian的博客
10-19 9938
属性名 类型 默认值 说明 平台差异说明 scroll-x Boolean false 允许横向滚动 scroll-y Boolean false 允许纵向滚动 upper-threshold Number 50 距顶部/左边多远时（单位px），触发 scrolltoupper 事件 lower-threshold Number 50 距底部/右边多远时（单位px），触发
uniapp scroll-view 横向滑动菜单,每个item根据首屏展示数量平均分配宽度
07-17
你可以使用 `flex` 布局来实现横向滑动菜单，并根据首屏展示数量平均分配宽度。以下是一个示例代码： ```html <template> <scroll-view class="menu" scroll-x> <view class="menu-item" v-for="(item, index) in menuItems" :key="index" :style="itemStyle"> {{ item }} </view> </scroll-view> </template> <script> export default { data() { return { menuItems: ['菜单1', '菜单2', '菜单3', '菜单4', '菜单5', '菜单6'], screenWidth: 375, // 屏幕宽度，可以根据实际情况修改 visibleItemCount: 3 // 首屏展示的菜单数量，可以根据实际情况修改 }; }, computed: { itemStyle() { const itemWidth = this.screenWidth / this.visibleItemCount; return `width: ${itemWidth}px`; } } }; </script> <style> .menu { white-space: nowrap; } .menu-item { display: inline-block; } </style> ``` 在上面的代码中，我们使用 `scroll-view` 组件来创建一个横向滑动的菜单栏。每个菜单项都通过 `v-for` 指令动态生成，并通过 `:style` 绑定属性设置每个菜单项的宽度。菜单项的宽度通过计算得出，将屏幕宽度除以首屏展示的菜单数量即可。通过设置 `white-space: nowrap` 和 `display: inline-block` 的样式，使菜单项水平排列并能够横向滑动。 请根据你的实际需求修改 `menuItems`、`screenWidth` 和 `visibleItemCount` 的值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值