用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
公告:2018年11月30日,论坛关闭回复功能,任何问题可联系底部在线客服解决

即速应用 | 教程

即速应用 - 微信小程序开发资源汇总

六、小程序 | 电商系统
七、小程序 | 预约系统
八、小程序 | 外卖系统
九、小程序 | 到店系统
十、小程序 | 社区系统
十一、小程序 | 视频系统
  • TA的每日心情
    无聊
    2017-8-15 16:38
  • 签到天数: 42 天

    [LV.5]常住居民I

    890

    主题

    2079

    帖子

    3万

    金钱

    管理员

    论坛管理员

    Rank: 9Rank: 9Rank: 9

    积分
    0

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

    QQ
    2016-1-27 14:06:51 zhichi_admin 管理员 楼主 29287



    一、功能介绍

    顶部导航是固定于小程序页面顶部的快捷键,商家设定好顶部导航内容,消费者点击导航按钮才可跳转对应页面。

    二、使用场景

    1. 商家在顶部导航添加扫码购或搜索功能,便于消费者实时搜索店铺商品
    2. 在顶部导航放置返回键或者消息通知功能,让消费者及时收到消息通知,促进消费,提高销量

    三、功能展示图

    1.png

    2.png

    注:
    1.自定义导航的搜索目前只支持跳转固定页面进行搜索
    2.web端未做预览,请到开发者工具查看
    3.第一次使用新的自定义导航,需要重新打包

    四、操作流程

    (一)前端编辑器如何设置顶部导航

    1、切换版本
    (1)进入【前端编辑页】,点击小程序“顶部”空白出,选择默认导航,即旧版导航
    3.png

    (2)点击自定义导航,将会弹窗提示
    选择【确定】后,所有已添加的页面/新添加的页面都会选中自定义导航,并且默认选中第一个
    4.png

    5.png

    2、第一种顶部导航设置
    (1)第二个图标可自定义图标,也支持再次点击取消选中
    (2)第二个图标可自定义点击事件
    6.png

    (3)自定义导航样式
    7.png

    3、第二种顶部导航设置
    (1)图标可自定义,也支持再次点击取消选中
    (2)图标的点击事件默认选中返回上一层,可自定义导航点击事件
    8.png

    (3)如果点击事件选择消息通知则会在图标处出现角标消息通知角标效果
    9.png

    效果图如下:
    10.png

    (4)自定义导航样式

    4、第三种顶部导航设置
    (1)选中第三种顶部导航样式时,可以设置搜索功能
    5.jpg

    (2)搜索功能设置教程:
    注:搜索功能非全局搜索,只是跳转到固定页面进行搜索,如果不满足条件,请勿使用该顶部导航
    首先在编辑页添加高级组件(到店列表/商品列表/预约列表)添加后,才可在搜索下拉框中选择对应的列表
    未添加列表组件的时候,没有列表可选择
    13.png

    添加了高级组件(到店列表/商品列表/预约列表)时,即可在下拉框选择列表
    14.png

    设置组件样式

    在小程序中点击搜索将会跳转到固定的商品列表中
    16.png

    5、第四种顶部导航设置
    第四种的设置与第三种一样
    2.jpg

    6、第五种顶部导航设置
    (1)图标可自定义,也支持再次点击取消选中
    (2)图标的点击事件默认选中返回上一层,可自定义导航点击事件
    18.png

    (3)设置切换页面名称和点击事件
    1.jpg

    功能说明:
    如果要做切换的效果,需要新建两个页面,分别对两个标题绑定不同的页面即可绑定
    注:在设置的两个页面尽量不要设置底部导航
    使用道具 举报 回复
    正需要,支持楼主大人了!
    不支持两侧按钮的话那点击一个页面如何返回上一个页面?
    发新帖
    您需要登录后才可以回帖 登录 | 立即注册
    咫尺论坛|小程序开发社区
    X

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

    还可领取小程序推广攻略