当前位置:主页 > 微信开发 > WeUI >

用css实现大于号图标

栏目:WeUI 来源: 微信小程序开发网 阅读: 2017-04-04
  在微信网页,例如,微信公众号或是微信小程序网页里面,如果一个列表有多个列表项的话,可以在下面设置一个功能“查看更多”,在“查看更多”后面有一个“大于号”,这个大于号的作用表示还有更多列表项数据待加载,用户点击后就会显示更多列表数据。

  如下图所示:

大于号
  这个大于号在微信开发时经常会用到,例如,在面板panel组件里面,只要类weui-cell__ft就会出现一个大于号。

  这个大于号当然可以使用图片来表示,但是,本教程将教大家如何通过css来实现这个图标,这样要比加载一个图片速度更快,节省带宽流量,提高用户访问速度。

实现原理:

  先使用css定义一个矩形,然后,把矩形沿对角线切开,最后,旋转90度这样就得到了一个大于号了。

实现代码:

<style>
    .arrow:after {
    content: " ";
    display: inline-block;
    height: 6px;
    width: 6px;
    border-width: 2px 2px 0 0;
    border-color: #ff0000;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);

}
</style>

  在这里面使用了边框的宽度为2px 2x 0 0,这个定义相当于把一个矩形沿对角线给切掉,留下的就是一个矩形的一半的图形了,然后,通过css3里面的transform的值matrix 进行旋转90度,就得到了一个大于号的图形了。

  使用方法:
<span class="arrow"></span>

  您可以复制上面这段css进行测试一下看看效果,因为,上面为了讲解方便,把大于号的颜色设置为红色,在实际使用中一般设置为“#C8C8CD”这种颜色。

相关文章