uni tabs组件，tab选项卡滑动切换

已于 2023-12-22 16:16:57 修改
阅读量639 收藏
点赞数
分类专栏： vue 文章标签： javascript
于 2023-12-19 15:08:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45024453/article/details/135084949
版权

效果展示：

效果描述：

1.tabs点击和左右切换滑动，

2.uni框架，思路是找寻存在的tab组件，发现uni组件库没有

参考链接：uniapp实现tab选项卡 

核心思路：

技术背景：

uni框架，基于vue2语法

完整代码：

<template>
	<view class="content">
		<view class="head">
			<view class="my_information">
				<view class="name">
					<view class="toBack"></view>
					<view class="title_name">设备状态监控</view>
					<view class="ship_change">
						<uni-data-select v-model="shipGuid" :localdata="shipList" @change="changeShip"
							placeholder="请选择船舶"></uni-data-select>
					</view>
				</view>
				<scroll-view class="scroll-view_H" scroll-x="true" scroll-with-animation>
					<view class="modules_titles">
						<view class="lists" v-for="(item, index) in modelList" :key="index"
							:class="currentIndex == index ? 'module_active' : ''" @click="changeModules(index)">
							{{ item.name }}
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- <view class="modules_content">
			<view class="modules_components">
				<component :is="currentComponents"></component>
			</view>
		</view> -->
		<!-- 选项卡内容轮播滑动显示，current为当前第几个swiper子项 -->
		<swiper @change="change" :current="isActive" class="modules_content">
			<swiper-item class="swiperitem-content">
				<scroll-view scroll-y style="height: 100%;">
					<view class="nav_item">
						<block>
							<view class="echart_box">
								<pieChart :option="hostOpt1" echartsId="IndexA" height="300rpx"></pieChart>
							</view>
							<view class="echart_box"
								style="width: 100%;display: flex;justify-content: space-evenly;align-items: center;">
								<view class="termp_home">
									<view class="title">左滑油温度</view>
									<pieChart :option="hostOpt2" echartsId="IndexB" height="300rpx"></pieChart>
								</view>
								<view class="termp_home">
									<view class="title">右滑油温度</view>
									<pieChart :option="hostOpt22" echartsId="Indexb" height="300rpx"></pieChart>
								</view>
							</view>
							<view class="echart_box" style="margin-top: 30rpx;">
								<pieChart :option="hostOpt3" echartsId="IndexC" height="300rpx"></pieChart>
							</view>
						</block>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiperitem-content">
				<scroll-view scroll-y style="height: 100%;">
					<view class="nav_item">
						<block>
							<view class="echart_box"
								style="width: 100%;display: flex;justify-content: space-evenly;align-items: center;">
								<view class="termp_home">
									<view class="title">左淡水排温温度</view>
									<pieChart :option="hostOpt2" echartsId="IndexD" height="300rpx"></pieChart>
								</view>
								<view class="termp_home">
									<view class="title">右淡水排温温度</view>
									<pieChart :option="hostOpt22" echartsId="Indexd" height="300rpx"></pieChart>
								</view>
							</view>
							<view class="echart_box"
								style="width: 100%;display: flex;justify-content: space-evenly;align-items: center;">
								<view class="termp_home">
									<view class="title">左淡水进温温度</view>
									<pieChart :option="hostOpt22" echartsId="IndexE" height="300rpx"></pieChart>
								</view>
								<view class="termp_home">
									<view class="title">右淡水进温温度</view>
									<pieChart :option="hostOpt22" echartsId="Indexe" height="300rpx"></pieChart>
								</view>
							</view>
							<view class="echart_box"
								style="width: 100%;display: flex;justify-content: space-evenly;align-items: center;">
								<view class="termp_home">
									<view class="title">左排烟管排气温度</view>
									<view class="container">
										<block v-for="(item, index) in 2" :key="index">
											<view class="item">
												<div class="item_xuhao">#{{ index + 1 }}</div>
												<div class="item_right">
													<div class="num">50.5</div>
													<div class="unit">゜C</div>
												</div>
											</view>
										</block>
									</view>
								</view>
								<view class="termp_home">
									<view class="title">右排烟管排气温度</view>
									<view class="container">
										<block v-for="(item, index) in 2" :key="index">
											<view class="item">
												<div class="item_xuhao">#{{ index + 1 }}</div>
												<div class="item_right">
													<div class="num">50.5</div>
													<div class="unit">゜C</div>
												</div>
											</view>
										</block>
									</view>
								</view>
							</view>
						</block>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiperitem-content">
				<scroll-view scroll-y style="height: 100%;">
					<view class="nav_item">
						<block>
							<view class="echart_box">
								<pieChart :option="altOpt1" echartsId="AltA" height="300rpx"></pieChart>
							</view>
							<view class="echart_box"
								style="width: 100%;display: flex;justify-content: space-evenly;align-items: center;">
								<view class="termp_home">
									<view class="title">左排温温度</view>
									<pieChart :option="altOpt2" echartsId="AltB" height="300rpx"></pieChart>
								</view>
								<view class="termp_home">
									<view class="title">右排温温度</view>
									<pieChart :option="altOpt22" echartsId="Altb" height="300rpx"></pieChart>
								</view>
							</view>
							<view class="echart_box" style="margin-top: 30rpx;">
								<pieChart :option="altOpt3" echartsId="AltC" height="300rpx"></pieChart>
							</view>
						</block>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiperitem-content">
				<scroll-view scroll-y style="height: 100%;">
					<view class="nav_item">
						<block>
							<view class="echart_box">
								<pieChart :option="rudOpt1" echartsId="RudderA" height="300rpx"></pieChart>
							</view>
							<view class="echart_box"
								style="width: 100%;display: flex;justify-content: space-evenly;align-items: center;">
								<view class="termp_home">
									<view class="title">左液压油温度</view>
									<pieChart :option="rudOpt2" echartsId="RudderB" height="300rpx"></pieChart>
								</view>
								<view class="termp_home">
									<view class="title">右液压油温度</view>
									<pieChart :option="rudOpt22" echartsId="Rudderb" height="300rpx"></pieChart>
								</view>
							</view>
							<view class="echart_box" style="margin-top: 30rpx;">
								<pieChart :option="rudOpt3" echartsId="RudderC" height="300rpx"></pieChart>
							</view>
						</block>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiperitem-content">
				<scroll-view scroll-y style="height: 100%;">
					<view class="nav_item">
						<block>
							<view class="echart_box">
								<pieChart :option="rudOpt4" echartsId="RudderD" height="300rpx"></pieChart>
							</view>
							<view class="echart_box"
								style="width: 100%;display: flex;justify-content: space-evenly;align-items: center;">
								<view class="termp_home">
									<view class="title">左滑油温度</view>
									<pieChart :option="rudOpt5" echartsId="RudderE" height="300rpx"></pieChart>
								</view>
								<view class="termp_home">
									<view class="title">右滑油温度</view>
									<pieChart :option="rudOpt55" echartsId="Ruddere" height="300rpx"></pieChart>
								</view>
							</view>
							<view class="echart_box" style="margin-top: 30rpx;">
								<pieChart :option="rudOpt6" echartsId="RudderF" height="300rpx"></pieChart>
							</view>
						</block>
					</view>
				</scroll-view>
			</swiper-item>
			<!-- <swiper-item class="swiperitem-content">
				<scroll-view scroll-y style="height: 100%;">
					<view class="nav_item">
						另一个页面
					</view>
				</scroll-view>
			</swiper-item> -->
		</swiper>
	</view>
