关于用户发布的动态内容模块展示
在项目中首页，颜络社，个人主页，其他用户主页4个页面都需要展示用户所发布的动态内容（类似于微信朋友圈内容），故进行封装。
页面效果如下：
难点：
a.图片展示。点击查看大图，上滑图片退出。
主要使用了PhotoSwipe插件。首先使用npm在项目中安装photoswipe npm install photoswipe安装成功后，在对应的.vue文件中引入： import PhotoSwipe from 'photoswipe' import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default' import 'photoswipe/dist/photoswipe.css' import 'photoswipe/dist/default-skin/default-skin.css'复制代码
(小坑：一定要写入下面的代码内容)
``` ```复制代码
完成了初期准备工作，现在开始正式使用啦~
复制代码![]()
(小坑2：使用photoswipe预览图片自己的图片的数组必须保证有图片宽高，即利用将图片进行宽高设定)
接下来，就开始给需要点击放大预览的图片进行绑定预览事件啦~
methods: { initPhotoSwipeFromDOM(gallerySelector) { var parseThumbnailElements = function(el) { var thumbElements = el.childNodes, numNodes = thumbElements.length, items = [], figureEl, linkEl, size, item for (var i = 0; i < numNodes; i++) { figureEl = thumbElements[i]; if (figureEl.nodeType !== 1) { continue } linkEl = figureEl.children[0]; size = linkEl.getAttribute('data-size').split('x') item = { src: linkEl.getAttribute('href'), w: parseInt(size[0], 10), h: parseInt(size[1], 10) }; if (figureEl.children.length > 1) { item.title = figureEl.children[1].innerHTML } if (linkEl.children.length > 0) { item.msrc = linkEl.children[0].getAttribute('src') } item.el = figureEl items.push(item) } return items } var closest = function closest(el, fn) { return el && (fn(el) ? el : closest(el.parentNode, fn)) } var onThumbnailsClick = function(e) { e = e || window.event e.preventDefault ? e.preventDefault() : e.returnValue = false var eTarget = e.target || e.srcElement var clickedListItem = closest(eTarget, function(el) { return (el.tagName && el.tagName.toUpperCase() === 'FIGURE') }); if (!clickedListItem) { return; } var clickedGallery = clickedListItem.parentNode, childNodes = clickedListItem.parentNode.childNodes, numChildNodes = childNodes.length, nodeIndex = 0, index for (var i = 0; i < numChildNodes; i++) { if (childNodes[i].nodeType !== 1) { continue } if (childNodes[i] === clickedListItem) { index = nodeIndex break } nodeIndex++ } if (index >= 0) { openPhotoSwipe(index, clickedGallery) } return false; } var photoswipeParseHash = function() { var hash = window.location.hash.substring(1), params = {} if (hash.length < 5) { return params; } var vars = hash.split('&'); for (var i = 0; i < vars.length; i++) { if (!vars[i]) { continue } var pair = vars[i].split('='); if (pair.length < 2) { continue } params[pair[0]] = pair[1]; } if (params.gid) { params.gid = parseInt(params.gid, 10) } return params } var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) { var pswpElement = document.querySelectorAll('.pswp')[0], gallery, options, items items = parseThumbnailElements(galleryElement); options = { history: false, galleryUID: galleryElement.getAttribute('data-pswp-uid'), getThumbBoundsFn: function(index) { var thumbnail = items[index].el.getElementsByTagName('img')[0], pageYScroll = window.pageYOffset || document.documentElement.scrollTop, rect = thumbnail.getBoundingClientRect() return { x: rect.left, y: rect.top + pageYScroll, w: rect.width } } } if (fromURL) { if (options.galleryPIDs) { for (var j = 0; j < items.length; j++) { if (items[j].pid == index) { options.index = j break } } } else { options.index = parseInt(index, 10) - 1 } } else { options.index = parseInt(index, 10) } if (isNaN(options.index)) { return '' } if (disableAnimation) { options.showAnimationDuration = 0 } gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options) gallery.init() } var galleryElements = document.querySelectorAll(gallerySelector) for (var i = 0, l = galleryElements.length; i < l; i++) { galleryElements[i].setAttribute('data-pswp-uid', i + 1) galleryElements[i].onclick = onThumbnailsClick } var hashData = photoswipeParseHash() if (hashData.pid && hashData.gid) { openPhotoSwipe(hashData.pid, galleryElements[hashData.gid - 1], true, true) } }},updated() { this.initPhotoSwipeFromDOM('.my-gallery')}复制代码 以上，实现图片点击查看，可以左右滑动，向上滑动退出图片查看。