收藏
评论

微信朋友圈选图效果

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

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

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

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


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


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

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


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

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


附上gif:


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

23 个评论

  • aA
    aA
    04-12

    您好,我这边偶尔会出现这个问题,我拿的是最新的片段



    04-12
    赞同 1
    回复
  • 。。。。。!
    。。。。。!
    2018-10-23

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

    2018-10-23
    赞同 1
    回复 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)
  • Honge
    Honge
    10-08

    是的,如果把第三张图片直接拖动到第一个位置;点击获取结果后,出来的positionArray里面的顺序变成这样:



    正确顺序是不是应该是:[2,0,1]

    10-08
    赞同
    回复 4
    • 卢霄霄
      卢霄霄
      10-08
      这个数组是顺序的列表哦。。本来是[0,1,2]意思是第一张图在0号位,第二张1号位,第三张是2号位。像你说的这么改变之后,第1张去了1号位置,第2张去了2号位置,第三张去了0号位置,那么就应该是[1,2,0]。。如果反过来,把第一张移动到第三个位置,才应该是 [2,0,1]
      10-08
      回复
    • 卢霄霄
      卢霄霄
      10-08
      positionArray记录的是每个图片当前的位置,第一张图的当前位置永远是 positionArray[0],而并没有改变各个图在 positionArray中的位置
      10-08
      回复
    • Honge
      Honge
      10-08回复卢霄霄
      昂搜噶
      10-08
      回复
    • 卢霄霄
      卢霄霄
      10-08回复Honge
      嗦得斯呢
      10-08
      回复
  • Honge
    Honge
    10-08

    相邻图片移动,positionArray是正确的,图片移动超过两个长度positionArray就错乱了

    10-08
    赞同
    回复 3
    • 卢霄霄
      卢霄霄
      10-08
      真机还是模拟器?iOS还是android?
      10-08
      回复
    • Honge
      Honge
      10-08回复卢霄霄
      真机模拟器都会这样,iOS Android也都会这样
      10-08
      回复
    • 卢霄霄
      卢霄霄
      10-08回复Honge
      不要看wxml里排列的前后顺序,要点获取结果出来的数组的顺序
      10-08
      回复
  • 榴你的莲
    榴你的莲
    09-23

    demo在哪呀,大佬

    09-23
    赞同
    回复
  • 益家人~陈阳
    益家人~陈阳
    01-26

    有做小程序的朋友吗  我做家政的,想找个人做个小程序,希望有朋友联系我


    01-26
    赞同
    回复
  • 益家人~陈阳
    益家人~陈阳
    01-26

    可以帮助开发小程序吗

    01-26
    赞同
    回复
  • 〞总有刁民想害朕
    〞总有刁民想害朕
    2018-12-17

    拖拽不了、、、

    2018-12-17
    赞同
    回复 7
    • 卢霄霄
      卢霄霄
      2018-12-17

      第一次吗?直接点编译,重来一次

      2018-12-17
      回复
    • 〞总有刁民想害朕
      〞总有刁民想害朕
      2018-12-17回复卢霄霄

      好的^_^

      2018-12-17
      回复
    • 卢霄霄
      卢霄霄
      2018-12-17回复〞总有刁民想害朕

      哈哈哈哈 读题要认真啊


      2018-12-17
      回复
    • 〞总有刁民想害朕
      〞总有刁民想害朕
      2018-12-17回复卢霄霄

      请问一下  看到代码里很多this.time,this.step, this.focusTimer..这样的声明?变量 ?在data里或者index.js里都没有看到声明,能直接这样写?和var,let 声明变量一样吗?


      2018-12-17
      回复
    • 卢霄霄
      卢霄霄
      2018-12-17回复〞总有刁民想害朕

      Page({     name: '卢霄霄'

      })

      Page({

          onLoad:function(){

              this.name = "卢霄霄"

          }

      })

      其实差不多,都是定义在page内部的。。就像是给对象新增一个属性,不需要提前定义一样

      2018-12-17
      回复
    查看更多(2)
  • 肆意
    肆意
    2018-12-07

    在开发者工具上测试 只能拖动一次,必须再次编译后才能再拖动

    2018-12-07
    赞同
    回复 1
    • 卢霄霄
      卢霄霄
      2018-12-09

      额。。什么版本的开发者工具呢~ 后面拖不动 有报错吗? 因为拖动的条件,是至少要长按一下哦

      2018-12-09
      回复
  • tanw😏
    tanw😏
    2018-12-07

    牛逼。小程序iOS和安卓下的性能差距真的是很明显。强烈建议官方增加一个原生组件

    2018-12-07
    赞同
    回复 4
    • 卢霄霄
      卢霄霄
      2018-12-07

      从此转果粉。。

      2018-12-07
      回复
    • tanw😏
      tanw😏
      2018-12-07回复卢霄霄

      真的测试起来 安卓机各种问题

      2018-12-07
      回复
    • 卢霄霄
      卢霄霄
      2018-12-07回复tanw😏

      if(安卓机) return

      2018-12-07
      回复
    • tanw😏
      tanw😏
      2018-12-07回复卢霄霄

      hhh

      2018-12-07
      回复

正在加载...