<view class="all" catch:tap="getElement" >
<view class="title">
<view></view>作业成绩所处分数段
</view>
<view class="online">
<view class="bg-ff-score" wx:for="{{score_list}}" wx:key="index">
<view style="min-width:{{msg[index]}}rpx;text-align: center;" >{{item}}</view>
</view>
</view>
<!-- 姓名 -->
<view style="margin-left:{{num*tip_rate/100+(select_num-1)*20-onnum-48}}rpx;color:#FF7474;font-size:24rpx;min-width:100rpx">
{{student_n}}同学
</view>
<!-- 箭头位置 -->
<view class="lin" >
<image class="img" style="margin-left:{{num*tip_rate/100+(select_num-1)*20-12}}rpx" src="/images/path_red.png"></image>
</view>
<view style="display:flex" >
<view class="bg-ff" wx:for="{{msg}}" wx:key="index">
<view class="bg-ff-{{index}}" style="width:{{num*item/100}}rpx;" wx:if="{{index != (select_num)}}"></view>
<view class="bg-ff-{{index}}" style="width:{{num*item/100}}rpx;background: {{red_back}};" wx:else></view>
</view>
</view>
<view class="online1" >
<view class="bg-ff1" wx:for="{{score}}" wx:key="index">
<view style="width:{{msg[index]*dob}}rpx;color:#6597FF;text-align: center;" wx:if="{{index != (select_num)}}">{{item}}</view>
<view style="width:{{msg[index]*dob}}rpx;color: #FFAB96;text-align: center;" wx:if="{{index == (select_num)}}">{{item}}</view>
</view>
</view>
<view class="bottom_title">
*{{bottom_title}}
</view>
</view>
以组件的形式调用msg = [33.3,33.3,33.3,0] ,当前选中第几个显示红色区域select_num= 1,onnum参数为 左右两侧显示不开的时候名字移动距离,num为屏幕宽度,tip_rate为当前箭头指向的位置
<color-line msg="{{msg}}" select_num="{{select_num}}" onnum="{{onnum}}" bottom_title="{{bottom_title}}" num="{{num}}" student_n="{{student_n}}" tip_rate="{{tip_rate}}"></color-line>
感谢楼主无私分享, 能不能把css也一起贴出来呢?