微信小程序有类似表格不带边框的布局

微信小程序有类似表格不带边框的布局,第1张

是的,微信小程序中有一些组件可以实现类似表格不带边框的布局。以下是一些常用的组件:

1. view组件:可以用view组件来实现类似表格的布局。可以使用flex布局来控制子元素的排列方式。

2. swiper组件:可以使用swiper组件来隐侍实现多列的滑动列表,类似于表格的效果。

3. scroll-view组件:可以使用scroll-view组件来实现滚动列表,也可以通过设置样式来实现类似表格的效果。

4. rich-text组件:可以使用rich-text组件来渲染富文本内容,也可以通过设置样式来实现类似表格的效果。

需要注意的是灶纳吵,以上组件都需要根据实际需求来选择,并进行样式的调整,茄轮以达到最终的布局效果。

可以使用的有: cover-view 、 cover-image , button , <ad>, <navigator>,其他的一律不显示

意思就是要么设置四周的边框,要么就不显示,单独使用 border-left , border-right , border-top , border-bottom 都不会显示,那么问题来了,如果要绘制类似于表格的东西,单元格之间边框肯定会很粗,这就需要单独设置某一条边的边框,这恰恰是 cover-view 不支持的,例如:

微信开发者工具上看好的很:

然而我们再来看看真机上:

Android上同样不显示

有问题就要解决啊,于是又弄了这么个解决办法:所谓边框就是4条败庆线吧,那我们手动创建这四条线:

开发工具上完察灶握全符合我的需求啊,当时就乐的不辩尺行,感觉自己是个天才,而且ios上也好的很,可是,偏偏Android让人头疼:

cover-view 的定位还是有点问题,遇到这样子的也真是无解了

正常应该是这样的:

但就是因为用了 cover-view ,才出现这个样子:

在子节点溢出父节点后,溢出部分就被吃掉了,这种情况只在 cover-view/cover-image 出现,只能把超出的那个 cover-view 提到上一层去了,但是这又会掉到新的坑里去了,这里很明显有个层级问题

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/12530789.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-26
下一篇 2023-05-26

发表评论

登录后才能评论

评论列表(0条)

保存