關于用戶發布的動態內容模塊展示

在項目中首頁，顏絡社，個人主頁，其他用戶主頁4個頁面都需要展示用戶所發布的動態內容（類似于微信朋友圈內容），故進行封裝。

頁面效果如下：

難點：

a.圖片展示。點擊查看大圖，上滑圖片退出。

主要使用了PhotoSwipe插件。 首先使用npm在項目中安裝photoswipenpm 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' 復制代碼

(小坑：一定要寫入下面的代碼內容)

``` <!-- PhotoSwipe插件需要的元素， 一定要有類名 pswp --> <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"><div class="pswp__bg"></div><div class="pswp__scroll-wrap"><div class="pswp__container"><div class="pswp__item"></div><div class="pswp__item"></div><div class="pswp__item"></div></div><!-- 預覽區域頂部的默認UI，可以修改 --><div class="pswp__ui pswp__ui--hidden"><div class="pswp__top-bar"><!-- 與圖片相關的操作 --><div class="pswp__counter"></div><button class="pswp__button pswp__button--close" title="Close (Esc)"></button><!--將分享按鈕去掉 --><!-- <button class="pswp__button pswp__button--share" title="Share"></button> --><button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button><button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button><div class="pswp__preloader"><div class="pswp__preloader__icn"><div class="pswp__preloader__cut"><div class="pswp__preloader__donut"></div></div></div></div></div><div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"><div class="pswp__share-tooltip"></div></div><button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button><button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button><div class="pswp__caption"><div class="pswp__caption__center"></div></div></div></div> </div> ``` 復制代碼

完成了初期準備工作，現在開始正式使用啦~

<div class="thumbnails my-gallery"><figure v-for="(img, index) in item.tiebaPictureslist" :key="index" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject" class="thumbnail"><a :href="img.ptPic" itemprop="contentUrl" :data-size="img.ptPic | dataSize" v-show="img.ptPic"><img :src="img.ptPic + '?imageView2/5/w/100/h/100'" itemprop="thumbnail" alt="" /></a></figure> </div> 復制代碼

(小坑2：使用photoswipe預覽圖片自己的圖片的數組必須保證有圖片寬高，即利用七牛云圖片處理技術將圖片進行寬高設定)

接下來，就開始給需要點擊放大預覽的圖片進行綁定預覽事件啦~

methods: {initPhotoSwipeFromDOM(gallerySelector) {var parseThumbnailElements = function(el) {var thumbElements = el.childNodes,numNodes = thumbElements.length,items = [],figureEl,linkEl,size,itemfor (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 = figureElitems.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.evente.preventDefault ? e.preventDefault() : e.returnValue = falsevar eTarget = e.target || e.srcElementvar 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,indexfor (var i = 0; i < numChildNodes; i++) {if (childNodes[i].nodeType !== 1) {continue}if (childNodes[i] === clickedListItem) {index = nodeIndexbreak}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,itemsitems = 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 = jbreak}}} 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') } 復制代碼

以上，實現圖片點擊查看，可以左右滑動，向上滑動退出圖片查看。

總結

以上是生活随笔為你收集整理的vue-PhotoSwipe插件填坑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。