评论

彩虹条,进度条显示 选中当前位置

开发需求的时候需要这么一个东西,小程序里没找到组件,赶时间 写了一个

<view class="allcatch: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="imgstyle="margin-left:{{num*tip_rate/100+(select_num-1)*20-12}}rpxsrc="/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>


最后一次编辑于  2020-12-21  
点赞 3
收藏
评论

1 个评论

  • 当哩个当
    当哩个当
    2021-01-08

    感谢楼主无私分享, 能不能把css也一起贴出来呢?

    2021-01-08
    赞同
    回复
登录 后发表内容