#前端#Vue追加样式，实现动态进度条/仪表盘

一、需求：

在开发中，我们时常会遇到一些需要动态获取数据在页面的变化

二、思路：

2.1直接展示效果

追加样式：距离左边、右边的距离（纯数据直接展示）（原生样式）

（1）确定追加的样式，

使用 :style="{'css值':接口数据字段+'%'}"

（看需求是需要向左，或者向右再决定，是用left / right,或者magin-left / magin-right）

（2）根据进度条确定区间，再看字段的数值，进行加减乘除

示例：

<view :style="{ 'margin-left': item.role + '%' }">{{item.role}</view>

//这样就代表当item.role(后端字段) 的数值变化时，会追加一个与左边距离多少的样式

动态修改：

如上图的效果图，我们可以看出“需要加强到优秀”这个进度条分为4段，

那么我们只需要设置区间，再将我们拿到数据加到里面就可以了，达到追加样式的效果

示例代码：

<!-- 力量 -->
	<view class="test-bubble">
		<view class="bubble" :style="'margin-left:'+TNList.llNum*4+'%;'">
			<image :src="baseUrl + '/profile/upload/2021/10/30/chat.png'"></image>
			<view class="num">{{TNList.llNum}}</view>
		</view>
	</view>
<!-- 耐力 -->
	<view class="test-bubble">
		<view class="bubble" :style="'margin-left:'+TNList.nlNum*10+'%;'">
			<image :src="baseUrl + '/profile/upload/2021/10/30/chat.png'"></image>
			<view class="num">{{TNList.nlNum}}</view>
		</view>
    </view>

//根据后端返回的字段，进行加减乘除，进行计算

2.2区间效果

（1）通过v-if，追加样式（原生组件）

根据区间，通过v-if来进行显示及隐藏内容会涉及到>= 的写法

这个相比于第一种效果来说，就深了一层，需要判断各个区间的取值

案例如下：

区间为：

（xx：代表我们拿到的数值）

-20<xx<=-6

-6<xx<=3

3<xx<=9

那么我们就可以将他们分为3段，如果返回的数值在这些区间里面，就追加样式，

:style="'margin-left:10%;'"

:style="'margin-left:60%;'"

:style="'margin-left:80%;'"

示例代码：

<view >
    <view class="bubble" 
        v-if="TZList.bmr > -20 && TZList.bmr <= -6 ":style="'margin-left:10%;'">
		<image :src="baseUrl + '/profile/upload/2021/10/30/chat.png'"></image>
		<view class="num">{{TZList.bmr}}</view>
    </view>
	<view class="bubble" v-if="TZList.bmr > -6 && TZList.bmr <= 3 ":style="'margin-left:60%;'">
	    <image :src="baseUrl + '/profile/upload/2021/10/30/chat.png'"></image>
		<view class="num">{{TZList.bmr}}</view>
    </view>
	<view class="bubble" v-if="TZList.bmr > 3 && TZList.bmr < 9 ":style="'margin-left:80%;'">
		<image :src="baseUrl + '/profile/upload/2021/10/30/chat.png'"></image>
	    <view class="num">{{TZList.bmr}}</view>
	</view>
</view>

2.3使用插件赋值

使用插件，只需要找到控制动态修改样式的参数，进行赋值，也需要注意取整

案例：仪表盘插件

只需要将返回的数值*33.3填入，就可以动态控制:percent="",这个参数值了

<view class="user-test">
				<view class="line">
					<!-- //体态仪表盘 -->
					<cmd-progress type="dashboard" :percent="parseInt(roleAssessmentLevel)*33.3" stroke-color="#ED6636"
						width="160" gap-degree="140" class="tt-item" :show-info="false" stroke-width="6"></cmd-progress>
					<!-- //体质仪表盘 -->
					<cmd-progress type="dashboard" :percent="parseInt(bmiGrade)*25" stroke-color="#18B566" width="140"
						gap-degree="155" class="tz-item" :show-info="false" stroke-width="6"></cmd-progress>
					<!-- //体能仪表盘 -->
					<cmd-progress type="dashboard" :percent="parseInt(assessmentLevel)*33" stroke-color="#007AFF"
						width="120" gap-degree="170" class="tn-item" :show-info="false" stroke-width="6"></cmd-progress>
				</view>
				<view class="test-num">
					<view>体态状况：{{ roleAssessmentValue}}</view>
					<view>体质状况：{{ bmiL }}</view>
					<view>体能状况：{{ assessmentValue }}</view>
				</view>
				
			</view>

更多效果：