微信小程序中，图片的位置设置

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

以及具体的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代码如下：

.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;
}

微信小程序中，图片的位置设置相关推荐

微信小程序中这么简单的设置页面背景图及字体颜色的方法，你还不会？
在微信小程序中,我们不免的要设置背景图片和字体颜色. 那怎么样才能做到简单的设置背景图片和字体颜色呢? 话不多说,直接开讲首先先说怎么设置页面背景图片: 这是博主准备的照片. 下面是在wxml中的代 ...
微信小程序中图片占满整个屏幕实现方法
将body和html设置为100%,这样我们就可以在他们的子元素中使用height:100%来使的我们的容器元素占满屏幕的高度啦. 但是在微信小程序中,是没有dom对象的,根节点是page,使用pag ...
微信小程序中图片压缩的最佳实现与封装
一.概述在项目开发过程中遇到一个需要从小程序上传图片的需求,此需求实现起来并不难,只需要调用chooseImage接口拿到图片的临时路径然后调用uploadFile接口进行上传.到这里这个功能已经实 ...
MATLAB slider中的数值,在微信小程序中如何使用slider设置数据值
这篇文章主要介绍了微信小程序使用slider设置数据值及switch开关组件功能,结合实例形式分析了slider组件及switch组件的功能与使用方法,并附带源码供读者下载参考,需要的朋友可以参考下 ...
微信小程序中图片高度被压扁的解决办法
微信小程序开发中使用image标签展示的长图因为太长,就会被压扁变形,让人看起来很难看,那如何才能让图片的高度自适应呢?使用css的height:auto也没办法实现. 翻看了小程序社区的问答,发现了 ...
微信小程序图片删除php,关于微信小程序中图片处理的问题总结
在小程序的开发过程中,页面布局中,我们经常会遇到一些图片处理的问题,比如,如果图片不是固定高度和高度,但image设置的是固定的高度和宽度,这时候原始图片相对image设置的固定高度和宽度不是等比例大 ...
微信小程序中图片下面出现空白区
小程序wxml中如果出现了这种结构:<view><image></view>,只需设置图片垂直居中的方式(vertical-align)为middle即可.
解决微信小程序中图片闪烁的问题
被这个问题逼出了强迫症,到处找解决办法,最后自己用了这个方法算是解决了.在全局css中加这样的代码: Image{height: auto; } 我设置的是固定宽度,高度自适应用的是widthFix, ...
如果微信小程序中图片过多过大怎么办
推荐一篇博文,免费使用云存储解决.优雅. https://blog.csdn.net/m0_46184946/article/details/106108999
html img 手势缩放,微信小程序中利用image组件实现图片手势缩放
微信小程序中利用image组件实现图片手势缩放,前端大神严灏的牛文,讲解了微信小程序中image组件的三种是缩放模式,三种之中,只有 aspectFit 模式可以等比例缩放图片,并显示完整的图片. 原 ...

微信小程序中，图片的位置设置

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

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

微信小程序中，图片的位置设置相关推荐

最新文章

热门文章