微信小程序开发|教程|文档|资源汇总_即速论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 42506|回复: 20

「即速应用」微信小程序动态容器功能组件 - 教程

  [复制链接]
  • TA的每日心情
    无聊
    2017-8-15 16:38
  • 签到天数: 42 天

    [LV.5]常住居民I

    910

    主题

    2100

    帖子

    3万

    金钱

    管理员

    论坛管理员

    Rank: 9Rank: 9Rank: 9

    积分
    0

    突出贡献优秀版主荣誉管理论坛元老

    QQ
    发表于 2016-1-27 14:11:28 | 显示全部楼层 |阅读模式
    观看此功能视频教程请点击http://school.jisuapp.cn/courses/151-31.html
    一、动态容器是什么?
    “动态容器是详情页里可以展示其他数据的窗口”,详情页一般默认只能绑定的一个后台数据,但是动态容器可以在详情页里展示详情页以外的内容。它能够展示应用数据、电商、预约、到店、视频等信息。且能够在详情页里跳转到另一个详情页。

    动态容器.gif

    二、组件优点
    ①能够在详情页里展示其他数据
    ②能够在详情页里跳转到其他详情页
    ③只需添加少数组件,即可展示大量内容
    小程序上线后,后台可直接修改内容,线上即同步更新(修改内容无需重新打包)
    ⑤小程序使用动态容器添加的数据内容,打包时不会影响到代码包大小
    ⑥同比其他组件,动态容器在小程序中可以更加自由的排版。
    ⑦动态列表可以调用多种数据,如:应用数据、电商、预约、到店、视频等。

    三、动态容器怎么使用
    提示:使用动态容器是建立在动态列表与详情页之上,建议先学习动态列表组件的使用方法

    使用条件:
    ①动态容器组件必须要放置在详情页内
    ②所放置详情页必须绑定数据内容
    ③动态容器必须配合【外键】功能使用

    1. 添加组件
    我们先在详情页下方,添加【动态容器】组件

    1

    1

    然后我们往【动态容器】里添加一些组件:【自由面板】【图片】【文本】,并排版好

    2

    2

    不知道是哪条数据?
    若不知道对应的是哪个应用数据,可以点击页面“file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml\wps44BE.tmp.jpg”按钮,在下方页面“绑定对象”内找到,如下图

    3

    3

    2. 建立“数据外键”
    我们点击【动态容器】右上方的“管理对象”,进入到后台

    4

    4

    自动来到后台的应用数据项,这里我们找到详情页所绑定的数据对象,点编辑进去

    5

    5

    进入后,添加一条新字段,类型选【外键】再选择你需要展示的数据类型,保存即建立完成
    本次教程将以展示【商品】为例

    6

    6
    支持外键类型:
    ①应用数据
    ②商品
    ③预约
    ④到店
    ⑤视频

    3. 添加“外键”内的数据
    添加完成后,我们点击【数据管理】,来添加内容

    7

    7

    进来我们会看到已有的数据内容,由于外键是刚添加的,它并没有相关的外键数据,那我们点击【编辑】,进入添加

    8

    8

    展开一个数据栏,点击“编辑外键”

    9

    9
    展开一个选择栏,勾选上你想在详情页展示的数据(支持多选),确定保存即可

    10

    10

    4. 绑定数据、数据字段
    保存完成后,我们直接返回到前端详情页里,点击【动态容器】在右上方,绑定数据
    ( 该处数据来源于后台的“外键数据” )

    11

    11

    再给里边添加的组件绑定上,数据字段,即可完成!
    ( 此处可以绑定其他字段,不同字段展示名称对应的内容 )

    12

    12

    13

    13

    实际效果

    14

    14
       

    15

    15

    16

    16
       

    17

    17

    观看此功能视频教程请点击http://school.jisuapp.cn/courses/151-31.html




    上一篇:「即速应用」微信小程序动态列表组件 - 教程
    下一篇:小程序开发工具 即速应用个人中心组件
    回复

    使用道具 举报

    该用户从未签到

    0

    主题

    60

    帖子

    490

    金钱

    禁止发言

    积分
    0
    发表于 2020-6-22 16:06:51 | 显示全部楼层
    提示: 作者被禁止或删除 内容自动屏蔽

    该用户从未签到

    2

    主题

    13

    帖子

    269

    金钱

    新人求带

    Rank: 1

    积分
    0
    发表于 2017-2-11 08:58:12 | 显示全部楼层
    写的太少了。不知道怎么用。
  • TA的每日心情
    开心
    2016-12-21 08:58
  • 签到天数: 11 天

    [LV.3]偶尔看看II

    0

    主题

    22

    帖子

    366

    金钱

    新人求带

    Rank: 1

    积分
    0
    发表于 2016-12-6 06:41:39 | 显示全部楼层
    介绍的不够详细,搞不懂

    该用户从未签到

    0

    主题

    5

    帖子

    238

    金钱

    咫尺尊享

    Rank: 5Rank: 5

    积分
    6
    发表于 2017-5-10 15:06:00 | 显示全部楼层
    动态容器组件无法拖拽双栏组件入内,而动态列表组件可以拖拽双栏组件入内。
  • TA的每日心情
    无聊
    2017-8-15 16:38
  • 签到天数: 42 天

    [LV.5]常住居民I

    910

    主题

    2100

    帖子

    3万

    金钱

    管理员

    论坛管理员

    Rank: 9Rank: 9Rank: 9

    积分
    0

    突出贡献优秀版主荣誉管理论坛元老

    QQ
     楼主| 发表于 2017-5-16 10:18:31 | 显示全部楼层
    小程序客服上饶 发表于 2017-5-10 15:06
    动态容器组件无法拖拽双栏组件入内,而动态列表组件可以拖拽双栏组件入内。 ...

    动态容器目前还在升级中,不建议您使用

    该用户从未签到

    0

    主题

    2

    帖子

    147

    金钱

    新人求带

    Rank: 1

    积分
    0
    发表于 2017-9-26 09:10:44 | 显示全部楼层
    zhichi_admin 发表于 2017-5-16 10:18
    动态容器目前还在升级中,不建议您使用

    现在可以用了吗

    该用户从未签到

    0

    主题

    8

    帖子

    108

    金钱

    新人求带

    Rank: 1

    积分
    0
    发表于 2017-9-27 16:48:00 | 显示全部楼层
    看不懂啊,能不能给举个例子
  • TA的每日心情
    难过
    2017-9-30 09:09
  • 签到天数: 1 天

    [LV.1]初来乍到

    1

    主题

    11

    帖子

    152

    金钱

    新人求带

    Rank: 1

    积分
    0
    发表于 2017-10-3 14:16:37 | 显示全部楼层
    学习学习
    回复

    使用道具 举报

    该用户从未签到

    1

    主题

    5

    帖子

    160

    金钱

    新人求带

    Rank: 1

    积分
    0
    发表于 2017-10-20 14:07:05 | 显示全部楼层
    搞不明白怎么用

    该用户从未签到

    0

    主题

    2

    帖子

    49

    金钱

    新人求带

    Rank: 1

    积分
    0
    发表于 2017-10-21 17:50:57 | 显示全部楼层
    看不懂怎么用,在有动态列表的页面却无法使用动态容器
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    咫尺论坛|小程序开发社区
    X

    扫码添加专属客服即可随时咨询

    还可领取小程序推广攻略

    QQ|微信小程序开发|教程|文档|资源汇总_即速论坛 ( 粤ICP备14097199号-1|网站地图   

    GMT+8, 2021-9-24 05:02 , Processed in 0.182398 second(s), 60 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表