收藏
评论

微信朋友圈选图效果

中秋快乐,帮社区里的小伙伴写的选图效果,仿造的微信朋友圈选图,长按拖动排序主要是用交互监听来实现的。还有几个需要处理的地方。另外在真机上的动画速度总感觉快那么一丢丢。没做预览图,详情见代码片段咯。安卓机效果没试过。。

今天是9月23,这两天接受定制改动~

第一次发经验分享。。轻点喷。。

哦,对了,这里 wx.createSelectorQuery 有个bug。。如果选择的基础库版本在2.0.9以上,第一次打开开发者工具,要先直接点一次编译,不然会出错。。真机上没问题


代码片段:wechatide://minicode/RFLmzDmL7I2a


有小伙伴反馈,在片段上面增加内容会乱位,是因为没计算顶部偏移量,方便懒人,完善了下

新的片段:wechatide://minicode/fOTEM3mI7l3B


终于拿到安卓机器试了,果然卡得很。。要控制频率。这很尴尬,太频繁的话,安卓会卡,太不频繁呢,刚开始移动那阵子会卡。。有同学反馈,说点快了会出问题,于是又加了点击频率的限制

现在的代码片段:wechatide://minicode/xBDdCom17R3c(要重新拿安卓机测试了再看看。。)


附上gif:


最后一次编辑于  2018-10-24  (未经腾讯允许,不得转载)
复制链接收藏赞 21

