【微信小程序】竖直分割线

最新推荐文章于 2023-08-13 23:33:09 发布
最新推荐文章于 2023-08-13 23:33:09 发布
阅读量4.2k 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37629807/article/details/104851323
版权
本文介绍了在微信小程序中创建竖直分割线的简单方法，通过添加一张图片并设置相应尺寸来实现，避免了复杂CSS或额外HTML的使用。
摘要由CSDN通过智能技术生成

文章目录

效果

中间的小小竖直分割线

做法

在网上搜到好多方法

  • 有设置CSS；
  • 有专门写一个html,再引入；
    有点麻烦，我的方法是
    加一张图片，设置长宽
    代码如下：
//wxml
 <image src="/icons/line_icon.jpg" class="img_line"></image>
 
//wxss
.img_line{
最低0.47元/天 解锁文章
上善若水_XX
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序开发：如何快速实现添加一条分割线的项目需求
软贱开发攻城狮
02-04 4537
在微信小程序开发的时候，有些需求是参照移动端开发来设计的，基本上微信小程序就是基于微信的移动端应用，所以基本上各种需求都和移动端开发是一样的，类似程度非常高。 本篇博文就来分享一下，在微信小程序开发的时候，关于分割线的实现效果。这个需求非常常见，但是为什么还要单独拿出来分享一下呢，就是因为这个需求很普遍，而且对于刚入门的新手来说有一些问题，所以只要有需求就肯定有需要，只分享给有需要的人。 1、home.wxml文件 这里分享两种写法，第一种直接画分割线，第二种用一个标签包一下再画分割线。 （1.
小程序-竖线样式
weixin_49200545的博客
07-06 1341
竖线样式代码
小程序 竖线节点 效果
08-11
小程序竖线节点，分割线节点效果，类似时间戳节点效果开发，view ，cover-view 组合开发
移动端CSS实现小程序竖向步骤条
许粤军的博客
09-12 1474
移动端CSS实现小程序竖向步骤条。
微信小程序——分割线
qq_46586512的博客
08-30 1588
水平分割线 1、(.wxml） <view class="container"> <view class="heng"></view> </view> 2、（.wxss） .heng{ background: #E0E3DA; width: 100%; height: 5rpx; } 垂直分割线 1、（.wxml） <view class="container"> <view class="Line
微信小程序 实例汇总 完整项目源代码
11-01
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要针对移动设备，尤其是智能手机。它允许开发者在微信内创建原生体验的应用程序，无需通过应用商店即可供用户使用。这个压缩包文件“wechat”很可能包含了...
食堂点餐微信小程序源码.zip
03-17
食堂点餐微信小程序源码.zip食堂点餐微信小程序源码.zip食堂点餐微信小程序源码.zip食堂点餐微信小程序源码.zip食堂点餐微信小程序源码.zip食堂点餐微信小程序源码.zip食堂点餐微信小程序源码.zip食堂点餐微信小程序...
微信小程序源码-仿饿了么.zip
最新发布
03-24
微信小程序源码-仿饿了么.zip微信小程序源码-仿饿了么.zip微信小程序源码-仿饿了么.zip微信小程序源码-仿饿了么.zip微信小程序源码-仿饿了么.zip微信小程序源码-仿饿了么.zip微信小程序源码-仿饿了么.zip微信小程序...
小米商城微信小程序源码
05-26
【微信小程序概述】 微信小程序是腾讯公司推出的一种轻量级应用开发平台，它无需下载安装即可使用，方便快捷。在移动互联网时代，微信小程序凭借其快速加载、易于分享的特点，成为了许多企业和开发者的选择，用于...
微信小程序-轮播图-九宫格布局--【开发实战（第2版）】
dearmite的专栏
08-13 6466
本系列校训 用免费公开视频，卷飞培训班哈人！打死不报班，赚钱靠狠干！ 只要自己有电脑，前后项目都能搞！N年苦学无人问，一朝成名天下知！ 视频学习资源的选择 黑马程序员微信小程序开发前端教程_零基础玩转微信小程序（130集） https://www.bilibili.com/video/BV1nE41117BQ/ 目录如下： … P303-微信小程序的环境准备08:21 00:00 到 05：16 获取APPid, 后面下载开发工具。 选择原因参见《详细解析黑马微信小程序视频–【思维导图知识范围】》
微信小程序——漂亮的分割线（分隔线）
wy313622821的博客
11-03 2万+
首先来看看效果图： 实战应用中，在这个小程序里运用到，感兴趣的朋友可以进去参考（界面做得还是蛮好的）： 实现这个功能主要分3部分组成，两个view和一个text 下面来看看代码： .wxml代码 <view class="view_fengexian"> <view ></view> <text class="text_fengexian">*改变线条颜色*</text> <view ></view> </v
微信小程序分隔线
qq_45155741的博客
08-04 3133
微信小程序分隔线，复制粘贴后再添加class="hr"直接使用 /* 分隔线 */ .hr { width: 90%; height: 3rpx; margin-top: 15rpx; margin-left: 37.5rpx; background-color: #dfdedd; }
微信小程序 添加分割线
dwp10000的博客
02-26 4446
效果图： 代码参考如下： <view style="display: flex;margin-top:50rpx ;"> <view style="background-color: lightgray; width: 100%; height: 5rpx;"></view> </view> 已做尝试：如果把width=100%去掉也不会显示； 【好文共赏析！】 ...
微信小程序 如何添加一条分割线
热门推荐
信徒博客
05-17 3万+
<view class="container"> <!-- 分割线 --> <view class="divLine"></view> </view> /*分割线样式*/ .divLine{ background: #E0E3DA; width: 100%; height: 5rpx; } ...
小程序 :after实现1px纵向分割线
初心 - 杨瑞超个人博客
12-04 7064
在开发中往往会使用到分割线，下面我们来研究下 view部分： &amp;amp;lt;view class=&amp;quot;line&amp;quot;&amp;amp;gt; &amp;amp;lt;view class=&amp;quot;line-left&amp;quot;&amp;amp;gt;+86&amp;amp;lt;/view&amp;amp;gt; &amp;amp;lt;view cla
左边竖条的实现方法-8种
吃瓜群众的博客
10-21 2239
法一：border 法二：使用伪元素 div::after{ content:""; width:5px; height:60px; position:absolute; top:0; left:0; background:deeppink; } 法三：外 box-shadow 法四：内 box-shado
微信小程序入门.docx
10-05
微信小程序是一种轻量级的应用形态，用户无需下载安装即可在微信内便捷地使用。自2017年首次发布以来，它已经构建了一个庞大的开发环境和生态系统，吸引了超过150万的开发者参与，并覆盖了众多行业，每天有两亿活跃...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值