You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
193 lines
4.0 KiB
193 lines
4.0 KiB
<template>
|
|
<view class="u-page">
|
|
<view class="u-demo-block">
|
|
<text class="u-demo-block__title">基本案例</text>
|
|
<view>
|
|
<u-grid
|
|
:border="false"
|
|
@click="click"
|
|
>
|
|
<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>
|
|
|