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%高度自适应,图片不会拉伸
效果展示使用组件面板中的画廊布局,能够支持显示多张图片,同时结合文件上传组件并春搏,将文件中的图片,上传并显示到界面。
触发器配置注意:在绝祥检查器面板中的触发器设置面板创建触发器,可以对组件进行交互逻辑设置,或配合事件来进行动态数据 *** 作。
选中文件上传组件
点击检查面板中森迹的触发器
创建设置值触发器
自身值即选择文件上传组件的显示值
替换值选择画廊布局
创建一个触发时机是在……时的触发器
这样就可以在小程序里实现多图上传显示了。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)