imagebrowse.wpy

1. <style lang="less">
2. .clear {
3. clear: both;
4. }
5. </style>
6.  
7. <template>
8. <view>
9. <block wx:for="{{imagelistbrowse}}" wx:for-item="image" wx:key="index">
10. <image
11. src="{{image}}"
12. data-src="{{image}}"
13. @tap="previewImage"
14. class="{{imageclass}}">
15. </image>
16. </block>
17. <view class="clear"></view>
18. </view>
19. </template>
20.  
21. <script>
22. /* eslint-disable comma-dangle */
23.  
24. import wepy from 'wepy'
25.  
26. export default class imagebrowse extends wepy.component {
27. props = {
28. imagelistbrowse: {
29. // coerce: function (v) {
30. // console.log('vvvvvvv ' + v)
31. // return v ? [].concat(v) : []
32. // },
33. type: Array,
34. default: [],
35. // twoWay: true
36. },
37. imageclass: ''
38. }
39.  
40. data = {}
41.  
42. events = {}
43.  
44. methods = {
45. previewImage (e) {
46. console.log(e)
47. let current = e.target.dataset.src
48. wx.previewImage({
49. current: current, // 當前顯示圖片的http鏈接
50. urls: this.imagelistbrowse // 需要預(yù)覽的圖片http鏈接列表
51. })
52. }
53. }
54.  
55. onLoad () {
56. console.log('onLoad ' + JSON.stringify(this.imagelistbrowse))
57. }
58.  
59. onShow () {
60. console.log('onShow ' + JSON.stringify(this.imagelistbrowse))
61. }
62. }
63. </script>

使用：

1. <style lang="less">
2. @import "../style/mixin";
3.  
4. .user-img {
5. .wh(75px, 75px);
6. border-radius: 50%;
7. border: 5px solid rgba(215, 215, 215, 0.8);
8. margin-top: 20px;
9. }
10.  
11. </style>
12.  
13. <template>
14. <repeat>
15. <imagebrowse
16. :imageclass="'user-img'"
17. :imagelistbrowse.sync="userPhoto">
18. </imagebrowse>
19. </repeat>
20. </template>
21.  
22. <script>
23. import wepy from 'wepy'
24. import ImageBrowse from '../components/imagebrowse'
25.  
26. export default class homelist extends wepy.page {
27.  
28. ...
29.  
30. components = {
31. imagebrowse: ImageBrowse,
32. }
33.  
34. data = {
35. userPhoto: [], // 注意這邊，因為是為了顯示列表，所以是list
36. }
37.  
38. computed = {}
39.  
40. methods = {
41.  
42. }
43.  
44. events = {}
45.  
46. onLoad () {
47. }
48.  
49. onShow () {
50. this.$parent.getUserInfo(u => {
51. this.userInfo = u
52. this.userPhoto = u.avatarUrl ? [].concat(u.avatarUrl) : []
53. this.$apply()
54. })
55. };
56. }
57. </script>