订水商城实战教程09-跑马灯

1 跑马灯效果

通常小程序会增加一点动画的效果来让页面显得不那么死板，我们这里增加了一个跑马灯的效果。跑马灯的意思是文字从右向左移动，当全部展示完毕后又从右边出现，如此往复。具体的效果：

2 创建数据源

日常我们希望重要的通知放在首页上显示，通知的内容需要放在首页上显示，需要创建一个数据源来存放公告。打开控制台，点击数据模型，点击新建

输入数据模型的名称，通知公告，点击创建按钮完成数据源的创建

点击编辑，创建字段

添加一个通知内容字段，字段标识由系统自动生成，数据类型选择文本，其他选项保持默认即可

3 创建变量

数据源创建好之后，打开我们的自定义应用，在代码区点击创建

选择新建微搭数据表查询

数据表选择通知公告，触发方式选择入参变化时自动执行，方法选择查询多条，点击保存。保存之后就可以修改变量的名称，我们将query1修改为notice

4 搭建组件

变量创建好之后，我们搭建一下组件，组件的结构是外边一层普通容器，里边是图标、普通容器，内层的普通容器再放入一个文本组件

然后点击右下角的代码编辑器

在style里输入如下样式

css 复制代码

.marquee {  
  width: 100%;  
  overflow: hidden;  
  white-space: nowrap;  
}  
  
.marquee p {  
  display: inline-block;
  width:100%;  
  animation: marquee 10s linear infinite ;  
}  
  
@keyframes marquee {  
  0% { transform: translate(100%); }  
  100% { transform: translate(-100%); }  
}

然后选中内层的普通容器，切换到样式，在className配置项选择我们的marquee类