实现App Store的精选推荐列表的手触交互

在产品交互领域,Apple旗下的各类应用可以说很优秀了,今天我给大家带来的代码片段是在小程序上实现App Store精选推荐列表的手触交互

先来看下交互效果是怎样的

分解一下效果:

  • 手指触摸到列表块时,列表块有收缩的效果;
  • 手指点按时,跳转到内页;
  • 手指点按但移动时,列表块恢复到原始大小。

这时我们要考虑使用小程序的touchstart、touchmove、touchend三者的用法

touchstart: function(e) {
      var self = this,
        key = e.currentTarget.dataset.key,
        posts = self.data.posts;

      posts.forEach((v, i, array) => {
        v.app_celltouch = '0';
        if (i == key) {
          v.app_celltouch = '1';
        }
      })
      self.setData({
        posts: self.data.posts,
      })
    },

    touchmove: function(e) {
      var self = this,
        key = e.currentTarget.dataset.key,
        posts = self.data.posts;
      setTimeout(function() {
        posts.forEach((v, i, array) => {
          v.app_celltouch = '0';
        })
        self.setData({
          posts: self.data.posts,
        })
      }, 100);

    },

    touchend: function(e) {
      var self = this,
        key = e.currentTarget.dataset.key,
        posts = self.data.posts;
      posts.forEach((v, i, array) => {
        v.app_celltouch = '0';
      })
      self.setData({
        posts: self.data.posts,
      })
    },

废话不多说,老样子直接上代码片段,导入到微信开发工具中直接体验效果,有任何问题在下面留言。感觉不错给一个赞。