</template>
<script>
import host from "@/components/IndexComponents/host.vue"
import alternator from "@/components/IndexComponents/alternator.vue"
import rudder from "@/components/IndexComponents/rudder.vue"
import store from '@/store/index.js'
import pieChart from '@/components/graph/pieChart.vue';
import { pieSpeed, tempBar } from "@/utils/chart.js"

export default {
	components: {
		host,
		alternator,
		rudder,
		pieChart,
	},
	data() {
		return {
			currentIndex: 0,//选中的设备类型
			isActive: 0,//选中的swiper
			// currentComponents: "host",
			modelList: [
				{
					name: "主机状态",
					components: "host",
				},
				{
					name: "发电机状态",
					components: "alternator",
				},
				{
					name: "舵桨轴系",
					components: "rudder",
				},
			],
			shipGuid: "",
			shipList: [],
			//主机
			hostOpt1: {},
			hostOpt2: {},
			hostOpt22: {},
			hostOpt3: {},
			//发电机
			altOpt1: {},
			altOpt2: {},
			altOpt22: {},
			altOpt3: {},
			//舵桨轴系
			rudOpt1: {},
			rudOpt2: {},
			rudOpt22: {},
			rudOpt3: {},
			rudOpt4: {},
			rudOpt5: {},
			rudOpt55: {},
			rudOpt6: {},
		}
	},
	created() {
		this.getApiData()
	},
	methods: {
		// 当前点击子元素靠左留一个选项展示，子元素宽度不相同也可实现
		changeModules(index) {
			// this.currentIndex = index;
			// this.currentComponents = this.modelList[index].components
			switch (index) {
				case 0:
					this.isActive = 0
					break;
				case 1:
					this.isActive = 2
					break;
				case 2:
					this.isActive = 3
					break;
				default:
					this.isActive = 0
					break;
			}
		},
		changeShip() {
			console.log(11, this.shipGuid)
			this.$store.commit('setShipGuids', this.shipGuid);
		},
		// swiper滑动时，获取其索引，也就是第几个
		change(e) {
			const { current } = e.detail;
			this.isActive = current;
		},
		getApiData() {
			console.log('api parseInt(1000/10)>>>', parseInt(3000 / 10));
			let host1 = [
				{ title: '左主机转速', name: 'r/min', value: 890, unit: '', pos: ['25%', '50%'], rangeMax: 1200 },
				{ title: '右主机转速', name: 'r/min', value: 890, unit: '', pos: ['75%', '50%'], rangeMax: 1200 },
			]
			let host3 = [
				{ title: '左增压器转速', name: 'r/min', value: 890, unit: '', pos: ['25%', '50%'], rangeMax: 1200 },
				{ title: '右增压器转速', name: 'r/min', value: 890, unit: '', pos: ['75%', '50%'], rangeMax: 1200 },
			]
			let luProps = {
				title: '31.2゜C',
				TP_max: 80,
				TP_min: 20,
				TP_value: 30,
				kdtop: 135,
				grids: {
					xgrid: "40%",
					chartGrid: -17,
					kdGrid: -7,
				}
			}
			this.hostOpt1 = pieSpeed(host1)
			this.hostOpt2 = tempBar(luProps)
			this.hostOpt22 = tempBar(luProps)
			this.hostOpt3 = pieSpeed(host3)
			let alt1 = [
				{ title: '左发电机转速', name: 'r/min', value: 890, unit: '', pos: ['25%', '50%'], rangeMax: 1200 },
				{ title: '右发电机转速', name: 'r/min', value: 890, unit: '', pos: ['75%', '50%'], rangeMax: 1200 },
			]
			let alt2 = [
				{ title: '左启动空气压力', name: 'MPa', value: 0.60, unit: '', pos: ['25%', '50%'], rangeMax: 1 },
				{ title: '右启动空气压力', name: 'MPa', value: 0.65, unit: '', pos: ['75%', '50%'], rangeMax: 1 },
			]
			this.altOpt1 = pieSpeed(alt1)
			this.altOpt2 = tempBar(luProps)
			this.altOpt22 = tempBar(luProps)
			this.altOpt3 = pieSpeed(alt2)
			let rud1 = [
				{ title: '左桨角', name: 'r/min', value: 890, unit: '', pos: ['25%', '50%'], rangeMax: 1200 },
				{ title: '右桨角', name: 'r/min', value: 890, unit: '', pos: ['75%', '50%'], rangeMax: 1200 },
			]
			let rud3 = [
				{ title: '左舵桨转速', name: 'r/min', value: 890, unit: '', pos: ['25%', '50%'], rangeMax: 1200 },
				{ title: '右舵桨转速', name: 'r/min', value: 890, unit: '', pos: ['75%', '50%'], rangeMax: 1200 },
			]
			this.rudOpt1 = pieSpeed(rud1)
			this.rudOpt2 = tempBar(luProps)
			this.rudOpt22 = tempBar(luProps)
			this.rudOpt3 = pieSpeed(rud3)
			let rud4 = [
				{ title: '左舵桨中间轴转速', name: 'r/min', value: 890, unit: '', pos: ['25%', '50%'], rangeMax: 1200 },
				{ title: '右舵桨中间轴转速', name: 'r/min', value: 890, unit: '', pos: ['75%', '50%'], rangeMax: 1200 },
			]
			let rud6 = [
				{ title: '左滑油压力', name: 'r/min', value: 0.62, unit: '', pos: ['25%', '50%'], rangeMax: 1 },
				{ title: '右滑油压力', name: 'r/min', value: 0.62, unit: '', pos: ['75%', '50%'], rangeMax: 1 },
			]
			this.rudOpt4 = pieSpeed(rud1)
			this.rudOpt5 = tempBar(luProps)
			this.rudOpt55 = tempBar(luProps)
			this.rudOpt6 = pieSpeed(rud3)
		},
	},
	mounted() {
		this.shipGuid = store.state.shipGuids
		this.shipList = store.state.shipLists
	},
	watch: {
		// swiper与上面选项卡联动
		isActive(newval) {
			// this.currentIndex = newval;
			switch (newval) {
				case 0:
					this.currentIndex = 0
					break;
				case 1:
					this.currentIndex = 0
					break;
				case 2:
					this.currentIndex = 1
					break;
				case 3:
					this.currentIndex = 2
					break;
				case 4:
					this.currentIndex = 2
					break;
				default:
					this.currentIndex = 0
					break;
			}
		},
	},
}
</script>
<style lang="scss" scoped>
page {
	height: 100%;
	display: flex;
	background-color: #FFFFFF;
}

