vux多组图片预览
2018-08-21 本文已影响0人
爱笑的小白菜
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)
},
}
}
