走进移动端世界，实现左右菜单联动效果轻松上手（vue+better-scroll）

已于 2023-07-03 15:20:20 修改
阅读量4.6k 收藏 55
点赞数 13
分类专栏： vue 文章标签： 前端 vue
于 2021-12-02 17:30:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Shids_/article/details/121682042
版权

前言

作为移动端开发者，我们不仅需要关注应用的功能和界面设计，还需要注重用户体验。而实现左右菜单联动效果，则是一种能够提升用户体验、让用户感受到应用的高质感与专业性的技术。本文将介绍一种简单易懂的方法，帮助你实现左右菜单联动效果，让你的应用在众多应用中脱颖而出。

实现效果
在这里插入图片描述

1.首先我们先安装一下相关依赖

cnpm install better-scroll
cnpm install stylus stylus-loader@3.0.1 --save-dev

2.在相关组件中引入

import BScroll from "better-scroll";

3.使用

<template>
	<div>
		<div class="commodity">
			<!--// 左侧导航内容 -->
			<div class="leftNav">
				<ul>
					<li v-for="(item, index) in shopList" :key="index" :class="{ typeStyle: index === currentIndex }"
						@click="onClickNav(index)">
						<span class="leftTit">{{ item.shopName }}</span>
					</li>
				</ul>
			</div>
			<!--// 右侧商品内容 -->
			<div class="rightContant">
				<ul ref="shopContant">
					<li class="eventList" v-for="(item, index) in shopList" :key="index">
						<div class="rightTtitle">{{ item.shopName }}</div>
						<ul>
							<li class="gather" v-for="(item, index) in item.shopGather" :key="index">
								<div>
									<img :src="item.shopImgUrl" />
								</div>
								<div class="distance">
									<div class="shopName">{{ item.shopName }}</div>
									<div class="saleGood">
										<span>月售{{ item.monthNum }}份</span>
										<span>好评率{{ item.reputation }}%</span>
									</div>
									<div class="price">
										<span>￥{{ item.price }}</span>
									</div>
								</div>
							</li>
							<div style="height:1px"></div>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	import BScroll from "better-scroll"; //引入BScroll插件
	export default {
		data() {
			return {
				scrollY: 0, // 右侧滑动的时候距离顶部的值
				rightSide: [], // 所有右侧分类li的top组成的数组  (列表第一次显示后就不再变化)
				//模拟的商品数据
				shopList: [{
						shopName: "居家",
						shopGather: [{
								shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/4dafc90ab96af8c7f7ceeb2896f2212a.png",
								shopName: "简约钟表",
								monthNum: 4,
								reputation: 98,
								price: 2,
							},
							{
								shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/404c8206706344a557fea0353a654c83.png",
								shopName: "背枕",
								monthNum: 213,
								reputation: 99,
								price: 56.85,
							},
							{
								shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/469cd4b31a8ee89d5982e50feaad7207.png",
								shopName: "收纳柜子",
								monthNum: 789,
								reputation: 90,
								price: 23.9,
							},
							{
								shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/b95b86907a55dd7ee97baf154af16a79.png",
								shopName: "创可贴",
								monthNum: 12,
								reputation: 85,
								price: 125,
							},
							{
								shopImgUrl: "https://cdn.it120.cc/apifactory/2018/06/01/e3460c39473756c582031e248f3ea1c9.jpg",
								shopName: "床品四件套",
								monthNum: 1211,
								reputation: 99,
								price: 99.00,
							},
							{
								shopImgUrl: "https://cdn.it120.cc/apifactory/2018/06/01/d6634a4a9ba98cf25c36cbfec3f6e4df.png",
								shopName: "按摩椅",
								monthNum: 78,
								reputation: 95,
								price: 2998.00,
							},
						]
					},
					{
						shopName: "配件装饰",
						shopGather: [{
								shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/f9e64699f2b30840926558f7e6fef5b7.png",
								shopName: "蓝宝石项链",
								monthNum: 4871,
								reputation: 99,
								price: 899,
							},
							{
								shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/04ff245798456499336ab2ef6dd833ec.png",
								shopName: "眼镜框（无度数）",
								monthNum: 10214,
								reputation: 97,
								price: 9.9,
							},
							{
								shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/1917c4b6918dabe384a0c17b8ef613b0.png",
								shopName: "腰带",
								monthNum: 4561,
								reputation: 99,
								price: 78,
							},
							{
								shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/7bdf83cc4a65fb6e201fb7af34e77efb.png",
								shopName: "袜子",
								monthNum: 13541,
								reputation: 100,
								price: 9.9,
							},
							{
								shopImgUrl: "https://cdn.it120.cc/apifactory/2018/06/01/7a6e5b5227cb606c48a097d712d4ee2f.png",
								shopName: "行李箱",
								monthNum: 7841,
								reputation: 98,
								price: 299,
							},
							{
								shopImgUrl: "https://cdn.it120.cc/apifactory/2018/06/01/d3d0a300076c3e8337bca84dc2dfd496.png",
								shopName: "钱包小皮件",
								monthNum: 798,
								reputation: 96,
								price: 39.99,
							}
						]
					},
					{
						shopName: "服装",
						shopGather: [{
								shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/534467788da6d2b479291913564b9c76.png",
								shopName: "男士外套",
								monthNum: 484,
								reputation: 100,
								price: 129.99,
							},
							{
								shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/7878107c86fdd36ee7c584d9a5966bdc.png",
								shopName: "女士外套",
								monthNum: 467,
								reputation: 98,
								price: 199.99,
							},
							{
								shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/ec6e0e01c5b341401b2a910838f3d456.png",
								shopName: "王女士裙装",
								monthNum: 5641,
								reputation: 100,
								price: 56.9,
							},
							{
								shopImgUrl: "https://cdn.it120.cc/apifactory/2018/06/01/8f101426deb15865773eedf2cea6c091.png",
								shopName: "衬衫",
								monthNum: 7845,
								reputation: 99,
								price: 45.9,
							},
							{
								shopImgUrl: "https://cdn.it120.cc/apifactory/2018/06/01/718233411b1cb6ac7963bc33d2949890.png",
								shopName: "T恤",
								monthNum: 89742,
								reputation: 99,
								price: 29.9,
							},
							{
								shopImgUrl: "https://z3.ax1x.com/2021/12/02/otnUsg.png",
								shopName: "面包服",
								monthNum: 8874,
								reputation: 99,
								price: 119.9,
							},
							{
								shopImgUrl: "https://z3.ax1x.com/2021/12/02/otnHSK.png",
								shopName: "男士毛衣",
								monthNum: 79841,
								reputation: 100,
								price: 59.9,
							}
						]
					},
					{
						shopName: "数码电器",
						shopGather: [{
								shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/f8f0d693f57dc2d57a664247d873011d.png",
								shopName: "苹果x",
								monthNum: 89754,
								reputation: 98,
								price: 2999.99,
							},
							{
								shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/1994edeebab2bc9b764d9a4b2d7a37c6.png",
								shopName: "耳机",
								monthNum: 48674,
								reputation: 100,
								price: 29.99,
							},
							{
								shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/f6e21e142cba3231b093a872f6b0f4d5.png",
								shopName: "电动牙刷",
								monthNum: 4649,
								reputation: 99,
								price: 29.99,
							},
							{
								shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/96c0bf18a79bb36b7cdab03d821f917f.png",
								shopName: "九阳豆浆机",
								monthNum: 7841,
								reputation: 100,
								price: 599.99,
							},
							{
								shopImgUrl: "https://z3.ax1x.com/2021/12/02/otuKpV.png",
								shopName: "手机支架",
								monthNum: 58548,
								reputation: 98,
								price: 2.9,
							},
							{
								shopImgUrl: "https://z3.ax1x.com/2021/12/02/otu0XD.png",
								shopName: "鼠标",
								monthNum: 102145,
								reputation: 100,
								price: 29.99,
							},
							{
								shopImgUrl: "https://z3.ax1x.com/2021/12/02/otu7As.png",
								shopName: "键盘",
								monthNum: 4814,
								reputation: 99,
								price: 252.99,
							},
							{
								shopImgUrl: "https://z3.ax1x.com/2021/12/02/otKmHH.png",
								shopName: "手机壳",
								monthNum: 78451,
								reputation: 100,
								price: 9.9,
							},
							{
								shopImgUrl: "https://z3.ax1x.com/2021/12/02/otM2y8.png",
								shopName: "数码相机",
								monthNum: 789,
								reputation: 100,
								price: 8599,
							},
							{
								shopImgUrl: "https://z3.ax1x.com/2021/12/02/otMXmF.png",
								shopName: "笔记本电脑",
								monthNum: 1145,
								reputation: 95,
								price: 10999,
							},
							{
								shopImgUrl: "https://z3.ax1x.com/2021/12/02/otQVTH.png",
								shopName: "充电器",
								monthNum: 914,
								reputation: 89,
								price: 89.9,
							},
							{
								shopImgUrl: "https://z3.ax1x.com/2021/12/02/otQ80g.png",
								shopName: "充电宝",
								monthNum: 8489,
								reputation: 99,
								price: 99.9,
							},
						]
					}
				]
			};
		},
		mounted() {
			this.initializeRoll(); //滑动初始化方法
			this.initializeOwn(); //初始化rightSide方法
		},
		//计算属性
		computed: {
			// 计算出当前分类的下标
			currentIndex() {
				const {
					scrollY,
					rightSide
				} = this; //拿到每次滑动的值以及每一个分类的下标值
				console.log('滚动的值及每一个分类的下标值...', this)
				//findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置
				//获取数组rightSide中每一个下标值并筛选条件返回第一个元素索引位置
				const index = rightSide.findIndex((top, index) => {
					// scrollY>=当前top && scrollY<下一个top
					return scrollY >= top && scrollY < rightSide[index + 1];
				});
				// 返回结果
				return index;
			}
		},
		methods: {
			// 初始化滚动
			initializeRoll() {
				// new一个类的实例，前提必须确保父元素和子元素的内容已经正确渲染了，不然不会生效
				new BScroll(".leftNav", {
					click: true
				});
				// 组件实例上挂属性
				this.foodsScroll = new BScroll(".rightContant", {
					probeType: 2, // 因为惯性滑动不会触发
					click: true
				});

				// 给右侧列表绑定scroll监听
				this.foodsScroll.on("scroll", ({
					x,
					y
				}) => {
					this.scrollY = Math.abs(y);
				});
				// 给右侧列表绑定scroll结束的监听
				this.foodsScroll.on("scrollEnd", ({
					x,
					y
				}) => {
					console.log("操作结束的下标值" + x, y);
					this.scrollY = Math.abs(y);
				});
			},
			// 初始化rightSide
			initializeOwn() {
				// 初始化rightSide
				const rightSide = [];
				let top = 0;
				rightSide.push(top);
				// 找到所有分类下的li
				const lis = this.$refs.shopContant.getElementsByClassName("eventList"); //获取dom元素lii（eventList），对其进行操作
				// slice() 方法返回一个新的数组对象
				Array.prototype.slice.call(lis).forEach(li => {
					top += li.clientHeight; //相当于top = top + li.clientHeight
					rightSide.push(top);
				});

				//更新数据
				this.rightSide = rightSide;
				console.log("每一个分类的下标" + rightSide);
			},
			//左侧点击事件
			onClickNav(index) {
				console.log(index);
				//拿到目标位置的scrollY，点击左侧导航，右侧列表滑动到对应的位置
				const scrollY = this.rightSide[index];
				// 点击的分类成为当前分类，索引当前选中的导航标题
				this.scrollY = scrollY;
				// 平滑滑动右侧列表
				this.foodsScroll.scrollTo(0, -scrollY, 1000);
			}
		}
	};
