用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

小程序开发工具 即速应用搜索组件

  • TA的每日心情
    郁闷
    2017-6-29 17:34
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    75

    主题

    88

    帖子

    10万

    金钱

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    93
    发表于 2016-12-26 20:46:58
    QQ截图20170519155659.png

    一、搜索组件
    • 右侧“搜索提示”可修改搜索框里的文本内容;
    • 右侧“搜索范围(关联列表)”可选择关联管理后台的列表数据对象;
    • 右侧“快捷标签”可编辑搜索关键词,点击即可快速进入关联数据页面。
    搜索组件展示图如下
    1.png

    二、如何设置搜索组件

    搜索组件可与动态列表组件商品列表组件搭配使用,完成对后台相关列表数据对象的绑定,实现对后台相关列表数据的搜索功能。
    例:搜索组件与动态列表组件搭配
    1. 添加如下布局,最后点击上方框 "管理" 进入后台编辑 "动态列表" 数据。(注:列表名称命名为列表1
    动态列表后台的数据添加可参考:http://bbs.zhichiwangluo.com/forum.php?mod=viewthread&tid=11103

    QQ截图20161227172545.png

    2. 进入后台,点击左侧 "应用数据" ,再点击上方 "新增数据对象",创建如下红色箭头指示的一条数据对象。
    3.png

    3. 在该条“数据对象”一栏点击编辑。
    4.png

    4. 进入编辑页面,点击上方 "添加字段",添加如下字段:名称、图片、地点、内容、电话,并选择适当的字段英文名、类型。“搜索项”打钩!点击保存后返回。
    QQ截图20161227172914.png

    5. 返回后点击数据管理。
    6.png

    6. 进入数据管理页面,点击上方 "添加数据",添加如下数据,完成后返回并退出后台管理。
    7.png

    7. 退出后台,回到小程序编辑页面。点击动态列表里相应的"图片"和"文本"组件,右侧方框选择相应的字段,完成对后台相应数据对象的绑定。
    8.png

    8. 点击搜索组件,右侧 "搜索范围" 下拉,选择相应的数据列表,此处选择列表1,完成对列表1后台相关数据的关联。
    9.png

    9. 此外,勾选搜索组件的 "快捷标签",输入与后台数据类似的关键词,并点击左侧 + 号完成添加。最后生成扫码转手机端预览。
    10.png

    10. 手机端上方是“搜索组件”,下方是“动态列表”绑定的后台数据。
    25.png

    11. 点击搜索一栏,如下图所示,可点击下方热门标签“篮球、罗湖”,或者直接输入“球”,点击搜索。

    26.png

    12. 现演示输入 "球" 点击搜索,跳转页面如下。
    27.png

    例:搜索组件与商品列表组件搭配
    1. 添加如下布局, 右侧列表名称命名为商品列表绑定商品数据对象选择电商,此处以电商为例。完成点击上方管理进入后台。
    11.png

    2. 进入管理页面,点击商品管理—商品列表,以店铺类型—电商为例,在右侧添加商品,添加如下商品数据。完成退出后台进入小程序编辑页。
    商品列表后台的数据添加可参考:http://bbs.zhichiwangluo.com/forum.php?mod=viewthread&tid=11184
    20.png

    3. 进入编辑页,点击搜索框,右侧搜索范围(关联列表)关联上方的商品列表,也可添加相应的搜索标签。扫描生成转手机端预览。
    21.png

    4. 手机端预览如下:
    22.png

    5. 点击搜索框,输入"衣服" 点击搜索,也可输入下面的 "搜索标签"快速进入后台的关联数据页面。
    23.png

    6. 点击搜索 "衣服" 后,跳转页面如下。
    24.png


    目前,搜索组件已实现联动搜索(即城市筛选)

    组件库-搜索-勾选开启城市过滤。
    QQ截图20170612145555.png
    举例搜索组件+商品列表,后台商品管理商品编辑页新增城市定位,选择相应的省市区。
    QQ截图20170612144814.png
    可实现效果:请在开发者工具预览
    x0.png
    xx.png
    x1.png
    x2.png
    x3.png



    上一篇:小程序开发教程 即速应用上线微信小程序流程
    下一篇:小程序开发工具 即速应用排序组件
    发表于 2017-1-11 09:04:18
    我想通过搜索只显示 应用数据-数据管理 里面的 数据名称,然后通过点击 数据名称 再显示这个 数据名称 里面的其他详细信息,请问这个如何实现?
    发表于 2016-12-27 08:37:44
    啥也不说了,感谢楼主分享哇!
    发表于 2016-12-27 11:40:23
    设置都ok,数据也好的,为什么没有搜索结果呢?
    发表于 2016-12-29 16:01:08
    yunshan2012 发表于 2016-12-27 11:40
    设置都ok,数据也好的,为什么没有搜索结果呢?

    您好,方便请留下您的小程序id。
    发表于 2016-12-29 16:01:13
    yunshan2012 发表于 2016-12-27 11:40
    设置都ok,数据也好的,为什么没有搜索结果呢?

    您好,方便请留下您的小程序id。
    发表于 2016-12-29 16:01:19
    yunshan2012 发表于 2016-12-27 11:40
    设置都ok,数据也好的,为什么没有搜索结果呢?

    您好,方便请留下您的小程序id。
    发表于 2017-7-24 12:03:25
    设置好了,数据也好了,为什么却没有搜索结果呢?
    发表于 2017-8-16 17:37:53
    cyk 发表于 2016-12-29 16:01
    您好,方便请留下您的小程序id。

    我设置好了,怎么搜索不了?
    发表于 2017-8-16 17:41:09
    吴蜀魏 发表于 2017-8-16 17:37
    我设置好了,怎么搜索不了?

    我的小程序id:
    君诺DSP专车专用线检索器
    123下一页
    发新帖
    您需要登录后才可以回帖 登录 | 立即注册
    咫尺网络 - 小程序开发论坛
    X