美文网首页
微信小程序progress实现积分、等级条

微信小程序progress实现积分、等级条

作者: 萌弈 | 来源:发表于2018-08-16 09:38 被阅读0次

    基础的组件属性我就不赘述了,这里主要记录下我实现的一些思路。

    1、圆角柱形条的样式实现,光给组件写上border-radius: 60rpx是不行的,千万不能忘记overflow: hidden;

         正确的css写法为.prostyle{border-radius: 60rpx;overflow: hidden}

    2、进度条从右往左读,只需给组件加上.prostyle{-moz-transform: scaleX(-1);transform:scaleX(-1);filter:FlipH();}旋转的样式;

    左正常,右旋转

    3、进度条中间显示文字,可通过定位实现,css为.protxt{position: absolute;left: 50%;font-size: 0.5rem}

    中间显示文字

    相关文章

      网友评论

          本文标题:微信小程序progress实现积分、等级条

          本文链接:https://www.haomeiwen.com/subject/xrknbftx.html