公告列表
公告列表
收藏
回答

小程序顺丰 这个效果怎么实现的？

第1部分：navigation bar 自定义这个我知道怎么做。

第2部分：多图轮播，而且和第1部分看起来了就是一个整体在动。 切换如下图，过滤都很自然。





最后一次编辑于  2022-05-24
回答关注问题邀请回答
收藏

6 个回答

  • 睡前原谅一切
    睡前原谅一切
    2022-05-24

    一个自定义导航栏就好了。不写头部导航栏。swiper正常布局顶到头部不就好了？我们小程序都用了N久了。这是左右滑动到中间截的图，可以看出整体滑动。

    2022-05-24
    有用 1
    回复 8
    • 牧羊人
      牧羊人
      2022-05-24
      对，就是你这样的效果，swiper正常布局顶到头部 -- position:fixed, top:  0 .....这么搞是吧？
      2022-05-24
      赞
      回复
    • destiny
      destiny
      2022-05-24回复牧羊人
      这么难理解？设置navigationStyle:custom,不用position，页面第一个标签就是swiper，自动就顶上去了
      2022-05-24
      赞
      回复
    • 睡前原谅一切
      睡前原谅一切
      2022-05-24回复牧羊人
      不需要什么position: fixed。只要你设置自定义导航栏后，底部的内容就会顶上去就在头部了。你swiper正常布局。然后不写导航栏。。
      2022-05-24
      赞
      回复
    • 睡前原谅一切
      睡前原谅一切
      2022-05-24回复牧羊人
      你把它想复杂了。。设置自定义导航栏，你不需要去写导航栏高度啥的，底部swiper就正常排版在顶部了
      2022-05-24
      赞
      回复
    • 牧羊人
      牧羊人
      2022-05-24
      好的，知道了，谢谢两位，我只是奇怪swiper 为个么自动顶上去了，图片居然顶不上去。 试试就知道了。
      2022-05-24
      赞
      回复
    查看更多(3)
  • destiny
    destiny
    2022-05-24

    设置"navigationStyle": "custom",后页面没有自定义navigation bar，1,2就是一体的

    2022-05-24
    有用 1
    回复 6
    • 牧羊人
      牧羊人
      2022-05-24
      好的， 自定义导航栏，我已经实现了，他这是是轮播效果，这个怎么实现，我想知道这个。。。
      2022-05-24
      赞
      回复
    • destiny
      destiny
      2022-05-24回复牧羊人
      swiper组件，https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
      2022-05-24
      赞
      回复
    • 牧羊人
      牧羊人
      2022-05-24
      1，2 两部分一起轮动？
      2022-05-24
      赞
      回复
    • destiny
      destiny
      2022-05-24回复牧羊人
      跟你说了就是一体的，第一部分你不用做，第二部分通栏就行了
      2022-05-24
      赞
      回复
    • 牧羊人
      牧羊人
      2022-05-24
      你的意思，不要自定义navigation bar，图片换成swipter 组件，就顶上去了？
      2022-05-24
      赞
      回复
    查看更多(1)
  • Frank
    Frank
    2022-05-24

    swiper组件自己试下就好了

    2022-05-24
    有用
    回复
  • 拾柒
    拾柒
    2022-05-24

    1、2没有分开的，他就是一整块swiper

    2022-05-24
    有用
    回复
  • Hlxuan.
    Hlxuan.
    2022-05-24

    自定义导航栏显示完整的图片。

    2022-05-24
    有用
    回复
  • 崔晏哲
    崔晏哲
    2022-05-23

    监听 swiper 的 bindchange 即可实现

    2022-05-23
    有用
    回复 1
    • 牧羊人
      牧羊人
      2022-05-24
      他是一张完整图片？
      2022-05-24
      赞
      回复
请 登录 后发表内容
相关问题
相关文档