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.
361 lines
8.4 KiB
361 lines
8.4 KiB
4 years ago
|
<template>
|
||
|
|
<view class="warp">
|
||
|
|
<text class="example-info">宫格组件主要使用场景如：商品推荐列表、热门内容等</text>
|
||
|
|
<uni-section title="默认样式（3列）" type="line"></uni-section>
|
||
|
|
<view class="example-body">
|
||
|
|
<uni-grid :column="3" :highlight="true" @change="change">
|
||
|
|
<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
|
||
|
|
<view class="grid-item-box" style="background-color: #fff;">
|
||
|
|
<image :src="item.url" class="image" mode="aspectFill" />
|
||
|
|
<text class="text">{{ item.text }}</text>
|
||
|
|
</view>
|
||
|
|
</uni-grid-item>
|
||
|
|
</uni-grid>
|
||
|
|
</view>
|
||
|
|
<uni-section title="滑动视图" type="line"></uni-section>
|
||
|
|
<view class="example-body">
|
||
|
|
<!-- 因为swiper特性的关系，请指定swiper的高度 ，swiper的高度并不会被内容撑开-->
|
||
|
|
<swiper class="swiper" :indicator-dots="true">
|
||
|
|
<swiper-item>
|
||
|
|
<uni-grid :column="3" :highlight="true" @change="change">
|
||
|
|
<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
|
||
|
|
<view class="grid-item-box">
|
||
|
|
<image :src="item.url" class="image" mode="aspectFill" />
|
||
|
|
<text class="text">{{ item.text }}</text>
|
||
|
|
</view>
|
||
|
|
</uni-grid-item>
|
||
|
|
</uni-grid>
|
||
|
|
</swiper-item>
|
||
|
|
<swiper-item>
|
||
|
|
<uni-grid :column="3" :highlight="true" @change="change">
|
||
|
|
<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
|
||
|
|
<view class="grid-item-box">
|
||
|
|
<image :src="item.url" class="image" mode="aspectFill" />
|
||
|
|
<text class="text">{{ item.text }}</text>
|
||
|
|
</view>
|
||
|
|
</uni-grid-item>
|
||
|
|
</uni-grid>
|
||
|
|
</swiper-item>
|
||
|
|
<swiper-item>
|
||
|
|
<uni-grid :column="3" :highlight="true" @change="change">
|
||
|
|
<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
|
||
|
|
<view class="grid-item-box">
|
||
|
|
<image :src="item.url" class="image" mode="aspectFill" />
|
||
|
|
<text class="text">{{ item.text }}</text>
|
||
|
|
</view>
|
||
|
|
</uni-grid-item>
|
||
|
|
</uni-grid>
|
||
|
|
</swiper-item>
|
||
|
|
</swiper>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
<uni-section title="动态加载" type="line"></uni-section>
|
||
|
|
<view class="example-body">
|
||
|
|
<view class="grid-dynamic-box">
|
||
|
|
<uni-grid :column="3" :highlight="true" @change="change">
|
||
|
|
<uni-grid-item v-for="(item, index) in dynamicList" :index="index" :key="index">
|
||
|
|
<view class="grid-item-box" :style="{'backgroundColor':item.color}">
|
||
|
|
<image :src="item.url" class="image" mode="aspectFill" />
|
||
|
|
<text class="text">{{ item.text }}</text>
|
||
|
|
</view>
|
||
|
|
</uni-grid-item>
|
||
|
|
</uni-grid>
|
||
|
|
</view>
|
||
|
|
<button type="primary" @click="add">点击添加一个宫格</button>
|
||
|
|
<button v-if="dynamicList.length !== 0" type="primary" style="margin-top: 15px;" @click="del">点击删除一个宫格</button>
|
||
|
|
</view>
|
||
|
|
<uni-section title="无边框带角标（3列）" type="line"></uni-section>
|
||
|
|
<view class="example-body">
|
||
|
|
<uni-grid :column="3" :show-border="false" :square="false" @change="change">
|
||
|
|
<uni-grid-item v-if="index < 6" v-for="(item ,index) in list" :index="index" :key="index">
|
||
|
|
<view class="grid-item-box">
|
||
|
|
<image class="image" :src="item.url" mode="aspectFill" />
|
||
|
|
<text class="text">{{item.text}}</text>
|
||
|
|
<view v-if="item.badge" class="grid-dot">
|
||
|
|
<uni-badge :text="item.badge" :type="item.type" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</uni-grid-item>
|
||
|
|
</uni-grid>
|
||
|
|
</view>
|
||
|
|
<uni-section title="矩形宫格（3列）" type="line"></uni-section>
|
||
|
|
<view class="example-body">
|
||
|
|
<uni-grid :column="3" :square="false" :highlight="false" @change="change">
|
||
|
|
<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
|
||
|
|
<view class="grid-item-box">
|
||
|
|
<image :src="item.url" class="image" mode="aspectFill" />
|
||
|
|
<text class="text">{{ item.text }}</text>
|
||
|
|
</view>
|
||
|
|
</uni-grid-item>
|
||
|
|
</uni-grid>
|
||
|
|
</view>
|
||
|
|
<uni-section title="边框颜色（4列 无文字）" type="line"></uni-section>
|
||
|
|
<view class="example-body">
|
||
|
|
<uni-grid :column="4" border-color="#03a9f4" @change="change">
|
||
|
|
<uni-grid-item :index="0">
|
||
|
|
<view class="grid-item-box">
|
||
|
|
<image class="image" src="/static/c1.png" mode="aspectFill" />
|
||
|
|
</view>
|
||
|
|
</uni-grid-item>
|
||
|
|
<uni-grid-item :index="1">
|
||
|
|
<view class="grid-item-box">
|
||
|
|
<image class="image" src="/static/c2.png" mode="aspectFill" />
|
||
|
|
</view>
|
||
|
|
</uni-grid-item>
|
||
|
|
<uni-grid-item :index="2">
|
||
|
|
<view class="grid-item-box">
|
||
|
|
<image class="image" src="/static/c3.png" mode="aspectFill" />
|
||
|
|
</view>
|
||
|
|
</uni-grid-item>
|
||
|
|
<uni-grid-item :index="3">
|
||
|
|
<view class="grid-item-box">
|
||
|
|
<image class="image" src="/static/c4.png" mode="aspectFill" />
|
||
|
|
</view>
|
||
|
|
</uni-grid-item>
|
||
|
|
</uni-grid>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
components: {},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
dynamicList: [],
|
||
|
|
list: [{
|
||
|
|
url: '/static/c1.png',
|
||
|
|
text: 'Grid 1',
|
||
|
|
badge: '0',
|
||
|
|
type: "primary"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
url: '/static/c2.png',
|
||
|
|
text: 'Grid 2',
|
||
|
|
badge: '1',
|
||
|
|
type: "success"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
url: '/static/c3.png',
|
||
|
|
text: 'Grid 3',
|
||
|
|
badge: '99',
|
||
|
|
type: "warning"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
url: '/static/c4.png',
|
||
|
|
text: 'Grid 4',
|
||
|
|
badge: '2',
|
||
|
|
type: "error"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
url: '/static/c5.png',
|
||
|
|
text: 'Grid 5'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
url: '/static/c6.png',
|
||
|
|
text: 'Grid 6'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
url: '/static/c7.png',
|
||
|
|
text: 'Grid 7'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
url: '/static/c8.png',
|
||
|
|
text: 'Grid 8'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
url: '/static/c9.png',
|
||
|
|
text: 'Grid 9'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
change(e) {
|
||
|
|
let {
|
||
|
|
index
|
||
|
|
} = e.detail
|
||
|
|
this.list[index].badge && this.list[index].badge++
|
||
|
|
|
||
|
|
uni.showToast({
|
||
|
|
title: `点击第${index+1}个宫格`,
|
||
|
|
icon: 'none'
|
||
|
|
})
|
||
|
|
},
|
||
|
|
add() {
|
||
|
|
if (this.dynamicList.length < 9) {
|
||
|
|
this.dynamicList.push({
|
||
|
|
url: `/static/c${this.dynamicList.length+1}.png`,
|
||
|
|
text: `Grid ${this.dynamicList.length+1}`,
|
||
|
|
color: this.dynamicList.length % 2 === 0 ? '#f5f5f5' : "#fff"
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
uni.showToast({
|
||
|
|
title: '最多添加9个',
|
||
|
|
icon: 'none'
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
del() {
|
||
|
|
this.dynamicList.splice(this.dynamicList.length - 1, 1)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
@charset "UTF-8";
|
||
|
|
|
||
|
|
/* 头条小程序组件内不能引入字体 */
|
||
|
|
/* #ifdef MP-TOUTIAO */
|
||
|
|
@font-face {
|
||
|
|
font-family: uniicons;
|
||
|
|
font-weight: normal;
|
||
|
|
font-style: normal;
|
||
|
|
src: url("~@/static/uni.ttf") format("truetype");
|
||
|
|
}
|
||
|
|
|
||
|
|
/* #endif */
|
||
|
|
/* #ifndef APP-NVUE */
|
||
|
|
page {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
box-sizing: border-box;
|
||
|
|
background-color: #efeff4;
|
||
|
|
min-height: 100%;
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
view {
|
||
|
|
font-size: 14px;
|
||
|
|
line-height: inherit;
|
||
|
|
}
|
||
|
|
|
||
|
|
.example {
|
||
|
|
padding: 0 15px 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.example-info {
|
||
|
|
padding: 15px;
|
||
|
|
color: #3b4144;
|
||
|
|
background: #ffffff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.example-body {
|
||
|
|
/* #ifndef APP-NVUE */
|
||
|
|
display: flex;
|
||
|
|
/* #endif */
|
||
|
|
flex-direction: row;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
justify-content: center;
|
||
|
|
padding: 0;
|
||
|
|
font-size: 14px;
|
||
|
|
background-color: #ffffff;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* #endif */
|
||
|
|
.example {
|
||
|
|
padding: 0 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.example-info {
|
||
|
|
/* #ifndef APP-NVUE */
|
||
|
|
display: block;
|
||
|
|
/* #endif */
|
||
|
|
padding: 15px;
|
||
|
|
color: #3b4144;
|
||
|
|
background-color: #ffffff;
|
||
|
|
font-size: 14px;
|
||
|
|
line-height: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.example-info-text {
|
||
|
|
font-size: 14px;
|
||
|
|
line-height: 20px;
|
||
|
|
color: #3b4144;
|
||
|
|
}
|
||
|
|
|
||
|
|
.example-body {
|
||
|
|
flex-direction: column;
|
||
|
|
padding: 15px;
|
||
|
|
background-color: #ffffff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.word-btn-white {
|
||
|
|
font-size: 18px;
|
||
|
|
color: #FFFFFF;
|
||
|
|
}
|
||
|
|
|
||
|
|
.word-btn {
|
||
|
|
/* #ifndef APP-NVUE */
|
||
|
|
display: flex;
|
||
|
|
/* #endif */
|
||
|
|
flex-direction: row;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
border-radius: 6px;
|
||
|
|
height: 48px;
|
||
|
|
margin: 15px;
|
||
|
|
background-color: #007AFF;
|
||
|
|
}
|
||
|
|
|
||
|
|
.word-btn--hover {
|
||
|
|
background-color: #4ca2ff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.image {
|
||
|
|
width: 50rpx;
|
||
|
|
height: 50rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text {
|
||
|
|
font-size: 26rpx;
|
||
|
|
margin-top: 10rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.example-body {
|
||
|
|
/* #ifndef APP-NVUE */
|
||
|
|
display: block;
|
||
|
|
/* #endif */
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-dynamic-box {
|
||
|
|
margin-bottom: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-item-box {
|
||
|
|
flex: 1;
|
||
|
|
/* #ifndef APP-NVUE */
|
||
|
|
display: flex;
|
||
|
|
/* #endif */
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
padding: 15px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-dot {
|
||
|
|
position: absolute;
|
||
|
|
top: 5px;
|
||
|
|
right: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.swiper {
|
||
|
|
height: 420px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* #ifdef H5 */
|
||
|
|
@media screen and (min-width: 768px) and (max-width: 1425px) {
|
||
|
|
.swiper {
|
||
|
|
height: 630px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media screen and (min-width: 1425px) {
|
||
|
|
.swiper {
|
||
|
|
height: 830px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* #endif */
|
||
|
|
</style>
|