家政预约小程序06活动展示

目录

  • [1 创建变量](#1 创建变量)
  • [2 搭建布局](#2 搭建布局)
  • [3 创建活动详情页](#3 创建活动详情页)
  • [4 搭建详情页布局](#4 搭建详情页布局)
  • [5 设置页面跳转](#5 设置页面跳转)
  • 总结

上一篇我们介绍了活动管理后台的功能,管理员在后台录入活动信息后,需要在小程序中进行展示,本篇我们介绍一下如何显示活动信息

1 创建变量

要想显示活动信息,需要先创建变量来从数据源中读取。打开我们的小程序,在代码区点击+号创建变量

选择新建内置数据表查询

选择活动管理数据表,触发方式选择入参变化时自动执行

增加数据筛选条件,设置为活动状态等于进行中,是否在首页展示等于true

2 搭建布局

变量创建好了之后,我们需要搭建布局来显示活动的图片。在Tab栏导航布局的内容插槽里添加普通容器,普通容器下添加图片组件

选择布局模式为裁剪填满

选择图片组件的地址属性的fx,我们绑定一下数据

绑定为活动展示图片

设置图片宽100%,高80px

设置圆角半径,设置10

给普通容器设置左右各10的内边距

3 创建活动详情页

当用户点击图片的时候,我们要跳转到详情页。点击页面创建的图标,创建详情页

选择页面组件,点击新建URL参数

创建活动的标识activityid

在页面组件下添加数据详情组件,数据源选择活动管理

设置数据筛选,筛选条件设置为数据标识等于我们的URL参数

4 搭建详情页布局

将数据详情生成的布局删掉

先添加普通容器,里边添加图片组件,设置布局模式为裁剪填满

点击地址的fx,从数据详情里绑定活动宣传图片字段

设置图片的宽度为100%,高度为80px

继续添加普通容器,里边添加两个文本组件,第一个文本组件我们绑定为活动的名称

第二个文本绑定为活动的起止时间

普通容器设置一定的内边距

继续添加普通容器,里边添加标签选择组件

标签选择我们要显示活动的规则,为此要创建一个变量来获取规则,点击立即新建,创建内置数据表查询

数据源选择活动规则表

入参设置为所属活动等于URL参数

给标签选择绑定选项,使用表达式进行绑定

继续添加普通容器,里边添加富文本展示组件

内容绑定为活动描述字段

继续添加普通容器,里边添加按钮组件

设置普通容器的布局为横向排列,水平垂直居中

5 设置页面跳转

回到首页,我们给图片增加点击事件,跳转到详情页

跳转的时候我们要传入活动的数据标识

至此,我们就完成了活动展示的页面搭建

总结

我们本篇讲解了在首页显示活动图片,点击图片跳转到活动详情的功能。主要需要熟悉数据详情组件的搭建过程,理解页面跳转时候需要提前设置好URL参数,在跳转的时候要传入具体的参数。下一篇我们讲解一下用户在打开页面写入数据以及参加活动时记录用户选择的信息。

相关推荐
The_era_achievs_hero1 小时前
微信小程序41~50
微信小程序·小程序
走,带你去玩9 小时前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
CC同学呀19 小时前
从0到100:单位订餐统计小程序开发日记2025
小程序
低代码布道师1 天前
低代码实战训练营教学大纲 (10天)
低代码
666HZ6661 天前
微信小程序中scss、ts、wxml
微信小程序·小程序·scss
二十十十十十1 天前
微信点餐小程序—美食物
微信·小程序
向明天乄1 天前
在小程序中实现实时聊天:WebSocket最佳实践
websocket·网络协议·小程序
h185385922441 天前
租车小程序电动车租赁小程序php方案
小程序
海的诗篇_1 天前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
说私域1 天前
基于开源AI智能客服、AI智能名片与S2B2C商城小程序的微商服务质量提升路径研究
人工智能·小程序·开源