vux多组图片预览

import { Flexbox, FlexboxItem, XImg, Search, Divider, Scroller, Cell, Group, XInput, XButton, Previewer, TransferDom } from 'vux' export default { directives: { TransferDom }, data() { return { options3: { getThumbBoundsFn(index) { // find thumbnail element let thumbnail = document.querySelectorAll('.abc')[index] // get window scroll Y let pageYScroll = window.pageYOffset || document.documentElement.scrollTop // optionally get horizontal scroll // get position of element relative to viewport let rect = thumbnail.getBoundingClientRect() // w = width return { x: rect.left, y: rect.top + pageYScroll, w: rect.width } } }, options2: { getThumbBoundsFn(index) { // find thumbnail element let thumbnail = document.querySelectorAll('.previewer-demo-img')[index] // get window scroll Y let pageYScroll = window.pageYOffset || document.documentElement.scrollTop // optionally get horizontal scroll // get position of element relative to viewport let rect = thumbnail.getBoundingClientRect() // w = width return { x: rect.left, y: rect.top + pageYScroll, w: rect.width } } }, items: [{ name: 'aaaa', options: { getThumbBoundsFn(index) { // find thumbnail element let thumbnail = document.querySelectorAll('.aaaa')[index] // get window scroll Y let pageYScroll = window.pageYOffset || document.documentElement.scrollTop // optionally get horizontal scroll // get position of element relative to viewport let rect = thumbnail.getBoundingClientRect() // w = width return { x: rect.left, y: rect.top + pageYScroll, w: rect.width } // Good guide on how to get element coordinates: // http://javascript.info/tutorial/coordinates } } }, { name: 'bbbbb', options: { getThumbBoundsFn(index) { // find thumbnail element let thumbnail = document.querySelectorAll('.bbbbb')[index] // get window scroll Y let pageYScroll = window.pageYOffset || document.documentElement.scrollTop // optionally get horizontal scroll // get position of element relative to viewport let rect = thumbnail.getBoundingClientRect() // w = width return { x: rect.left, y: rect.top + pageYScroll, w: rect.width } // Good guide on how to get element coordinates: // http://javascript.info/tutorial/coordinates } } }], list: [{ src: 'https://ooo.0o0.ooo/2017/05/17/591c271ab71b1.jpg' }, { src: 'https://ooo.0o0.ooo/2017/05/17/591c271acea7c.jpg' }, { src: 'https://ooo.0o0.ooo/2017/06/15/59425a592b949.jpeg' } ] } }, components: { Flexbox, FlexboxItem, XImg, Search, Divider, Scroller, Cell, Group, XInput, XButton, Previewer }, methods: { show(index, i) { this.$refs.previewer[i].show(index) }, show2(index) { this.$refs.previewer2.show(index) }, show3(index) { this.$refs.previewer3.show(index) }, } }