微信小程序中如何实现view标签中的图片居中显示，或者view居中？

1、首先打开微信开发者工具，新建一个小程序。

2、page目录下新建一个test目录和相关页面文件。打开app.json文件，将test页面路径放置到index前面。

3、单个view居中：点击打开test.wxml页面代码，肆族输入图中的代码内容。给view设置一个class。

4、点穗困击打开test.wxss文件，这里设猜雹念置元素样式。输入下面图中的样式代码，可以实现view中文字内容居中。

5、最后打开test.wxss文件，设置viewin的样式代码，如图中所示。实现内部的view相对于外层的view居中显示。

因为微信小程序的图片image有默认的宽高：width: 320px和height: 240px，所以只设置宽度100%是无效的，因为图片高度默认240px

只需要添加属性 mode="者慎widthFix"

<image class="img" src="../images/1.png" mode="widthFix">

设置宽首耐敬度100%，

.img{width: 100%}

这样就可以实亩悉现图片宽度100%高度自适应，图片不会拉伸

效果展示

使用组件面板中的画廊布局，能够支持显示多张图片，同时结合文件上传组件并春搏，将文件中的图片，上传并显示到界面。

触发器配置

注意：在绝祥检查器面板中的触发器设置面板创建触发器，可以对组件进行交互逻辑设置，或配合事件来进行动态数据 *** 作。

选中文件上传组件

点击检查面板中森迹的触发器

创建设置值触发器

自身值即选择文件上传组件的显示值

替换值选择画廊布局

创建一个触发时机是在……时的触发器

这样就可以在小程序里实现多图上传显示了。

---