在uni-app中,可以使用view组件来实现两个图片之间放一个短线的效果。

首先,在template中添加以下代码:

<view class="line"></view>
<image class="image1" src="图片1的路径"></image>
<view class="line"></view>
<image class="image2" src="图片2的路径"></image>

然后,在style中添加以下代码:

.line {
  width: 20px;  /* 短线的宽度 */
  height: 1px;  /* 短线的高度 */
  background-color: #000;  /* 短线的颜色 */
}

.image1 {
  margin-right: 10px;  /* 图片1与短线的间距 */
}

.image2 {
  margin-left: 10px;  /* 图片2与短线的间距 */
}

以上代码中,通过在两个图片之前添加一个宽度为20px、高度为1px的view组件,并设置其背景颜色为黑色,实现了两个图片之间放一个短线的效果。

同时,通过为图片1添加margin-right样式,为图片2添加margin-left样式,可以实现图片与短线之间的间距效果。根据实际情况,可以调整短线的宽度、高度、颜色,以及图片与短线之间的间距

uniapp如何设置两个图片之前放一个短短的线

原文地址: http://www.cveoy.top/t/topic/islr 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录