写点什么

微信小程序开发:如何快速实现分割线的项目需求

作者:三掌柜
  • 2021 年 12 月 11 日
  • 本文字数:755 字

    阅读完需:约 2 分钟

前言

在微信小程序开发的时候,有些业务需求是参照手机移动端开发来设计的,基本上可以说微信小程序就是基于微信的移动端应用,所以基本上在微信小程序上提的各种业务需求都和移动端开发是一样的,类似程度非常高,这也就可以给微信小程序开发者提供了参考依据以及实现思维。


那么本篇博文就来分享一下在微信小程序开发的时候一个比较常见的功能点,那就是关于页面分割线的实现效果。这个需求非常的常见,但是为什么还要单独拿出来分享一下呢,那是因为虽然这个需求很普遍,但是对于刚入门小程序开发的新手来说有一些问题,所以只要有需求就肯定有需要,只分享给有需要的人。具体的实现步骤如下所示。


操作步骤

1、home.wxml 文件

直接在 wxml 文件中来实现画线的效果,在微信小程序开发中画分割线的方法有多种,这里只分享两种常见的写法思路,第一种直接画分割线,第二种用一个标签包一下再画分割线。具体如下所示:


(1)直接画分割线

那就是类似前端开发的时候,直接画分割线。

<view class="home-header-line"></view>
复制代码


(2)包一层标签再画分割线

包一层之后再画分割线,根据实际业务需求来选择。

<view class="container">
     <!-- 画分割线 -->
  <view class="home-header-line"></view>
</view>
复制代码



2、home.wxss 文件

然后再 wxss 文件中设置分割线的样式。不管是直接画分割线还是包一层画分割线,样式直接加在分割线的 view 上面。

/*分割线样式*/
.home-header-line {
  background: #e0e3da;
  width: 100%;
  height: 2rpx;
}
复制代码



3、具体实现效果


本案例的分割线需求效果如下所示:


最后

通过上文对于在微信小程序开发,关于快速实现添加一条分割线的项目需求的介绍,读者可以很好的了解使用,这里不再赘述。以上就是本章全部内容,欢迎关注三掌柜的微信公众号“程序猿 by 三掌柜”,三掌柜的新浪微博“三掌柜 666”,欢迎关注!

发布于: 5 小时前阅读数: 9
用户头像

三掌柜

关注

某某某技术有限责任公司架构师 2021.02.05 加入

一分耕耘,不一定有一分收获,但十分耕耘,一定会有一分收获!

评论 (1 条评论)

发布
用户头像
12月日更、28 天写作计划第十天
5 小时前
回复
没有更多了
微信小程序开发:如何快速实现分割线的项目需求