微信小程序中，图片的位置设置-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序中，图片的位置设置。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在编写小程序的时候，难免会涉及到图片的位置放置。

以及具体的wxss格式的设置，在这里想进行一个具体格式的讲解。

第一种：图片不换行，多个图片排列在同一行

具体样例如下图：黄色荧光笔所绘：

微信小程序怎么把图片和文字组合在一行,微信小程序,小程序,学习

要实现该操作，根据图易见，其是由图片，以及文字构成的。

1.放置一个大的view，包裹住整行

2.每个图片与文字再放置在一个小的viewItem中，同时进行格式的设置，若要其在同一行，则要将diaplay设置为flex.

3.设置完viewItem的格式后，在对viewItem image的大小以及比例进行设置。

WXML的具体代码如下：

<view class="allbtn">  //其中的src是选用的本地的地址，可以自行修改具体图片
<view class="btnItem">
  <image src="/donationImg/yiwu.png"></image>
  <text>衣物</text>
  </view>
  <view class="btnItem">
  <image src="/donationImg/xiezi.png"></image>
  <text>鞋子</text>
  </view>
  <view class="btnItem">
  <image src="/donationImg/huabankaobei.png"></image>
  <text>帽子</text>
  </view>
  <view class="btnItem">
  <image src="/donationImg/包包.png"></image>
  <text>旧包</text>
  </view>
  <view class="btnItem">
  <image src="/donationImg/wanjuxiong.png"></image>
  <text>玩具</text>
  </view>
</view>

WXSS的代码如下：

.allbtn{
  padding-top: 15rpx;
  display: flex;   //利用flex设置图片共存于同一行，但是此时不会出现换行
  
}
.btnItem{
  width: 100rpx;
  display: flex;   
  align-items:center;   
  flex-direction: column;   //是按行去排列的
  padding-right: 60rpx;     //每个view item靠右存在的边距
}
.btnItem image{
  width: 70rpx;      
  height: 70rpx;
}
.btnItem text{
  margin-top: 0rpx;              
  font-size: 28rpx;
  color: gray;
  display: flex;                 
}

第二种：图片出现换行的情况，多个图片排于几行

具体样例如下，在热门生活中，各个图片的排列：

微信小程序怎么把图片和文字组合在一行,微信小程序,小程序,学习

1.大部分都与上述几个图片共行是相同的，不同点在于最大的view中要设置: flex-wrap: wrap

2.在viewItem中，viewItem的大小要利用比例来进行描述，如上图，则其具体比例为50%，若想三个图片共一行，则比例为33.33%。

具体WXML代码如下：

<view class="allbtn2">
<view class="btnItem2">
  <image src="/donationImg/IMG_1.jpg"></image>
  </view>
  <view class="btnItem2">
  <image src="/donationImg/IMG_2.jpg"></image>
  </view>
  <view class="btnItem2">
  <image src="/donationImg/IMG_3.jpg"></image>
  </view>
  <view class="btnItem2">
  <image src="/donationImg/IMG_4.jpg"></image>
  </view>
</view>

WXML代码如下：文章来源地址https://www.toymoban.com/news/detail-799491.html

.allbtn2{
  display: flex;
  flex-wrap: wrap;    //设置在最大的view中，可以出现换行的情况
}
.btnItem2{
  width: 50%;      //设置好，具体的宽度百分比，你想几个图片共处一行
  height: 90px;
  display: flex;      //设置图片可以共处一行
  flex-direction: column;
  align-items: center;        
  justify-content: center;     
}
.btnItem2 image{
  width: 180px;
  height: 100px;
}

到了这里，关于微信小程序中，图片的位置设置的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！