captain-ui/es/tpl-guide-page/src/main.js

有赞vue wap业务组件库

var CARD_WIDTH = 86;
export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('div', {
      staticClass: "full-page"
    }, [_c('div', {
      staticClass: "base-tpl",
      style: {
        backgroundImage: "url(" + _vm.pageConfig.bgImage + ")"
      }
    }, [_vm.pageType !== 'fbb' ? _c('div', [_c('div', {
      staticClass: "base-tpl__title",
      style: {
        color: _vm.pageConfig.shopTitleColor
      }
    }, [_vm._v("\n        " + _vm._s(_vm.pageConfig.shopTitle) + "\n      ")]), _c('div', {
      staticClass: "base-tpl__subtitle",
      style: {
        color: _vm.pageConfig.shopSubTitleColor
      }
    }, [_vm._v("\n        " + _vm._s(_vm.pageConfig.shopSubTitle) + "\n      ")]), _c('div', {
      staticClass: "base-tpl__button",
      style: {
        top: _vm.pageConfig.buttonTopOffset
      }
    }, [_c('a', {
      attrs: {
        "href": ""
      }
    }, [_vm._v(_vm._s(_vm.pageConfig.buttonText))])])]) : _vm._e(), _c('div', {
      class: ['base-tpl__nav-lists', {
        'tpl-fbb': _vm.pageType === 'fbb'
      }]
    }, [_c('ul', {
      directives: [{
        name: "swipe",
        rawName: "v-swipe"
      }],
      staticClass: "clearfix"
    }, _vm._l(_vm.navigationLinks, function (link, index) {
      return _c('li', {
        key: index,
        class: ['base-tpl__nav-wrapper', {
          'base-tpl__nav-wrapper_active': _vm.actived
        }],
        style: {
          backgroundImage: "url(" + link.bgImage + ")",
          transitionDelay: (index + 1) * 0.16 + "s"
        }
      }, [_c('a', {
        staticClass: "base-tpl__nav",
        attrs: {
          "href": link.link
        }
      }, [_c('span', {
        staticClass: "base-tpl__nav-title"
      }, [_vm._v(_vm._s(link.title))]), _c('span', {
        staticClass: "base-tpl__nav-line"
      }), link.iconSrc ? _c('img', {
        staticClass: "base-tpl__nav-icon",
        attrs: {
          "src": link.iconSrc,
          "alt": link.title
        }
      }) : _vm._e(), _vm.pageType === 'fbb' ? _c('div', {
        staticClass: "tpl-fbb__desc"
      }, [_c('div', {
        staticClass: "base-tpl__item-text"
      }, [_vm._v(" " + _vm._s(link.shortDesc))]), _c('div', {
        staticClass: "base-tpl__item-date"
      }, [_vm._v(_vm._s(link.date))])]) : _vm._e()])]);
    }), 0)])])]);
  },
  name: 'tpl-guide-page',
  directives: {
    swipe: {
      inserted: function inserted(el) {
        var clientWidth = window.innerWidth; // 向右滑动的边界

        var maxLimit = clientWidth - CARD_WIDTH * el.getElementsByClassName('base-tpl__nav-wrapper').length;
        var touchBegin;
        var touchMove;
        var gap = 0;
        var lastPosition = 0;
        el.addEventListener('touchstart', function (e) {
          touchBegin = e.changedTouches[0].pageX;
          el.style.transitionDuration = '0s';
        });
        el.addEventListener('touchmove', function (e) {
          touchMove = e.changedTouches[0].pageX; // 负值左移，正值右移

          gap = touchMove - touchBegin;
          el.style.transform = "translate3d(" + (lastPosition + gap) + "px, 0, 0)";
        });
        el.addEventListener('touchend', function (e) {
          lastPosition += gap;

          if (lastPosition > 0) {
            // 已经超过左边尽头了
            lastPosition = 0;
          } else if (lastPosition < maxLimit) {
            // 已经超过右边尽头了
            lastPosition = maxLimit;
          } else {
            // 在中间，则通过偏移量来判断该滑向哪一个卡片
            lastPosition = -Math.round(Math.abs(lastPosition) / CARD_WIDTH) * CARD_WIDTH;
          }

          el.style.transitionDuration = '0.3s';
          el.style.transform = "translate3d(" + lastPosition + "px, 0, 0)";
        });
      }
    }
  },
  props: {
    pageType: String,
    pageConfig: Object,
    navigationLinks: Array
  },
  data: function data() {
    return {
      actived: false
    };
  },
  mounted: function mounted() {
    var _this = this;

    // 背景图片加载完成后改变状态，动画
    var bg = new Image();
    bg.src = this.pageConfig.bgImage;

    bg.onload = function () {
      if (bg.complete) {
        _this.actived = true;
      }
    };
  }
};