Component({ options: { addGlobalClass: true, pureDataPattern: /^_/ }, properties: { duration: { type: Number, value: 500 }, easingFunction: { type: String, value: 'default' }, loop: { type: Boolean, value: true }, videoList: { type: Array, value: [], observer: function observer() { var newVal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
this._videoListChanged(newVal); } } }, data: { nextQueue: [], prevQueue: [], curQueue: [], circular: false, _last: 1, _change: -1, _invalidUp: 0, _invalidDown: 0, _videoContexts: [], list:[ { imgUrl:"../../static/index/tv@2x.png", title:"看直播" }, { imgUrl:"../../static/index/收藏 (1)@2x.png", title:"收藏" }, { imgUrl:"../../static/index/pinglun@2x.png", title:"客服" }, { imgUrl:"../../static/index/分享@2x.png", title:"分享" } ], // 遮罩层是否显示 show:"none", // 商品预订单 shopOrder:[ { size:"S", price:"108.20" },{ size:"M", price:108.20 }
] }, lifetimes: { attached: function attached() { this.data._videoContexts = [wx.createVideoContext('video_0', this), wx.createVideoContext('video_1', this), wx.createVideoContext('video_2', this)]; } }, methods: { _videoListChanged: function _videoListChanged(newVal) { var _this = this;
var data = this.data; newVal.forEach(function (item) { data.nextQueue.push(item); }); if (data.curQueue.length === 0) { this.setData({ curQueue: data.nextQueue.splice(0, 3) }, function () { _this.playCurrent(1); }); } }, animationfinish: function animationfinish(e) { var _data = this.data, _last = _data._last, _change = _data._change, curQueue = _data.curQueue, prevQueue = _data.prevQueue, nextQueue = _data.nextQueue;
var current = e.detail.current; var diff = current - _last; if (diff === 0) return; this.data._last = current; this.playCurrent(current); this.triggerEvent('change', { activeId: curQueue[current].id }); var direction = diff === 1 || diff === -2 ? 'up' : 'down'; if (direction === 'up') { if (this.data._invalidDown === 0) { var change = (_change + 1) % 3; var add = nextQueue.shift(); var remove = curQueue[change]; if (add) { prevQueue.push(remove); curQueue[change] = add; this.data._change = change; } else { this.data._invalidUp += 1; } } else { this.data._invalidDown -= 1; } } if (direction === 'down') { if (this.data._invalidUp === 0) { var _change2 = _change; var _remove = curQueue[_change2]; var _add = prevQueue.pop(); if (_add) { curQueue[_change2] = _add; nextQueue.unshift(_remove); this.data._change = (_change2 - 1 + 3) % 3; } else { this.data._invalidDown += 1; } } else { this.data._invalidUp -= 1; } } var circular = true; if (nextQueue.length === 0 && current !== 0) { circular = false; } if (prevQueue.length === 0 && current !== 2) { circular = false; } this.setData({ curQueue: curQueue, circular: circular }); }, playCurrent: function playCurrent(current) { this.data._videoContexts.forEach(function (ctx, index) { index !== current ? ctx.pause() : ctx.play(); }); }, onPlay: function onPlay(e) { this.trigger(e, 'play'); }, onPause: function onPause(e) { this.trigger(e, 'pause'); }, onEnded: function onEnded(e) { this.trigger(e, 'ended'); }, onError: function onError(e) { this.trigger(e, 'error'); }, onTimeUpdate: function onTimeUpdate(e) { this.trigger(e, 'timeupdate'); }, onWaiting: function onWaiting(e) { this.trigger(e, 'wait'); }, onProgress: function onProgress(e) { this.trigger(e, 'progress'); }, onLoadedMetaData: function onLoadedMetaData(e) { this.trigger(e, 'loadedmetadata'); }, trigger: function trigger(e, type) { var ext = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var detail = e.detail; var activeId = e.target.dataset.id; this.triggerEvent(type, Object.assign(Object.assign(Object.assign({}, detail), { activeId: activeId }), ext)); },
showPopup (){ const _self = this; console.log(2222); let animation = wx.createAnimation({ duration: 500, timingFunction: 'ease', }); animation.translateY(-554).step() this.setData({ ani: animation.export(), },function (){ _self.setData({ show:"block" });
})
},
onClose (){ const _self = this; let animation = wx.createAnimation({ duration: 500, timingFunction: 'ease', }); animation.translateY(555).step() this.setData({ ani: animation.export(), },function (){ _self.setData({ show:"none" }); })
}
}});