138 个评论

  • 。。。。。!
    。。。。。!
    2018-10-23

    大佬,有没有办法可让 滑动的时候 禁止屏幕移动,。。。。或者固定屏幕指定位置也行

    2018-10-23
    赞同 11
    回复 47
    • 卢霄霄
      卢霄霄
      2018-10-23

      禁止屏幕移动?你是scroll-view,还是Page的滚动?滑动是在遮罩层上吗?

      2018-10-23
      赞同
      回复
    • 。。。。。!
      。。。。。!
      2018-10-23回复卢霄霄

      没有用到scroll-view,给元素加move事件的时候,页面有进度条,就会导致页面滑动,现在想当他滑动的时候,禁止页面滚动,

      2018-10-23
      赞同
      回复
    • 。。。。。!
      。。。。。!
      2018-10-23回复卢霄霄

      类似这种功能

      2018-10-23
      赞同
      回复
    • 。。。。。!
      。。。。。!
      2018-10-23回复卢霄霄


      像我把你的demo 高度放开只后,移动也会导致页面滑动。。所以想请教一下,有什么方法可以禁止的

      2018-10-23
      赞同
      回复
    • 卢霄霄
      卢霄霄
      2018-10-23回复。。。。。!

      把touch的事件绑定  bind改成 catch?

      2018-10-23
      赞同
      回复
    查看更多(42)
  • 平常心
    平常心
    2018-09-25

    真的很强!    大佬可以拉个群么~

    2018-09-25
    赞同
    回复 15
    • 卢霄霄
      卢霄霄
      2018-09-25

      额。。要做啥?社区就是我的群啊。。

      2018-09-25
      赞同 11
      回复
    • 平常心
      平常心
      2018-09-25回复卢霄霄

      想用你的demo扩展Sortable.js的功能

      2018-09-25
      赞同
      回复
    • 卢霄霄
      卢霄霄
      2018-09-25回复平常心

      请随意使用,需要帮忙的话,可以来社区喊我

      2018-09-25
      赞同 22
      回复
    • 平常心
      平常心
      2018-09-25回复卢霄霄

      太谢谢你喽 :)

      2018-09-25
      赞同
      回复
    • 西赛德李
      西赛德李
      2018-09-26回复卢霄霄

      23333333    “社区就是我的群” 是最骚的

      2018-09-26
      赞同
      回复
    查看更多(10)
  • 范禀坤
    范禀坤
    2018-09-25

    可以啊, 大佬啊

    2018-09-25
    赞同
    回复 1
    • 卢霄霄
      卢霄霄
      2018-09-25

      movable-view应该实现比较类似~ 你实在坚持,可以试试。主要也是要用相交状态的监听。

      2018-09-25
      赞同 11
      回复
  • 开心的笨小孩
    开心的笨小孩
    2018-09-26

    楼主有没有朋友圈视频剪辑的demo

    2018-09-26
    赞同
    回复 2
    • 卢霄霄
      卢霄霄
      2018-09-26

      没写过,脑海里过了下。不好写。。需要后端协助。。最后生成剪辑后的视频也最好用后端来完成,毕竟不同格式的视频存储格式不一样。这个。。还是可以期待一下官方完善 wx.chooseVideo的

      2018-09-26
      赞同 11
      回复
    • 开心的笨小孩
      开心的笨小孩
      2018-09-26回复卢霄霄

      好的 谢谢

      2018-09-26
      赞同
      回复
  • 还好
    还好
    2018-09-29

    哪都能看到你

    2018-09-29
    赞同
    回复 3
    • 卢霄霄
      卢霄霄
      2018-09-29

      哎。。最近有群疯子。。跟我一样的昵称和头像,到处留言

      2018-09-29
      赞同
      回复
    • 还好
      还好
      2018-09-29

      无形装逼,最为致命,悠着点老表😆

      2018-09-29
      赞同
      回复
    • 卢霄霄
      卢霄霄
      2018-09-29回复还好

      扶我起来。。我还能。。继续。。装下去

      2018-09-29
      赞同
      回复
  • 尚
    2018-09-30

    老大,666..

    2018-09-30
    赞同
    回复 1
    • 卢霄霄
      卢霄霄
      2018-10-01

      国庆节快乐

      2018-10-01
      赞同
      回复
  • Jany、
    Jany、
    2018-10-09

    厉害了,并且哪都能看到你

    2018-10-09
    赞同
    回复 5
    • 卢霄霄
      卢霄霄
      2018-10-09

      别眨眼 我马上回来

      2018-10-09
      赞同
      回复
    • 卢霄霄
      卢霄霄
      2018-10-09

      你头像。是未来吗?好模糊呀

      2018-10-09
      赞同
      回复
    • Jany、
      Jany、
      2018-10-09回复卢霄霄

      不是哇 没有眼镜

      2018-10-09
      赞同
      回复
    • 卢霄霄
      卢霄霄
      2018-10-09回复Jany、

      眼镜属性是必须的吗。。原来如此

      2018-10-09
      赞同
      回复
    • Jany、
      Jany、
      2018-10-09回复卢霄霄

      眼镜娘嘛

      2018-10-09
      赞同
      回复
  • A小左
    A小左
    2018-10-10

    大佬,想请问一些问题,小程序可以主动推送消息吗?我目前需求是想把报警信息进行推送给用户。就是检测到有报警就推送给用户,

    2018-10-10
    赞同
    回复 14
    • 卢霄霄
      卢霄霄
      2018-10-10

      是推给他的微信吗?可以用模板消息。请参考下面的文档

      https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/template-message.html

      2018-10-10
      赞同
      回复
    • A小左
      A小左
      2018-10-10回复卢霄霄

      用户没有进行表单提交操作,他可能登入小程序没有报警,退出后有报警了,我想推送给他。

      2018-10-10
      赞同
      回复
    • A小左
      A小左
      2018-10-10

      我想做的就是 只要检测到报警信息,我就推送给他,在过一两个小时,如果还有报警信息或者推送了他没有处理,我就继续推送。

      2018-10-10
      赞同
      回复
    • 卢霄霄
      卢霄霄
      2018-10-10回复A小左

      用户在你的小程序里总有点击的地方吧。。比如你本来是写的

      <view bindtap="func">啦啦</view>

      你要改成

      <form bindsubmit="submitFn">

          <button form-type="submit" bindtap="func">啦啦</button>

      </form>

      submitFn里会有个formid,你要在后端存起来

      2018-10-10
      赞同
      回复
    • A小左
      A小左
      2018-10-10

      那我可以在他登录成功的时候把这个formid存起来。 另外我想知道这个模板消息限制是多少条,最短发送时间间隔多少。而且 一个formid 可以 多次推送吗。这个推送次数我也不确定。不知道啥时候有报警消息。

      2018-10-10
      赞同
      回复
    查看更多(9)
  • upup
    upup
    2018-10-12

    感觉以后遇到问题直接@霄神就好了  哈哈哈哈

    2018-10-12
    赞同
    回复 1
    • 卢霄霄
      卢霄霄
      2018-10-12

      不听不听 王八念经

      2018-10-12
      赞同
      回复
  • 李智
    李智
    2018-10-15

    才发现朋友圈的选图居然还可以移动。。。

    2018-10-15
    赞同
    回复 1
    • 卢霄霄
      卢霄霄
      2018-10-15

      怪我咯。。

      2018-10-15
      赞同
      回复