金刚区 grid

常用方式

html

<template>
  <uni-section title="不滑动" type="line" padding>
    <pl-uni-grid :list="list" :if-scroll="false" @click="change1" />
  </uni-section>
  <uni-section title="可左右滑动" type="line" padding>
    <pl-uni-grid :list="list" :if-scroll="true" @click="change2" />
  </uni-section>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const list = ref([
  {
    imgUrl: '/static/image/home/order-icon.png',
    name: '附近门店1'
  },
  {
    imgUrl: '/static/image/home/good-icon.png',
    name: '附近门店2'
  },
  {
    imgUrl: '/static/image/home/order-icon.png',
    name: '附近门店3'
  },
  {
    imgUrl: '/static/image/home/good-icon.png',
    name: '附近门店4'
  },
  {
    imgUrl: '/static/image/home/order-icon.png',
    name: '附近门店5'
  },
  {
    imgUrl: '/static/image/home/good-icon.png',
    name: '附近门店6'
  },
  {
    imgUrl: '/static/image/home/order-icon.png',
    name: '附近门店7'
  },
  {
    imgUrl: '/static/image/home/good-icon.png',
    name: '附近门店8'
  },
  {
    imgUrl: '/static/image/home/good-icon.png',
    name: '附近门店9'
  }
])

const change1 = (val) => {
  console.log(val)
  uni.showToast({
    title: JSON.stringify(val),
    icon: 'none'
  })
}

const change2 = (val) => {
  console.log(val)
  uni.showToast({
    title: JSON.stringify(val),
    icon: 'none'
  })
}
</script>
<style lang="scss"></style>

API

参数	说明	类型	默认值
col	当前页面显示列数	Number	4
indicator	横向滚动指示器	Boolean	false
align	宫格的对齐方式，用于控制只有一两个宫格时的对齐场景(left/center/right)	String	left
list	金刚区内容	Array `type GridList = { // 图片url imgUrl: string // 名称 name: string // 其他参数 [key: string]: any }`	[]
ifScroll	是否滑动	Boolean	true
row	行数(滑动效果生效)	Number	2

事件

事件名称	说明	回调参数
click	点击后回调事件	(value) => void

金刚区 grid #

常用方式 #

API #

事件 #

金刚区 grid

常用方式

API

事件