</script>
<style scoped>
	.commodity {
		/* 最大的盒子样式 */
		display: flex;
		position: fixed;
		top: 0px;
		bottom: 0px;
		width: 100%;
		background: #fff;
		overflow: hidden;
	}

	.leftNav {
		/* 左侧大盒子的整体样式 */
		width: 80px;
		background: rgb(248, 248, 248);
	}

	.typeStyle {
		/* 左侧导航选中的样式 */
		background: #fff;
		font-weight: bold;
		display: flex;
		align-items: center;
		color: rgb(255, 94, 121);
		justify-content: center;
		border-left: 2px solid rgb(255, 94, 121);
	}

	.leftTit {
		/* 左侧导航标题默认样式 */
		display: flex;
		height: 40px;
		justify-content: center;
		font-size: 12px;
		align-items: center;
	}

	.rightContant {
		/* 右侧大盒子的整体样式 */
		flex: 1;
	}

	.rightTtitle {
		/* 右侧标题样式 */
		padding-left: 12px;
		height: 26px;
		line-height: 26px;
		font-size: 12px;
		font-weight: bold;
		color: rgb(147, 153, 159);
		background: rgb(248, 248, 248);
		margin: 0;
	}

	.gather {
		/* 右侧每一个商品的样式 */
		display: flex;
		margin: 16px;
		display: flex;
		align-items: center;
	}

	.distance {
		/* 右侧图片与描述间距 */
		padding-left: 6px;
	}

	.gather img {
		/* 右侧图片样式 */
		width: 60px;
		height: 60px;
		vertical-align: middle;
	}

	:last-child {
		/* 点击左侧导航右侧内容与左边对齐 */
		margin-bottom: 0;
	}

	.shopName {
		/* 右侧商品标题字体大小 */
		font-size: 14px;
	}

	.saleGood {
		/* 右侧月售好评样式 */
		font-size: 10px;
		color: rgb(147, 153, 159);
		padding: 4px 0px;
	}

	.saleGood span:first-child {
		/* 月售样式 */
		padding-right: 10px;
	}

	.price {
		/* 价格样式 */
		font-weight: bold;
		font-size: 14px;
		color: rgb(255, 94, 121);
	}
