app-AgricultureSmart/uniapp/components/my-grid/my-grid.vue

<template>
  <view>


    <van-grid column-num="2" :gutter="10">

      <van-grid-item v-for="(item,idx) in shops" icon="photo-o" @click="nevigateToDetail(item)" :text="item.text" :key="idx" :use-slot="true">
        <slot name="icon">
<!--          <van-icon name="chat" color="red"></van-icon>-->
          <image :src="item.imgUrl" class="itemImg"></image>
<!--          <van-image></van-image>-->
        </slot>
        <slot name="text" :item="item">
<!--        <view v-if="idx%2" style="background-color: red">去摸鱼儿Isaac查看啊啊啊啊</view>-->
<!--          <view style="font-weight: bold;font-size: 20px">{{ item.name | truncate(15)}}123</view>-->
          <view>{{ item.shopInfo | truncate(15)}}</view>
        </slot>

      </van-grid-item>
    </van-grid>
<!--    123-->
<!--    <van-row gutter="20">-->
<!--      <van-col span="20">-->
<!--&lt;!&ndash;        <my-grid-item></my-grid-item>&ndash;&gt;-->
<!--        <view style="width: 40%">-->
<!--          <image src="@/static/logo.png" style="width: 40%;height: auto"></image>-->
<!--          123-->
<!--        </view>-->
<!--      </van-col>-->
<!--      <van-col span="20">-->

<!--        <view style="width: 40%">-->
<!--          <image src="@/static/logo.png"></image>-->
<!--          123-->
<!--        </view>-->
<!--      </van-col>-->
<!--    </van-row>-->
  </view>
</template>

<script>
export default {
  data() {
    return {
      grid_data:[{text:"冰美式"},{text:"古茗"},{text:"热咖"},{text:"白茶"},
        {text:"冰美式"},{text:"古茗"},{text:"热咖"},{text:"白茶"},
        {text:"冰美式"},{text:"古茗"},{text:"热咖"}]
    };
  },
  props: {
    shops: {
      type: Array,
      default: () => []

    },
  },
  methods: {
    nevigateToDetail(item){
      uni.navigateTo({
        url: `/subpkg/shopdetail/shopdetail?shopID=${JSON.stringify(item.id)}`
      })
    }
  },
  filters: {
    truncate(value, length = 10) {
      if (!value) return ''
      if (value.length > length) {
        return value.slice(0, length) + '...'
      }
    }
  }
}
</script>

<style lang="scss">
.itemImg{
  width: 300rpx;
  height: 300rpx;
}
</style>