{"action":"created","issue":{"url":"https://api.github.com/repos/airyland/vux/issues/2530","repository_url":"https://api.github.com/repos/airyland/vux","labels_url":"https://api.github.com/repos/airyland/vux/issues/2530/labels{/name}","comments_url":"https://api.github.com/repos/airyland/vux/issues/2530/comments","events_url":"https://api.github.com/repos/airyland/vux/issues/2530/events","html_url":"https://github.com/airyland/vux/issues/2530","id":304289031,"number":2530,"title":"Previewd多组图片预览，放大及缩小的动画总是从第一组图片的位置开始","user":{"login":"chenheng0910","id":18900304,"avatar_url":"https://avatars1.githubusercontent.com/u/18900304?v=4","gravatar_id":"","url":"https://api.github.com/users/chenheng0910","html_url":"https://github.com/chenheng0910","followers_url":"https://api.github.com/users/chenheng0910/followers","following_url":"https://api.github.com/users/chenheng0910/following{/other_user}","gists_url":"https://api.github.com/users/chenheng0910/gists{/gist_id}","starred_url":"https://api.github.com/users/chenheng0910/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/chenheng0910/subscriptions","organizations_url":"https://api.github.com/users/chenheng0910/orgs","repos_url":"https://api.github.com/users/chenheng0910/repos","events_url":"https://api.github.com/users/chenheng0910/events{/privacy}","received_events_url":"https://api.github.com/users/chenheng0910/received_events","type":"User","site_admin":false},"labels":[{"id":515210328,"url":"https://api.github.com/repos/airyland/vux/labels/component/previewer","name":"component/previewer","color":"0e8a16","default":false}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":8,"created_at":"2018-03-12T09:09:48Z","updated_at":"2018-05-11T03:29:52Z","closed_at":"2018-03-12T10:08:26Z","author_association":"NONE","body":"```javascript\r\n<template>\r\n   <div class=\"imgList\">\r\n        <ul>\r\n          <li class=\"first-item\" v-for=\"(items, index) in information.container.imgList\" v-bind:class=\"{ onePic: isOne }\">\r\n            <img class=\"previewer-demo-img\" :src=\"items.src\" alt=\"\" @click=\"show(index)\">\r\n          </li>\r\n        </ul>\r\n        <div v-transfer-dom>\r\n          <previewer ref=\"previewer\" :list=\"information.container.imgList\" :options=\"options\"></previewer>\r\n        </div>\r\n      </div>\r\n</template>\r\n\r\n<script>\r\n  import {Previewer, TransferDom} from 'vux'\r\n\r\n  export default {\r\n    directives: {\r\n      TransferDom\r\n    },\r\n    components: {\r\n      Previewer\r\n    },\r\n    methods: {\r\n      show (index) {\r\n        this.$refs.previewer.show(index)\r\n      }\r\n    },\r\n    data() {\r\n      return {\r\n        options: {\r\n          getThumbBoundsFn (index) {\r\n            // find thumbnail element\r\n            let thumbnail = document.querySelectorAll('.previewer-demo-img')[index];\r\n            // get window scroll Y\r\n            let pageYScroll = window.pageYOffset || document.documentElement.scrollTop;\r\n            // optionally get horizontal scroll\r\n            // get position of element relative to viewport\r\n            let rect = thumbnail.getBoundingClientRect();\r\n            // w = width\r\n            return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}\r\n            // Good guide on how to get element coordinates:\r\n            // http://javascript.info/tutorial/coordinates\r\n          }\r\n        }\r\n        }\r\n      }\r\n    }\r\n  }\r\n</script>\r\n```\r\n-------------\r\n由于页面的整体布局限制，这里的 ‘information’ 是一个Object，所以不能传index进来， 拜托@airyland 帮忙看一下"},"comment":{"url":"https://api.github.com/repos/airyland/vux/issues/comments/388249507","html_url":"https://github.com/airyland/vux/issues/2530#issuecomment-388249507","issue_url":"https://api.github.com/repos/airyland/vux/issues/2530","id":388249507,"user":{"login":"jerryli519","id":22862720,"avatar_url":"https://avatars0.githubusercontent.com/u/22862720?v=4","gravatar_id":"","url":"https://api.github.com/users/jerryli519","html_url":"https://github.com/jerryli519","followers_url":"https://api.github.com/users/jerryli519/followers","following_url":"https://api.github.com/users/jerryli519/following{/other_user}","gists_url":"https://api.github.com/users/jerryli519/gists{/gist_id}","starred_url":"https://api.github.com/users/jerryli519/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jerryli519/subscriptions","organizations_url":"https://api.github.com/users/jerryli519/orgs","repos_url":"https://api.github.com/users/jerryli519/repos","events_url":"https://api.github.com/users/jerryli519/events{/privacy}","received_events_url":"https://api.github.com/users/jerryli519/received_events","type":"User","site_admin":false},"created_at":"2018-05-11T03:29:52Z","updated_at":"2018-05-11T03:29:52Z","author_association":"NONE","body":"```\r\n      <!-- 图片 -->\r\n      <div class=\"m-pics\">\r\n        <div class=\"pic-wrapper\" v-for=\"(i,index) in item.DynamicAlbumList\">\r\n            <!-- <img v-gallery=\"item.Id\" :src=\"i.FileCode\" alt=\"\"> -->\r\n             <img class=\"previewer-demo-img\" :src=\"i.FileCode\"  @click=\"show(index)\">\r\n        </div>\r\n        <div v-transfer-dom>\r\n          <previewer :list=\"item.DynamicAlbumList\" ref=\"previewer\" :options=\"options(ind)\" ></previewer>\r\n        </div>\r\n      </div>\r\nimport { Previewer, TransferDom } from 'vux'\r\n  export default {\r\n    name: 'DnamicMoments',\r\n    directives: {\r\n      TransferDom\r\n    },\r\n    components: {\r\n      Previewer\r\n    },\r\n    data () {\r\n      return {\r\n        momentsList: [//实时动态\r\n            {\r\n                DynamicAlbumList: [\r\n                  {\r\n                    DynamicId: 17630,\r\n                    FileCode: \"https://attachment.met365.com/activity/o_1c3vnv94a1o9d9rp1cjn1fof3sbb.jpg?Expires=1556351948&OSSAccessKeyId=mzjdvqt60KqNK6Xh&Signature=POqm%2FDP%2BOvH0IjQJS5K1GIMM0Z8%3D&x-oss-process=style%2Factivity-large\",\r\n                    Id: 16251,\r\n                    OriginalFileCode: \"https://attachment.met365.com/activity/o_1cc08odlh12cl1s24d42j7s1f9cb.jpg?Expires=1556351947&OSSAccessKeyId=mzjdvqt60KqNK6Xh&Signature=CrcTlyoEM8MCLCgFZfxI%2BBxB1JI%3D\",\r\n                  },\r\n                ]\r\n            },\r\n            {\r\n                DynamicAlbumList: [\r\n                  {\r\n                    DynamicId: 17630,\r\n                    FileCode: \"https://attachment.met365.com/activity/o_1cc08odlh12cl1s24d42j7s1f9cb.jpg?Expires=1556351947&OSSAccessKeyId=mzjdvqt60KqNK6Xh&Signature=Dbdl%2BVSuagUhs5%2Brtu1vbadxW5Q%3D&x-oss-process=style%2Factivity-large\",\r\n                    Id: 16251,\r\n                    OriginalFileCode: \"https://attachment.met365.com/activity/o_1cc08odlh12cl1s24d42j7s1f9cb.jpg?Expires=1556351947&OSSAccessKeyId=mzjdvqt60KqNK6Xh&Signature=CrcTlyoEM8MCLCgFZfxI%2BBxB1JI%3D\",\r\n                  },\r\n                  {\r\n                    DynamicId: 17630,\r\n                    FileCode: \"https://attachment.met365.com/activity/o_1cc08ojf182d10gf1uuk6e7cl7g.jpg?Expires=1556351948&OSSAccessKeyId=mzjdvqt60KqNK6Xh&Signature=gdJQUXaSnLXyOJOsqnhs3ZXd9Dc%3D&x-oss-process=style%2Factivity-large\",\r\n                    Id: 16251,\r\n                    OriginalFileCode: \"https://attachment.met365.com/activity/o_1cc08ojf182d10gf1uuk6e7cl7g.jpg?Expires=1556351948&OSSAccessKeyId=mzjdvqt60KqNK6Xh&Signature=JBKOJECAQob5iIXzFanYVLMTWYs%3D\",\r\n                  }\r\n                ],\r\n            },\r\n            {\r\n                DynamicAlbumList: [\r\n                  {\r\n                    DynamicId: 17630,\r\n                    FileCode: \"https://attachment.met365.com/activity/o_1cc08odlh12cl1s24d42j7s1f9cb.jpg?Expires=1556351947&OSSAccessKeyId=mzjdvqt60KqNK6Xh&Signature=Dbdl%2BVSuagUhs5%2Brtu1vbadxW5Q%3D&x-oss-process=style%2Factivity-large\",\r\n                    Id: 16251,\r\n                    OriginalFileCode: \"https://attachment.met365.com/activity/o_1cc08odlh12cl1s24d42j7s1f9cb.jpg?Expires=1556351947&OSSAccessKeyId=mzjdvqt60KqNK6Xh&Signature=CrcTlyoEM8MCLCgFZfxI%2BBxB1JI%3D\",\r\n                  },\r\n                  {\r\n                    DynamicId: 17630,\r\n                    FileCode: \"https://attachment.met365.com/activity/o_1c711nit8q4e3o11km54861v82b.jpg?Expires=1556351948&OSSAccessKeyId=mzjdvqt60KqNK6Xh&Signature=eaQ06SjNwxGnGDqny3ua5UCS%2F%2B4%3D&x-oss-process=style%2Factivity-large\",\r\n                    Id: 16251,\r\n                    OriginalFileCode: \"https://attachment.met365.com/activity/o_1cc08ojf182d10gf1uuk6e7cl7g.jpg?Expires=1556351948&OSSAccessKeyId=mzjdvqt60KqNK6Xh&Signature=JBKOJECAQob5iIXzFanYVLMTWYs%3D\",\r\n                  },\r\n                  {\r\n                    DynamicId: 17630,\r\n                    FileCode: \"https://attachment.met365.com/activity/o_1c711nit8q4e3o11km54861v82b.jpg?Expires=1556351948&OSSAccessKeyId=mzjdvqt60KqNK6Xh&Signature=eaQ06SjNwxGnGDqny3ua5UCS%2F%2B4%3D&x-oss-process=style%2Factivity-large\",\r\n                    Id: 16251,\r\n                    OriginalFileCode: \"https://attachment.met365.com/activity/o_1cc08odlh12cl1s24d42j7s1f9cb.jpg?Expires=1556351947&OSSAccessKeyId=mzjdvqt60KqNK6Xh&Signature=CrcTlyoEM8MCLCgFZfxI%2BBxB1JI%3D\",\r\n                  },\r\n                  {\r\n                    DynamicId: 17630,\r\n                    FileCode: \"https://attachment.met365.com/activity/o_1c711nit8q4e3o11km54861v82b.jpg?Expires=1556351948&OSSAccessKeyId=mzjdvqt60KqNK6Xh&Signature=eaQ06SjNwxGnGDqny3ua5UCS%2F%2B4%3D&x-oss-process=style%2Factivity-large\",\r\n                    Id: 16251,\r\n                    OriginalFileCode: \"https://attachment.met365.com/activity/o_1cc08ojf182d10gf1uuk6e7cl7g.jpg?Expires=1556351948&OSSAccessKeyId=mzjdvqt60KqNK6Xh&Signature=JBKOJECAQob5iIXzFanYVLMTWYs%3D\",\r\n                  }\r\n                ],\r\n            },\r\n        ], \r\n        myMomentsList: [], //我的动态\r\n      }\r\n    },\r\n    created(){\r\n      //插入(评论展示状态)字段\r\n      this.momentsList.forEach((v,k)=>{\r\n       this.momentsList[k].showComment = false\r\n      })\r\n      console.log(this.momentsList)\r\n  \r\n    },\r\n    methods: {\r\n       options (ind) {\r\n        let that = this;\r\n        return {\r\n          getThumbBoundsFn (index) {\r\n            // find thumbnail element\r\n             let thumbnail = that.$el.querySelectorAll('.previewer-demo-img')[index];\r\n            // get window scroll Y\r\n            let pageYScroll = window.pageYOffset || document.documentElement.scrollTop;\r\n            // optionally get horizontal scroll\r\n            // get position of element relative to viewport\r\n            let rect = thumbnail.getBoundingClientRect();\r\n            // w = width\r\n            return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}\r\n            // Good guide on how to get element coordinates:\r\n            // http://javascript.info/tutorial/coordinates\r\n          }\r\n        }\r\n      },\r\n      show (index) {\r\n        console.log(this.$refs.previewer)\r\n        this.$refs.previewer.show(index)\r\n      },\r\n      //评论\r\n      toggleComment(item){\r\n        item.showComment = !item.showComment;\r\n        let list = this.momentsList;\r\n        this.momentsList = Object.assign([], list);\r\n        console.log(this.momentsList)\r\n        console.log(item.showComment)\r\n      },\r\n      //点赞\r\n      toggleFavorite(item){\r\n        item.IsLike = !item.IsLike;\r\n        if(item.IsLike){\r\n          item.LikeTimes++;\r\n        }else{\r\n          item.LikeTimes--;\r\n        }\r\n      }\r\n    }\r\n  }\r\n</script>\r\n```\r\n求救~~~试了一天了 没啥效果。如果写死的话是可以实现一个previewr对应一个options。但是如果是循环该怎么实现呢。类似微信朋友圈图片那种效果。。"}}
{"actor":{"display_login":"jerryli519"}}