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

17 篇文章 3 订阅
16 篇文章 1 订阅

一、需求:

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

二、思路:

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>

更多效果:

 

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值