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

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

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

2 swiper组件：可以使用swiper组件来实现多列的滑动列表，类似于表格的效果。

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

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

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

比较懒，还是上一篇的图：

如上一篇所属，“我的”页面菜单列表主要是用到了wx: for和navigator

利用navigator可以很方便的实现菜单功能，它带有的url和class、hover-class可以很轻松的设置点击效果及点击跳转地址：

在js中甚至不需要做什么事情，我这里把菜单的数据放在了js中，通过修改data中的menuitems即可达到配置的作用，甚至如果有需求，还可以放在服务端做成可随意变化的：

微信小程序：“我的”页面布局（一）：微信用户信息获取及UI

微信小程序：“我的”页面布局（二）：可配置功能菜单列表

最初打算使用scroll-view实现，效果好、流畅、有惯性滑动，但由于滚动条没法去掉、无法实现上下层的帧布局，最终放弃了。 还是自己写个吧，利用手势事件。遗憾的是小程序中目前没有像Android中快速滑动事件，所以，要实现惯性滑动是不可能了。 item的布局： 推荐小程序优先使用flex布局，完全够用。这也是微信推荐的。 <view wx:for="{{cardTeams}}" wx:for-item="cardTeam" id="{{cardTeam/images/20150928/tooopen_sy_143912755726jpg" mode="scaleToFill"></image> <view class="number-wrapper"> <text class="name">{{cardTeamname}}</text> <view class="count-wrapper"> <view class="decrease-btn">-</view> <text class="count">1</text> <view class="increase-btn">+</view> </view> <view class="price-wrapper"> <text class="unit">¥</text> <text class="price">9980</text> </view> </view> <view class="ok"><view class="inner-ok">确定</view></view> <view class="remove" data-id="{{cardTeamid}}" bindtap="delItem"><view>删除</view></view> </view> 主要是将删除按钮的设为绝对定位(position: absolute)： item remove{ width: 60px; height: 100%; background-color: red; position: absolute; top: 0; right: -60px; display: flex; justify-content: center; align-items: center; } Page({ data: { cardTeams:[{"id":"aaaaa", "name":"android教程", "url":"", "right":0, "startRight":0},{"id":"bbbb", "name":"小程序教程", "url":"", "right":0, "startRight":0}] }, drawStart : function(e){ // consolelog("drawStart"); var touch = etouches[0]; startX = touchclientX; startY = touchclientY; var cardTeams = thisdatacardTeams; for(var i in cardTeams){ var data = cardTeams[i]; datastartRight = dataright; } key = true; }, drawEnd : function(e){ consolelog("drawEnd"); var cardTeams = thisdatacardTeams; for(var i in cardTeams){ var data = cardTeams[i]; if(dataright <= 100/2){ dataright = 0; }else{ dataright = maxRight; } } thissetData({ cardTeams:cardTeams }); }, drawMove : function(e){ //consolelog("drawMove"); var self = this; var dataId = ecurrentTargetid; var cardTeams = thisdatacardTeams; if(key){ var touch = etouches[0]; endX = touchclientX; endY = touchclientY; consolelog("startX="+startX+" endX="+endX ); if(endX - startX == 0) return ; var res = cardTeams; //从右往左 if((endX - startX) < 0){ for(var k in res){ var data = res[k]; if(res[k]id == dataId){ var startRight = res[k]startRight; var change = startX - endX; startRight += change; if(startRight > maxRight) startRight = maxRight; res[k]right = startRight; } } }else{//从左往右 for(var k in res){ var data = res[k]; if(res[k]id == dataId){ var startRight = res[k]startRight; var change = endX - startX; startRight -= change; if(startRight < 0) startRight = 0; res[k]right = startRight ; } } } selfsetData({ cardTeams:cardTeams }); } }, //删除item delItem: function(e){ var dataId = etargetdatasetid; consolelog("删除"+dataId); var cardTeams = thisdatacardTeams; var newCardTeams = []; for(var i in cardTeams){ var item = cardTeams[i]; if(itemid != dataId){ newCardTeamspush(item); } } thissetData({ cardTeams:newCardTeams }); }, onLoad: function () { consolelog('onLoad:'+appglobalDatadomain) } }) drawStart用于记录手指触碰时的位置，drawMove记录手指滑动的位置，两者的差值就是删除按钮的偏移量 drawEnd手指抬起时触发，用于设置d回、摊开效果。目前我的是超过一半自动d开，不足一半自动收回。 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

在需要的时候使用它，用完即走。

这一句应该是当前对于小程序大家都存在争议的一点。

我在猜想，小程序会不会是微信在对于AR领域的一种前瞻性布局。

相信看过“虚拟现实”类动漫和小说的人，应该很容易理解那种AR式的人机交互。

比如：

走在路上，经过一个蛋糕店，看到一款蛋糕，AR的情况下就是在虚空中点击一下蛋糕，然后会显示出蛋糕的价格、成分等等信息。而微信的场景，是蛋糕旁边放着一个二维码，用户掏出微信扫一扫就能打开某个小程序中这个蛋糕的页面，一样可以查看价格、成分等信息。

类似的场景可以有非常多，包括网上各种O2O的构思等等，其实以AR的角度来理解是不是很容易就能说得通了？

现在微信引导大家使用小程序，而当AR普及的时候，微信AR版已经能够借由小程序承载这种新的交互需求。

以上就是关于微信小程序有类似表格不带边框的布局全部的内容，包括:微信小程序有类似表格不带边框的布局、微信小程序：“我的”页面布局（二）：可配置功能菜单列表、如何在安卓手机微信小程序里实现Flex布局等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！