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

目录

  • [1 跑马灯效果](#1 跑马灯效果)
  • [2 创建数据源](#2 创建数据源)
  • [3 创建变量](#3 创建变量)
  • [4 搭建组件](#4 搭建组件)
  • [5 数据绑定](#5 数据绑定)
  • [6 录入测试数据](#6 录入测试数据)
  • 总结

上一篇我们介绍了轮播图如何开发,本节我们介绍一下跑马灯的效果开发。

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类

5 数据绑定

样式配置好之后我们给文本组件绑定变量,点击文本内容的fx

输入如下的表达式

javascript 复制代码
$w.notice.data.records[0].tznr

表达式的意思是我们从变量里取第一条数据,绑定数据的通知内容字段

6 录入测试数据

数据绑定后现在还没有效果,因为没有录入数据。点击左侧导航条的数据源图标

选择通知公告数据模型,点击管理数据

录入测试数据即可

总结

本篇我们实现了跑马灯的具体效果,跑马灯用到了CSS的动画的效果,在页面具体实现的时候,灵活的配置样式就可以实现我们需要的效果。不过低代码的前端开发是用组件进行搭建,可能搜出来的方案是纯代码的方式,需要根据代码的意思针对性的选用合适的组件搭建即可。

相关推荐
萧鼎11 分钟前
深度探索 Py2neo:用 Python 玩转图数据库 Neo4j
数据库·python·neo4j
m0_653031361 小时前
腾讯云认证考试报名 - TDSQL数据库交付运维专家(TCCE MySQL版)
运维·数据库·腾讯云
power 雀儿1 小时前
集群聊天服务器---MySQL数据库的建立
服务器·数据库·mysql
骑着王八撵玉兔3 小时前
【性能优化与架构调优(二)】高性能数据库设计与优化
数据库·性能优化·架构
想要入门的程序猿4 小时前
Qt写入excel
数据库·qt·excel
Q_970956394 小时前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js
Wyc724094 小时前
Maven
java·数据库·maven
程序猿小D4 小时前
[附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+jsp实现的电影小说网站管理系统,推荐!
java·数据库·mysql·spring·毕业设计·ssm框架·电影小说网站
羊小猪~~4 小时前
数据库学习笔记(十七)--触发器的使用
数据库·人工智能·后端·sql·深度学习·mysql·考研
背太阳的牧羊人5 小时前
Neo4j 的向量搜索(Neo4jVector)和常见的向量数据库(比如 Milvus、Qdrant)之间的区别与联系
数据库·neo4j·milvus