.content {
	width: 100%;
	// height: calc(100vh - 50px);
	flex: 1;
	// background-image: url("@/static/head_bg.png");
	// background-size: 100% 388rpx;
	// background-repeat: no-repeat;
	display: flex;
	flex-direction: column;

	.head {
		width: 100%;
		height: 230rpx;
		// height: 21%;
		padding: 0 40rpx 0;
		color: #FFFFFF;
		box-sizing: border-box;
		background-image: url("@/static/head_bg.png");
		background-size: 100% 388rpx;
		background-repeat: no-repeat;

		.my_information {
			width: 100%;
			height: 230rpx;
			font-size: 36rpx;
			text-align: center;
			padding-top: 50rpx;
			left: 0;
			background: none;
			z-index: 200;

			.name {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.ship_change {
					width: 200rpx;

					/deep/.uni-select {
						border: none;

						.uni-select__input-placeholder {
							color: #fff;

						}

						.uni-icons::before {
							// display: none;
							color: #fff;
						}

						.uni-select__selector-item {
							color: #000;
						}

						.uni-select__input-text {
							color: #fff;
						}

						.uni-select__selector {
							z-index: 1000;
						}
					}
				}

				.toBack {
					width: 200rpx;

				}
			}

			.scroll-view_H {
				white-space: nowrap;
				width: 100%;
			}

			.modules_titles {
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;
				font-weight: 500;
				font-size: 28rpx;

				.lists {
					width: 172rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
				}

				.module_active {
					background: #FFFFFF;
					border-radius: 98rpx;
					color: #0C274F;
				}
			}
		}

		
	}

	.modules_content {
		width: 100%;
		flex: 1;

		.modules_components {
			height: 100%;
			background: #FFFFFF;
			min-height: 1000rpx;
			padding: 38rpx 20rpx 0rpx;
			box-sizing: border-box;
		}

		.swiperitem-content {
			background-color: #ffffff;

			.nav_item {
				background-color: #FFFFFF;
				padding: 20rpx 40rpx 0rpx 40rpx;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
			}
		}
	}
}
</style>

