评论

saui小程序-推出仿appStore列表

仿app store列表

app store的列表,相信大家也不陌生。但是目前为止,除了原生app有仿过它之类,在h5或小程序是没有搜到有人是仿写过它的动画效果的。

个人感觉,它点击详情的那个动画 是挺好的,然后我也在想能不能在小程序上也有这样的交互呢? 所以才有了以下的小程序码

在这个实现的过程中,也遇到了几个坑

它是点击item后,另外弹出的弹出层么? 不是

它是怎么扩大的全屏的? 通过位移? ?滚动到某个位置后,点击item 获取到这个item的scrollTop,跟scroll是的top值相减。这个想法,既然成了?!!但是呢,不是每一次........

那它到底是怎么扩大的呢??、

缩放??把item先缩小,点击的时候再放大,并且给它个fixed,哈哈 ~~~就成了,代码可以参考以下:









当然,其中还有别的问题,如果有兴趣了解的话,可以下载源码,过后我会把它抽出来,放在原生小程序里




最后一次编辑于  2019-12-19  
点赞 3
收藏
评论

2 个评论

  • They Say
    They Say
    2019-12-20

    通讯录功能不全,双向控制没做,建议右边字母用touchstart和touchend判断滚动到哪个字母,然后设置右边的scroll-view-id

    2019-12-20
    赞同
    回复 1
    • 🌙
      🌙
      2019-12-20
      双向的功能是做的了,不知道你具体在哪里有问题呢,我去检查一下。至于touch这个,目前是没有做的,因为现在的结构是由数据生成的,加上touch会卡,不过后期会补上的
      2019-12-20
      回复
  • 少年啦
    少年啦
    2019-12-19

    我前几天刚好做了一个这样的小程序

    2019-12-19
    赞同
    回复 6
    • 🌙
      🌙
      2019-12-19
      哈哈 可以看下么
      2019-12-19
      回复
    • 少年啦
      少年啦
      2019-12-19回复🌙
      搜一下  少年啦   刚上线 还有个bug
      2019-12-19
      回复
    • 🌙
      🌙
      2019-12-20回复少年啦
      我看了下~你只是仿了他的列表,但是没有点击详情是弹出的那种效果~~我主要想是做了这个 弹出的那种动画
      2019-12-20
      回复
    • 少年啦
      少年啦
      2019-12-20回复🌙
      弹出效果你要点击首页蓝色头像那个位置
      2019-12-20
      回复
    • 少年啦
      少年啦
      2019-12-20回复🌙
      点胶囊下面那个蓝色头像
      2019-12-20
      回复
    查看更多(1)
登录 后发表内容