公告列表
公告列表
收藏
评论

微信朋友圈选图效果

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

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

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

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


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


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

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


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

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


附上gif：


最后一次编辑于  2018-10-24
收藏

24 个评论

  • 太阳🌙粑粑
    太阳🌙粑粑
    2019-04-12

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



    2019-04-12
    赞同 1
    回复
  • 鲲
    鲲
    2018-10-23

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

    2018-10-23
    赞同 1
    回复 48
    • 卢霄霄
      卢霄霄
      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
      赞
      回复
    查看更多(43)
  • Q1an
    Q1an
    2020-02-17

    我运行了可一下你的代码片段，在开发工具编译或者手机预览都非常流畅，但是真机调试的时候，长按图片很难聚焦到，也会拖动慢呢，那发布上线会不会也是慢的

    2020-02-17
    赞同
    回复 5
    • 卢霄霄
      卢霄霄
      2020-02-17
      你是真机预览还是真机调试呢
      2020-02-17
      赞
      回复
    • Q1an
      Q1an
      2020-02-17回复卢霄霄
      真机调试哦，预览都是正常的，调试的时候长按要按几次才能拖动，而且拖动动画还是有点慢
      2020-02-17
      赞
      回复
    • Q1an
      Q1an
      2020-02-17回复Q1an
      真的是真机调试机制的问题，我放到线上就不卡了，非常感谢。还有你的代码，拖动图片的时候每次都报这个错呢，虽然不影响功能
      2020-02-17
      赞
      回复
    • 卢霄霄
      卢霄霄
      2020-02-17回复Q1an
      应该是因为image的src没设值的时候 没有wx:if
      2020-02-17
      赞
      回复
    • Q1an
      Q1an
      2020-02-21回复卢霄霄
      你好，方便留个QQ吗？有问题想请你远程指导一下
      2020-02-21
      赞
      回复
  • Honge
    Honge
    2019-10-08

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



    正确顺序是不是应该是：[2，0，1]

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

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

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

    demo在哪呀，大佬

    2019-09-23
    赞同
    回复
  • 陈阳
    陈阳
    2019-01-26

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


    2019-01-26
    赞同
    回复
  • 陈阳
    陈阳
    2019-01-26

    可以帮助开发小程序吗

    2019-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
      赞
      回复

正在加载...

请 登录 后发表内容