</style>
水星记_
关注
  • 13
    点赞
  • 踩
  • 55
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
专栏目录
前端vue可以左右滚动的切换的tabs tabs选项卡 滑动动画效果 自动宽度
chenchuang0128的博客
06-12 6903
swiperTabList: ["2023-06-10","2023-06-11","2023-06-12","2023-06-13","2023-06-14","2023-06-15"], //导航列表。swiperTabList: ["2023-06-10","2023-06-11","2023-06-12","2023-06-13","2023-06-14","2023-06-15"], //导航列表。curSwiperLineActiveBg: '#1D63FF', //当前选中的导航栏线条颜色。
左右菜单联动：轻松实现网页导航的高效与便捷！
CRMEB小程序商城的博客
12-18 1421
去获取当前的所有节点集合，再配合 scroll-view 的 scroll-top 属性，使其在点击左侧菜单栏的时候动态赋值右侧scroll-view 的 scroll-top 属性，从而实现点击左侧菜单栏时右侧内容区域进行滚动。
vue 之 商品列表的左右联动
weixin_47409897的博客
12-19 2151
目录vue 之 商品列表的左右联动思路实现代码 vue 之 商品列表的左右联动 思路 1：初始化的时候，左右两侧实现 可以滚动 监听右侧的滚动事件，把具体的滚动y轴的值，赋值给 scrollY 2：然后计算出右侧的每一个板块的距离顶部高度，为一个高度数组 3：计算属性之中，设置当前高亮 返回当前索引 需要找到当前索引，然后根据这个高度数组，和scrollY进行比较，需要返回那个索引 4：点击左侧切换的时候，拿当前的索引号，然后再拿到右侧的滚动位置，赋值给scrollY，最后调用右侧的滚动事件
【菜狗学前端】uniapp(vue3|微信小程序)实现外卖点餐的左右联动功能
最新发布
m0_58355897的博客
06-15 963
uniapp(vue3|微信小程序)实现外卖点餐的左右联动功能，点击左对应右，滚动右对应左
Vue中如何进行表单联动与级联选择？
徐师兄的博客
06-13 2813
在Vue.js中实现表单联动和级联选择，可以使用计算属性、watcher和自定义指令等技术。表单联动可以使用计算属性和watcher来实现，计算属性适用于简单的场景，而watcher适用于复杂的场景。级联选择可以使用watcher和计算属性来实现，watcher适用于少量级联选择，而计算属性适用于多级级联选择。在实际应用中，我们需要根据具体的场景和需求来选择合适的实现方式。同时，我们还需要注意代码的可维护性和可读性，避免出现冗长和复杂的代码。
elementui+vue实现菜单导航跟main区域的tabs联动效果
caixuanji的博客
10-26 8488
elementui+vue实现菜单导航跟main区域的tabs联动效果
vue中实现外卖侧边栏左右联动
m0_65519288的博客
02-01 1787
计算下标的时候需要注意的是：当前滚动距离scrollY是需要大于等于当前top值（top是tops数组中的每一项），还要小于下一个top，拿到在这个区间内的数的下标，返回index。（要初始化滚动和高度，初始化的时机很重要，必须要知道dom元素的高度，而dom元素的高度是通过请求来的数据渲染而成的，这时候则需要在watch搭配$nextTick进行初始化。4.1、在初始化滚动的时候，需要配置click为true，因为better-scroll默认阻止了原生的点击事件。4、先定义初始化滚动和高度的方法。
Vue + better-scroll 实现移动端字母索引导航功能
08-27
Vue + better-scroll 实现移动端字母索引导航功能 Better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴了 iscroll 的实现，其 API 设计基本兼容 iscroll，在 iscroll 的基础上...
vue使用better-scroll实现菜单列表左右联动
07-13
在本篇文章中，我们将深入探讨如何在 Vue 项目中利用 Better-Scroll 实现菜单列表的左右联动功能。 首先，我们需要了解 Better-Scroll 的基本用法。Better-Scroll 提供了丰富的滚动功能，包括但不限于横向滚动、...
vue和better-scroll实现列表左右联动效果详解
10-17
在实现左右联动的过程中，关键在于两个独立的Better-Scroll列表，它们分别对应左侧的菜单列表和右侧的商品列表。以下为实现步骤： 1. **构建DOM结构**： - 左侧菜单列表（menu-wrapper）：包含一系列可点击的菜单...
vue使用better-scroll实现滑动以及左右联动
10-15
在Vue.js应用中，我们可以利用Better Scroll库来实现滑动效果和左右联动功能。Better Scroll是一个强大的滚动插件，能够提供类似原生滚动的流畅体验，尤其适合移动端应用。以下是对如何在Vue项目中集成和使用Better ...
vue左右侧联动滚动的实现代码
01-21
本文介绍了vue左右侧联动滚动的实现代码，分享给大家，具体如下： 实现功能: 点击左侧,右侧滚动到相应位置, 滚动右侧, 左侧滚动到相应位置 布局结构: 开源滚动库: better-scroll.js 技术要点: 1.是对紧邻的元素生效 如: 初始化在元素上 2.foods-wrapper的高度小于content高度时才会发生滚动 3.点击左侧菜单列表时,只需要计算右侧对应的偏移距离
基于Vue的可滑动菜单栏
08-13
基于Vue的移动端可滑动菜单栏
uni-app实现组件菜单左右滑动并点击切换（选中居中显示）demo效果（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
03-11 1584
uni-app实现组件菜单左右滑动并点击切换（选中居中显示）demo效果 选择导航可以居中或靠左
小程序侧边导航栏左右联动
ShinyRuo_的博客
05-13 2375
1.点击左边导航栏,右边内容滚动到指定区域 用scroll-view组件中的scroll-into-view来解决 <view class="content-group"> <view class="nav-list"> <block wx:for-items="{{list}}" wx:key="{{index}}" > <view class="{{activeIndex == index ? 'nav-item-active':'na
vue 左右滑动菜单_Vue实现左右菜单联动实现
weixin_39918961的博客
12-22 1305
根据掘金评论需求，更新了数据接口并修复了一些问题之前在外卖软件上看到这个左右联动的效果，觉得很有意思，所以就尝试使用Vue来实现，将这个联动抽离成为一个单独的组件，废话少说，先来一张效果图。这个组件分为两个部分，1、左菜单；2、右菜单。动态数据结构menus: [{name: '菜单1',data: [{name: '1.1'},{name: '1.2'},{name: '1.3'},{name:...
vue上实现左右关联滚动
sqf251877543的博客
03-10 1499
/ todo 优化 => 改成小于等于，加break 少循环。//获取右侧所有item的offsetTop。// 获取当前文档流的 scrollTop。//左侧item点击事件。
vue里tab菜单横向展示，可分页功能组件实现
weixin_43299180的博客
07-08 2778
这个功能思路跟轮播图差不多，下面实现思路是按照tab宽度移动，具体实现直接上代码 子组件： <template> <div class="dataNav"> <el-button v-if="move != 0 && !dataLen" size='small' icon="el-icon-arrow-left" @click="navPrev"></el-button> <ul class="dataNavLis
Vue实现左侧菜单项与tab标签页的同步效果
qq_45630411的博客
02-15 3386
vue菜单项与tab标签项同步切换效果
vue vue-better-scroll 左右侧菜单联动demo
09-03
Vue是一种用于构建用户界面的渐进式JavaScript框架，它可以帮助开发者更高效地构建单页面应用程序。而vue-better-scroll是基于Vue的一款优秀的滚动插件，它能够实现更流畅的滚动效果，并且支持上下左右的滚动和联动效果。 如果需要实现左右侧菜单的联动效果，我们可以通过使用vue-better-scroll的scrollToElement方法来实现。首先，我们需要在Vue中引入vue-better-scroll插件并进行配置。 在Vue实例的data中，我们可以定义左右两个菜单的数据，例如leftMenu和rightMenu，并在created生命周期中初始化数据。然后，在mounted生命周期中，我们可以通过refs属性获取到两个菜单容器的DOM元素。 接下来，我们需要监听左边菜单的点击事件，当点击左边菜单的某个选项时，我们可以通过调用vue-better-scroll的scrollToElement方法，将右边菜单滚动到对应的位置。通过传递目标元素的选择器或具体的DOM元素，我们可以实现左右菜单的联动效果。 具体实现时，我们可以在左边菜单的点击事件中，使用this.$refs来访问右边菜单容器，并调用scrollToElement方法，将目标元素滚动到可视区域。通过传递选择器或具体DOM元素作为参数，我们可以精确控制滚动的位置。 同时，为了视觉上更好的效果，我们还可以给目标元素添加样式，如高亮当前选中项，以提升用户体验。 最后，通过一系列的事件处理和样式设置，我们就可以实现左右侧菜单的联动demo了。 以上就是使用Vue和vue-better-scroll实现左右侧菜单联动demo的大致思路和步骤。通过合理运用这两个工具，我们可以轻松地实现出一个流畅、友好的用户界面效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

水星记_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值