微信小程序开发:如何快速实现添加一条分割线的项目需求
在微信小程序开发的时候,有些需求是参照移动端开发来设计的,基本上微信小程序就是基于微信的移动端应用,所以基本上各种需求都和移动端开发是一样的,类似程度非常高。
那么本篇博文就来分享一下,在微信小程序开发的时候,关于分割线的实现效果。这个需求非常常见,但是为什么还要单独拿出来分享一下呢,就是因为这个需求很普遍,而且对于刚入门的新手来说有一些问题,所以只要有需求就肯定有需要,只分享给有需要的人。
1、home.wxml 文件
这里分享两种写法,第一种直接画分割线,第二种用一个标签包一下再画分割线。
(1)直接画分割线
<view class="home-header-line"></view>
(2)包一层标签再画分割线
<view class="container">
<!-- 画分割线 -->
<view class="home-header-line"></view>
</view>
2、home.wxss 文件
不管是直接画分割线还是包一层画分割线,样式直接加在分割线的 view 上面。
/*分割线样式*/
.home-header-line {
background: #e0e3da;
width: 100%;
height: 2rpx;
}
3、具体实现效果
本案例当中的分割线需求效果如下所示:
以上就是本章全部内容,欢迎关注三掌柜的微信公众号“程序猿 by 三掌柜”,三掌柜的新浪微博“三掌柜 666”,欢迎关注!
三掌柜的微信公众号:
三掌柜的新浪微博:
版权声明: 本文为 InfoQ 作者【三掌柜】的原创文章。
原文链接:【http://xie.infoq.cn/article/9944e8ca993cb260aaccfe733】。文章转载请联系作者。
评论 (1 条评论)