SlyZone.vue 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. <template>
  2. <view class="zone-box" :style="$getStyle(styles.boxStyle)">
  3. <view id="zone-box" :style="{'gap': attrs.gap + 'rpx'}">
  4. <template v-for="(item , index) in attrs.quantity">
  5. <view class="zone-item" :style="{'width':zoneItemWidth,
  6. ...$getStyle(styles.goodsItem) }">
  7. <view class="image-box">
  8. <image :style="$getStyle(styles.goodsImage)" :src="img" :mode="attrs.mode"></image>
  9. </view>
  10. </view>
  11. </template>
  12. </view>
  13. </view>
  14. </template>
  15. <script>
  16. import Mixin from "../Mixin";
  17. export default {
  18. name: 'SlyZone',
  19. mixins: [Mixin],
  20. data() {
  21. return {
  22. zoneItemWidth: 0,
  23. img: 'http://songhe-cdn.oss-cn-shenzhen.aliyuncs.com/songhe/20230627/ba9db0f24f1341358d94535314ad6227.png'
  24. }
  25. },
  26. methods: {
  27. getWidth(attrs) {
  28. const {
  29. rowNum,
  30. gap
  31. } = attrs;
  32. let n = 0
  33. this.$nextTick(() => {
  34. const query = uni.createSelectorQuery();
  35. query.select('#zone-box').fields({
  36. //指定要获取的属性,这里设置为size: true表示要获取尺寸信息。
  37. size: true,
  38. //在回调函数(res) => {...}中处理查询结果。回调函数会接收一个res参数,其中包含了查询的结果信息。
  39. }, (res) => {
  40. // 在回调函数中,通过res.width和res.height获取到查询元素的宽度和高度。
  41. if (res) {
  42. const width = res.width;
  43. const height = res.height;
  44. const gap_rpx = uni.upx2px(gap)
  45. if (rowNum) {
  46. n = (width - ((rowNum - 1) * gap_rpx)) / rowNum
  47. }
  48. }
  49. this.zoneItemWidth = n ? `${n}px` : `100%`;
  50. }).exec();
  51. })
  52. }
  53. },
  54. watch: {
  55. attrs: {
  56. handler() {
  57. this.getWidth(this.attrs)
  58. },
  59. immediate: true
  60. }
  61. }
  62. }
  63. </script>
  64. <style lang="scss" scoped>
  65. .zone-box {
  66. width: 100%;
  67. #zone-box {
  68. width: 100%;
  69. display: flex;
  70. flex-direction: row;
  71. flex-wrap: wrap;
  72. align-items: stretch;
  73. }
  74. .zone-item {
  75. // flex: 1;
  76. flex-shrink: 0;
  77. overflow: hidden;
  78. .image-box {
  79. width: 100%;
  80. line-height: 0;
  81. image {
  82. width: 100%;
  83. }
  84. }
  85. }
  86. }
  87. </style>