微搭低代码实现横向滚动效果

@TOC

在小程序场景中，有很多横向滚动的效果，比如我们的官方模板电商展示里就有一个横向滚动的效果，本篇我们解读一下横向滚动该如何实现

在这里插入图片描述

1 添加滚动容器

不管是横向滚动还是纵向滚动，我们都是依靠组件实现的，微搭里实现滚动的效果是使用的滚动容器

往页面中先添加一个滚动容器组件

在这里插入图片描述

组件添加好后在右侧的面板切换到属性面板，打开基础属性，将配置切换为允许横向滚动

在这里插入图片描述

2 滚动内容设置

里边的内容我们使用网格布局来实现，先添加一个网格布局

在这里插入图片描述

选中行组件，修改列的数量为1

在这里插入图片描述

需要在列里迭代显示具体的卡片，我们这里使用循环展示来设置循环，选中列往里添加一个循环展示组件

在这里插入图片描述

循环展示需要绑定一个数组，我们通过定义变量来读取数据库的内容。

在代码区，点击新建来创建变量

在这里插入图片描述

选择新建微搭数据表查询

在这里插入图片描述

选择数据源，方法选择查询单条，输入我们的数据标识

在这里插入图片描述

绑定我们的循环数据，绑定到店铺优势

在这里插入图片描述

循环展示里的卡片我们使用普通容器进行布局，在普通容器里添加图片和两个文本组件

在这里插入图片描述

然后设置一下普通容器的宽和高，设置为宽130px，高170px

在这里插入图片描述

设置图片的宽和高为40px

在这里插入图片描述

图片的地址从循环对象里选择对应的字段

在这里插入图片描述

按照同样的方法设置一下文本内容的绑定

在这里插入图片描述

普通容器我们需要绑定一下背景色，设置style绑定

在这里插入图片描述

在这里插入图片描述

样式绑定的时候我们要自己写一下表达式，CSS的属性使用驼峰命名，第一个单词小写，第二个单词大写，不要有分隔符

({backgroundColor:$w.item_repeater1.bgColor})

内容设置好了之后，选中列，设置列的宽度为适应内容

在这里插入图片描述

这里遇到了卡片是从上到下排列的，主要是层级不对的问题，我们是需要循环列，因此重新调整一下组件的顺序

在这里插入图片描述

卡片的内容有点挤，我们设置一下普通容器的内边距

在这里插入图片描述

还有一个地方需要设置的是要覆盖一下网格布局的样式，要不然搭建好后卡片是自动换行的

在这里插入图片描述

点击右下角的代码编辑器，我们在style里定义一下样式

在这里插入图片描述

在这里插入图片描述

.grid-row  {
  .wd-grid-row{
      flex-wrap: nowrap !important;
  }
}

样式的意思是让网格布局的行组件里的内容不要换行

样式设置好之后，选择网格布局，我们添加一下样式

在这里插入图片描述

总结

横向滚动效果要结合滚动容器和网格布局一起进行设置，这里的技巧是网格布局要设置成一行一列，循环的时候是循环列，还要覆盖一下网格布局的默认样式，才可以实现我们具体的效果。

低代码开发虽然是可视化开发，但是组件如何组合，样式如何设置还是需要积累的，积累最快的方式就是细细研读每一个官方模板，将里边的知识点牢固掌握，在自己开发应用时候就可以灵活进行配置。