bwadmin/FileCollect
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

home1022

Browse Source
This commit is contained in:
bwstudio
2025-10-22 08:19:00 +08:00
parent 467b04e5b0
commit 97fbfe08d7
6040 changed files with 529099 additions and 9685 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/componentsA/grid/grid.nvue
+194
View File
@@ -0,0 +1,194 @@
<template>
<view class="u-page">
<view class="u-demo-block">
<text class="u-demo-block__title">基本案例</text>
<view>
<u-grid
:border="false"
@click="click"
align="center"
>
<u-grid-item
v-for="(baseListItem,baseListIndex) in baseList"
:key="baseListIndex"
>
<u-icon
:customStyle="{paddingTop:20+'rpx'}"
:name="baseListItem.name"
:size="22"
></u-icon>
<text class="grid-text">{{baseListItem.title}}</text>
</u-grid-item>
</u-grid>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">显示边框</text>
<view>
<u-grid :border="true">
<u-grid-item
v-for="(listItem,listIndex) in list"
:key="listIndex"
customStyle="padding-top: 10px; padding-bottom: 10px"
>
<u-icon
:customStyle="{paddingTop:20+'rpx'}"
:name="listItem.name"
:size="22"
></u-icon>
<text class="grid-text">{{listItem.title}}</text>
</u-grid-item>
</u-grid>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">绑定点击事件&自定义列数</text>
<view>
<u-grid
:border="false"
col="4"
>
<u-grid-item
v-for="(listItem,listIndex) in list"
:key="listIndex"
customStyle="padding-top: 10px; padding-bottom: 10px"
>
<u-icon
:customStyle="{paddingTop:20+'rpx'}"
:name="listItem.name"
:size="22"
></u-icon>
<text class="grid-text">{{listItem.title}}</text>
</u-grid-item>
</u-grid>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">可滑动</text>
<view>
<swiper
:indicator-dots="true"
class="swiper"
>
<swiper-item>
<u-grid :border="true">
<u-grid-item
v-for="(item, index) in swiperList"
:index="index"
:key="index"
>
<u-icon
:customStyle="{paddingTop:20+'rpx'}"
:name="item"
:size="22"
></u-icon>
<text class="grid-text">{{ '宫格' + (index + 1) }}</text>
</u-grid-item>
</u-grid>
</swiper-item>
<swiper-item>
<u-grid :border="true">
<u-grid-item
v-for="(item, index) in swiperList"
:index="index + 9"
:key="index"
>
<u-icon
:customStyle="{paddingTop:20+'rpx'}"
:name="item"
:size="22"
></u-icon>
<text class="grid-text">{{ '宫格' + (index + 1) }}</text>
</u-grid-item>
</u-grid>
</swiper-item>
<swiper-item>
<u-grid :border="true">
<u-grid-item
v-for="(item, index) in swiperList"
:index="index + 18"
:key="index"
>
<u-icon
:customStyle="{paddingTop:20+'rpx'}"
:name="item"
:size="22"
></u-icon>
<text class="grid-text">{{ "宫格" + (index + 1) }}</text>
</u-grid-item>
</u-grid>
</swiper-item>
</swiper>
</view>
</view>
<u-toast ref="uToast" />
</view>
</template>
<script>
export default {
data() {
return {
baseList: [{
name: 'photo',
title: '图片'
},
{
name: 'lock',
title: '锁头'
},
// {
// name: 'star',
// title: '星星'
// },
],
list: [{
name: 'photo',
title: '图片'
},
{
name: 'lock',
title: '锁头'
},
{
name: 'star',
title: '星星'
},
{
name: 'hourglass',
title: '沙漏'
},
{
name: 'home',
title: '首页'
},
{
name: 'volume',
title: '音量'
},
],
swiperList: ['integral', 'kefu-ermai', 'coupon', 'gift', 'scan', 'pause-circle', 'wifi', 'email', 'list'],
}
},
methods: {
click(name) {
this.$refs.uToast.success(`点击了第${name}个`)
}
}
}
</script>
<style lang="scss">
.swiper {
height: 220px;
}
.grid-text {
font-size: 14px;
color: #909399;
padding: 10rpx 0 20rpx 0rpx;
/* #ifndef APP-PLUS */
box-sizing: border-box;
/* #endif */
}
</style>