图中导入了轮播组件、网格组件。
1.轮播组件，这里使用了组件生命周期函数 created() 来对数据进行初始化。
<template>
<view>
<view class="uni-margin-wrap">
<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
<swiper-item v-for="(item,index) in swipers" :key="index">
<view class="swiper-item uni-bg-red"><image :src="item"></image></view>
</swiper-item>
</swiper>
</view>
</view>
</template>
<script>
export default {
data() {
return {
background: ['color1', 'color2', 'color3'],
indicatorDots: true,
autoplay: true,
interval: 2000,
duration: 500,
swipers:[]
}
},
created() {
this.swipers=["https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn20190515s%2F460%2Fw790h470%2F20190515%2F67fe-hwzkfpu3963435.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1635722198&t=feed50747d49c750516f626a0ff7591c",
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic2.16pic.com%2F00%2F52%2F80%2F16pic_5280043_b.jpg&refer=http%3A%2F%2Fpic2.16pic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1635722198&t=0da5cf68bf72bced3a87e7c88fa45f77",
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic2.16pic.com%2F00%2F51%2F06%2F16pic_5106826_b.jpg&refer=http%3A%2F%2Fpic2.16pic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1635722198&t=1b24b6b48201754693d27575a4ef3afd"
];
},
methods: {
changeIndicatorDots(e) {
this.indicatorDots = !this.indicatorDots
},
changeAutoplay(e) {
this.autoplay = !this.autoplay
},
intervalChange(e) {
this.interval = e.detail.value
},
durationChange(e) {
this.duration = e.detail.value
}
}
}
</script>
<style>
.uni-margin-wrap {
width:750rpx;
margin:0 0rpx;
}
.swiper {
height: 350rpx;
}
.swiper-item {
display: block;
height: 350rpx;
line-height: 300rpx;
text-align: center;
}
.swiper-list {
margin-top: 40rpx;
margin-bottom: 0;
}
.uni-common-mt{
margin-top:60rpx;
position:relative;
}
.info {
position: absolute;
right:20rpx;
}
.uni-padding-wrap {
width:550rpx;
padding:0 100rpx;
}
image{
width: 100%;
height: 100%;
}
</style>
2. 九空格组件，采用了.nve 扩展名文件，采用了原生渲染。需要下载九空格组件
<template>
<view class="warp">
<view class="example-body">
<uni-grid :column="3" :highlight="true" @change="change" :showBorder="false" :square="false">
<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>
</view>
</template>
<script>
import uniGrid from"@/components/uni-grid.vue"
import uniGridItem from"@/components/uni-grid-item.vue"
export default {
components:{uniGrid,uniGridItem},
data() {
return {
dynamicList: [],
list: [{
url: '/static/images/es.png',
text: '二手',
badge: '0',
type: "primary"
},
{
url: '/static/images/ssp.png',
text: '随手拍',
badge: '1',
type: "success"
},
{
url: '/static/images/tj.png',
text: '特价',
badge: '99',
type: "warning"
},
{
url: '/static/images/yw.png',
text: '游玩',
badge: '2',
type: "error"
},
{
url: '/static/images/yl.png',
text: '医疗'
},
{
url: '/static/images/my.png',
text: '母婴'
},
{
url: '/static/images/notice.png',
text: '通知'
},
{
url: '/static/images/sq.png',
text: '商圈'
},
{
url: '/static/images/wx.png',
text: '维修'
}
]
}
},
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-info {
width: 100%;
padding: 15px;
color: #3b4144;
background: #ffffff;
}
.example-body {
width: 750rpx;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
padding: 0;
font-size: 14px;
background-color: #ffffff;
}
/* #endif */
.image {
width: 50rpx;
height: 50rpx;
}
.text {
font-size: 26rpx;
margin-top: 10rpx;
}
.example-body {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
}
.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;
}
</style>
3. index.vue组件的导入, 使用组件的时候应该用 <xxx-xxx></xxx-xxx>引入
<template>
<view class="content">
<introduce-swiper></introduce-swiper>
<grid-swiper></grid-swiper>
</view>
</template>
<script>
import IntroduceSwiper from "../../components/swiper"
import GridSwiper from "../../components/grid"
export default {
components:{
IntroduceSwiper,GridSwiper
},
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
/* justify-content: center; */
}
</style>