写在最后，实现思路总结：

uni组件库没有tabs选项卡组件，只有自己封装，实现的思路：
考虑分为上下两块，上部是类型切换绑定点击事件，下部之前用动态组件，下部改为swiper组件，并绑定change事件。
swiper组件的属性current绑定第几个swiper-item子项，并且watch监听绑定值，对这个绑定值处理和上部的类型对应上(也可不处理)。

不处理的情况是：一个swiper-item对应一个tabs上部的类型选项。 

 

影子信息
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
三、在uni-app中开发一个带滑块的Tabs标签组件
weixin_39915504的博客
07-22 1489
上一节我们为项目配置了基于 airbnb 代码风格的 Eslint，今天我们来开发一个可滑动的带动效的 Tabs 标签组件
uniapp创建tabs组件
qq_39274996的博客
10-14 3557
效果如图，点击时切换页面内容 代码实现： 1、创建公共tabs模板 <template> <view class="uni-tab-bar"> <view class="scrollClass" v-for="(tab,index) in tabBars" :key="tab.id" :style="scrollStyle"> <view class="swiper-tab-list" :...
uni-app实现滑动切换效果
weixin_59702843的博客
06-18 8204
uni-app框架了解实现一个滚动切换tab效果，这个很常见的一个效果，最后封装成一个组件，便于之后使用，写这个须要引入uni官方提供的uni.css样式，用到了写好的样式，就不须要本身写了css
uniapp实现tab分类导航以及滚动联动效果
最新发布
yangxun9264986的博客
05-07 966
uniapp+vue3实现tab菜单左右滚动以及内容滚动切换tab的效果
UniApp 组件 u-tabs 详细讲解
zzx262625的博客
11-25 6668
该属性设置选项卡切换动画的缓动函数，可选的值包括 "linear"、"ease"、"ease-in"、"ease-out"、"ease-in-out" 等。可以设置为 "slide"（左右滑动切换）、"fade"（淡入淡出切换）或自定义动画名称（需要在全局样式中定义）。通过使用 u-tabs 组件，您可以轻松地创建具有选项卡切换功能的界面。该属性指定当前选中的选项卡的索引值，可以使用 v-model 进行双向绑定。通过回调函数的参数可以获取当前选中的选项卡索引值。标签来实现多个选项卡之间的切换。
uniapp实现tabs切换（可滑动）
不会写代码的前端
08-14 9614
uniapp 实现tabs切换
【uniapp tabs标签组件】移动端tabs标签组件，点击标签滚动到中间位置，点击标签横向滚动显示完全【复制即用】
seeeeeeeeeee的博客
03-20 3097
这个tabs功能是很多移动端项目都要用的最近我刚好遇到了这个功能因为我们项目不让用uview等组件。所以只能用uniapp自带的组件uni-ui但是问题就是这里没有这种滚动的tabs标签组件用啊。所以万不得已之下，我cv工程师只好动动小手写一个组件了。刚好这里也发出来保存一下，以后在用到可以直接复制了。
uni-app实现tabs与内容的上下滚动相联动
qq_38118138的博客
09-23 2767
uni-app实现tabs与内容的上下滚动相联动
uniapp的tabs选项卡切换
元旦是个嘤嘤怪的博客
03-10 8545
先上效果 使用的是uni-app的uview ui库 html: <view class="tabTitleBox"> <view class="tabTitle"> <u-tabs :list="nameList" :is-scroll="false" :current="currentTabIndex" @change="change" active-color="#FF5B16"
tab切换组件nz-tab
weixin_34203832的博客
06-11 2295
<nz-card [nzBordered]="true" nzTitle="卡片标题"> <nz-card style="width: 100%;" nzTitle="Card title" [nzExtra]="extraTemplate"> <nz-card-tab> <nz-tabset nzSize="l...
Tab选项卡的切换
weixin_44538083的博客
02-17 1521
开发工具与关键技术DW，CSS，JavaScript 作者：陈梅 撰写时间：2019年2月17日 现在分享的是我以前老师布置的一份作业里的技术，Tap选项卡的切换，这个技术又是一个JavaScript鼠标点击事件，我们来看看代码部分的布局 | | | 在这里我用的是ul和li做好排列表格，也可以用th、td样式来定义的。列好五个按钮和五个选项，再用a标签使鼠标移进内容区的字体时可以换色，给按钮...
Vue.js组件tabs实现选项卡切换效果
01-19
今天给大家分享一个小颖自己写的vue组件,...-- 调用tabs组件 --> <tabs flag.sync='tabsShowFlag' navtitle='navTitle' navdata='navData'> <div class=tabs-body> [0].showFlag>0'> <div class=one-conte
ionic组件ion-tabs选项卡切换效果实例
01-19
ion-tabs是ionic中的选项卡组件，路由使用的是angular-ui-router.js。因此必须先掌握uiRoute。 效果图 实例代码 index.html <body ng-app=starter> <!--ion-nav-view用来渲染模板--> <ion></ion> ...
Vue render函数实战之实现tabs选项卡组件
12-29
我咋刚开始使用组件的时候就有去想过，也想去实现一个超级简单的tabs选项卡组件，无奈当时功力不够，未能实现。最近的一个简单项目中正好要用到选项卡组件，由于项目简单也就没有使用任何第三方库，于是就自己动手写...
jQuery实现Tab选项卡切换效果简单演示
10-23
向大家推荐了一个jQuery实现Tab选项卡切换效果的简单演示，感兴趣的小伙伴们可以参考一下
uniapp 动态组件 实现Tabs标签切换组件
tengyuxin的博客
04-06 5738
拿作为案例，它的tabs标签有很多，如：推荐、小说、儿童等等。用户点击小说就会切换到小说组件，如果仔细看第一次是有一个加载的过程，如果你再返回到推荐页，再次点击小说时就没有加载过程，而是直接显示出来。这就有两个知识点（1）动态组件切换 （vue3 中 component组件 is属性）（2）保持组件被移除时的状态（vue3 中是 KeepAlive）
uni——tab切换、分段器
努力、拼搏、奋进
08-08 772
uni——tab切换、分段器
uni-app|tabs滑动|uView 1.X|u-tabs-swiper全屏选项卡|案例
weixin_53377575的博客
12-05 840
【代码】uni-app|tabs滑动|uView 1.X|u-tabs-swiper全屏选项卡|案例
uniapp：实现tabs（scroll-view）点击左右滑动
qq_34720531的博客
02-22 1968
uniapp：实现tabs（scroll-view）点击左右滑动
uni app 中的选项卡
06-11
Uni-app 中的选项卡可以使用 `uni-tabs` 组件来实现。`uni-tabs` 组件支持在不同选项卡之间进行切换，并且可以设置选项卡的样式、选项卡内容的展示方式等。 以下是一个简单的 `uni-tabs` 组件的示例： ```html <template> <view> <uni-tabs :current="currentTab" @click="onTabClick"> <uni-tab title="选项卡1"> <view> <text>选项卡1的内容</text> </view> </uni-tab> <uni-tab title="选项卡2"> <view> <text>选项卡2的内容</text> </view> </uni-tab> <uni-tab title="选项卡3"> <view> <text>选项卡3的内容</text> </view> </uni-tab> </uni-tabs> </view> </template> <script> export default { data() { return { currentTab: 0, }; }, methods: { onTabClick(e) { this.currentTab = e.index; }, }, }; </script> ``` 在上面的示例中，我们使用了 `uni-tabs` 组件来创建一个选项卡，并且通过 `uni-tab` 组件来定义每个选项卡的内容。可以通过设置 `current` 属性来指定当前显示的选项卡，通过监听 `click` 事件来处理选项卡的点击事件。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值