wxlitian/miniprogram/components/pallax/pallax.wxml

<view class="floatcontainer" arr="{{arr}}" change:arr="{{go.initArr}}">
  <block wx:for="{{arr}}" wx:for-item="nitem" wx:for-index="ndx" wx:key="ndx">
    <view class="floatgroup group{{ndx}}">
      <t-image src="{{oitem}}" mode="widthFix" t-class="nitempic nitempic{{odx}}" wx:for="{{nitem}}" wx:for-item="oitem" wx:for-index="odx" wx:key="odx" class="nitempicwrap" />
    </view>
  </block>
</view>


<wxs module="go">
  var hasStart = false
  var dir = -1;
  var speed = 280;

  var initArr = function (newVal, oldVal, ownerInstance) {
    if (newVal.length > 0 && !hasStart) {
      hasStart = true;
      var startTime = getDate();

      var items = ownerInstance.selectAllComponents(".floatgroup");
      var ctn = ownerInstance.getBoundingClientRect().width;
      dir = -1
      items.map(function (item) {
        item.left = 0;
      })


      function step(timestamp) {
        var nowTime = getDate();
        if (nowTime - startTime > 20) {
          startTime = nowTime;

          for (var i = 0; i < items.length; i++) {
            var item = items[i];
            var movable = item.getBoundingClientRect().width - ctn;
            var trans = 0;

            if (dir > 0) {
              item.left = Math.max(0, item.left - movable / speed)
              trans = Math.round(-item.left)
              if (item.left <= 0) {
                dir = -1
                item.left = 0
              }
            } else {
              item.left = Math.min(movable, item.left + movable / speed)
              trans = Math.round(-item.left)

              if (item.left >= movable) {
                dir = 1
                item.left = movable
              }
            }
            var transform = 'translate3d(' + trans + 'px, 0, 0)'
            var transition = 'transform .6s cubic-bezier(0.18, 0.89, 0.32, 1)'
            item.setStyle({
              '-webkit-transform': transform,
              '-webkit-transition': transition,
              'transform': transform,
              'transition': transition
            })
          }
        }
        ownerInstance.requestAnimationFrame(step);
      };
      ownerInstance.requestAnimationFrame(step);
    }
  }

  module.exports = {
    initArr: initArr
  };
</wxs>