uni-app创建微信小程序 flex布局问题

End_less__ 2020-05-02 06:26:34

在设置微信小程序flex布局的时候，使用的样式如图：

应该出现的样子：

但是我在调试的时候，出现的却是这样：

（四个一列依次出现，并没有出现四方格的样式）
求大佬指点

...全文

884 3 打赏收藏举报

写回复

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

街头小贩 2020-05-05

打赏
举报

回复

引用 1 楼 End_less__ 的回复:

问题已解决，设置image width:100%

好样的。友情提示：请及时结贴

End_less__ 2020-05-03

打赏
举报

回复

因为设置了border,对margin有一定影响，手动调试设置recommend_item的宽度为49.735%

End_less__ 2020-05-03

打赏
举报

回复

问题已解决，设置image width:100%

一、uni-app简单介绍什么是uni-app？ uni-app 是使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。 uni-app的优点跨平台发行，运行体验更好与小程序的组件、API一致；兼容weex原生渲染，增加了开发效率高，但是由于weex坑比较多，建议还是使用局部渲染优化；通用前端技术栈,学习成本更低 ...

重要说明请删除 app.vue 中的全局样式： view{display:flex;} 在需要flex的时候使用flex即可。尺寸单位 uni-app框架目前仅支持长度单位 px 和 %。与传统 web 页面不同，px 是相对于基准宽度的单位，已经适配了移动端屏幕，其原理类似于 rem。 PS：uni-app 的基准宽度为 750px。开发者只需按照设计稿确定框架样式中的 p...

最近刚写完一套小安卓app项目，原生安卓实在太难写了，所以来研究研究uni-app。 uni-app是一套代码可打包为多种程序，因此要保证这一套代码能适配多平台。（据说一套代码能上线安卓app、IOSapp、微信小程序、QQ小程序等一大堆平台）所以啊，官方也推荐写界面的时候用flex布局，能很大程度上适配多个平台。之前写界面很少用到flex，感觉用不太明白，所以今天又回来研究了。简单看了看官方给的模板里，就是用到了弹性布局的例子，自己也试着写了一下，感觉悟了，这不就是Android的布局文件里

js的方案有一个弊端，我实际获取布局信息的时候，并没有获取到元素的布局信息，而是获取到了整屏幕的高度。通过js获取设备高度和外层父元素位置信息，动态计算出剩余高度，也就是scroll-view的高度。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。使用竖向滚动时，需要给一个固定高度，通过 css 设置 height。所以，给scroll-view设置一个固定高度就可以了。,如果没有该属性，高度会溢出，不会出现滚动效果。该方案和小程序无关，是css的知识。

重要说明请删除 app.vue 中的全局样式：view{display:flex;}在需要flex的时候使用flex即可。尺寸单位uni-app框架目前仅支持长度单位 px 和 %。与传统 web 页面不同，px 是相对于基准宽度的单位，已经适配了移动端屏幕，其原理类似于 rem。PS：uni-app 的基准宽度为 750px。开发者只需按照设计稿确定框架样式中的 px 值即可。设计稿 1px 与...

10,610

社区成员

29,026

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章