img-three.vue 976 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <template>
  2. <view class="img-box">
  3. <view class="img-item" v-for="(fileItem,fileIndex) in fileList">
  4. <image :src="fileItem" @click="previewImage(fileIndex)" mode="aspectFill"></image>
  5. </view>
  6. </view>
  7. </template>
  8. <script>
  9. export default {
  10. name: "img-three",
  11. components: {},
  12. props: {
  13. fileList:{
  14. default:[]
  15. }
  16. },
  17. data() {
  18. return {}
  19. },
  20. watch: {},
  21. mounted() {
  22. },
  23. methods: {
  24. previewImage(index){
  25. return;
  26. uni.previewImage({
  27. urls: this.fileList,
  28. current:index
  29. });
  30. }
  31. }
  32. }
  33. </script>
  34. <style scoped lang="scss">
  35. .img-box{
  36. height: auto;
  37. display: flex;
  38. flex-wrap: wrap;
  39. .img-item{
  40. display: inline-block;
  41. margin-right:12rpx;
  42. image{
  43. width: calc((100vw - 214rpx)/3);
  44. height: calc((100vw - 214rpx)/3);
  45. border-radius: 16rpx;
  46. }
  47. }
  48. .img-item:nth-of-type(3n+0){
  49. margin-right:0;
  50. }
  51. .img-item:nth-of-type(n+4){
  52. margin-top:10rpx;
  53. }
  54. }
  55. </style>