经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » HTML5 » 查看文章
uni-app插件ColorUI步骤条
来源:cnblogs  作者:天尘·云烟  时间:2019/6/25 11:11:42  对本文有异议

1. uni-app插件ColorUI步骤条

1.1. 前言

  1. uni-app就不介绍了,前面几篇已经有所介绍,不知道的可以翻看我前面几篇博客
  2. ColorUI-uniApp是uni-app的一款ui组件,事实上就是对uni-app组件添加css,使其更加漂亮
  3. 这里我抛砖引玉的介绍一下步骤条的使用,之所以介绍它是因为使用它的过程中,发现的几点问题
    • 第一它本身的例子太过简单,但事实上它是可以实现的更复杂的
    • 第二它本身带有很多css样式是可以直接拿来用的,不需要自己改造自己写

1.2. 例子

  1. 比如如下实现

  1. 他的例子每一步都是完成蓝色背景,中间勾选,但如果我中间取消订单呢,我想要显示个X,并且红色背景,先看它的例子代码,我用的是最后的多级显示
  1. <scroll-view scroll-x class="bg-white padding response cu-steps steps-bottom" :scroll-into-view="'scroll-' + scroll"
  2. scroll-with-animation>
  3. <view class="cu-item padding-lr-xl" :class="index>scroll?'':'text-blue'" v-for="(item,index) in 10" :key="index" :id="'scroll-' + index">
  4. Level {{index + 1}} <text class="num" :data-index="index + 1"></text>
  5. </view>
  6. </scroll-view>
  1. 前面代码的例子中有个表示X的代码,但那是用class为cuIcon-roundclosefill,一旦我替换num属性就变成这样了,之后可能还要不断去调整样式

  1. 事实上还有其它更好的方法,如下改法,我在需要的item添加isErr属性,为true时显示红色,text中添加err类属性就会把图标修改成X
  1. <view class="cu-item padding-lr-xl" :class="item.status>step.scroll?'':item.isErr?'text-red':'text-blue'" v-for="(item,index) in 10" :key="index" :id="'scroll-' + index">
  2. Level {{index + 1}} <text class="num err" :data-index="index + 1"></text>
  3. </view>

  1. 至于我怎么发现的,那就是直接找源码,可以看到在main.css中

1.3. 总结

  1. 这里就给出个思路,希望帮到有需要的人,共同学习进步

原文链接:http://www.cnblogs.com/sky-chen/p/11081430.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号