思路:1:调接口
2:写轮播图标签
3:v-for遍历轮播图
4:方块current与图片下标index对应(@change给父元素)
5:图片类型进行判断,先渲染最大一层,再渲染小的一层
<template>
<view class="home">
<!-- 第二步:写轮播图标签-->
<swiper :autoplay="true" :interval="3000" :circular='true' :duration="1000" @change="getindex"
style="height: 65vh;">
<!-- 第三步:v-for遍历轮播图 -->
<swiper-item v-for="item in banner" style="width: 100vw;">
<image style="width: 100%; height: 100%;" :src="item.media.src" mode="heightFix "></image>
<!-- 这个地方找到儿子 -->
</swiper-item>
</swiper>
<!-- 第四步:方块current跟图片的下标对应 @chang事件给父元素-->
<view style="display: flex;justify-content:space-around;">
<!-- current等于图片下标的时候是黑色 -->
<view style="width: 100%;height: 14rpx;"
:style="currentimg==index?'background-color:#000':'background-color:#d8d8d3'"
v-for="(item,index) in banner" :key="index.imgid">
</view>
</view>
<!-- 判断图片类型 -->
<view v-for="(item,index) in modules" :key="index" style="margin-bottom:-4px ;">
<view v-if="item.type=='image'&&item.data.image">
<image v-if="index!=4&&index!=5" class="image" :src="item.data.image.src"></image>
<image v-else class="full" :style="{'height':item.data.image.height/2.8+'px'}"
:src="item.data.image.src"></image>
</view>
<view v-if="item.type=='new-image'">
<image v-if="index!=3&&index!=19&&index!=18" class="full" :src="item.data.items[0].media.src"
:style="{'height':item.data.items[0].media.height/3+'px'}"></image>
<view v-else-if="index==3" class="scroll">
<image v-for="(sitem,ind) in item.data.items" :key="ind" :src="sitem.media.src"
:style="{'height':sitem.media.height/3+'px'}"></image>
</view>
<view v-else>
<image class="lastimg" v-for="(sitem,ind) in item.data.items" :key="ind" :src="sitem.media.src"
:style="{'height':sitem.media.height/3+'px'}"></image>
</view>
</view>
<view class="newshow" v-if="item.type=='new'">
<view v-for="(sitem,index) in item.data.codes" :key="index">
<show-home :gngz='sitem'></show-home>
</view>
<view class="lastshow">
<view class="showtext">查看更多<text style="font-family: 宋体;padding-left: 4px;"> ></text></view>
</view>
</view>
</view>
</view>
</template>
js部分
<script>
export default {
data() {
return {
banner: [], // 轮播数据
modules: [], //首页数据
currentimg: 1
}
},
onLoad() {
this.geturl()
// this.getnew()
},
methods: {
geturl() {
uni.request({
url: "https://api.thebeastshop.com/app/index/getNewIndex", //第一步调接口
success: (res) => {
this.banner = res.data.data.modules[0].data.items //这个地方找到爹
this.modules = res.data.data.modules // 首页all数据
}
});
},
getindex(e) {
this.currentimg = e.target.current
},
}
}
</script>
style样式部分
<style>
.home {
width: 100%;
height: 100vh;
overflow: scroll;
}
.full {
width: 100%;
}
.image {
width: 100%;
height: 38vh;
}
.scroll {
display: flex;
justify-content: space-between;
}
.newshow {
display: flex;
justify-content: space-between;
overflow: scroll;
}
.lastshow {
padding: 0 20px;
}
.showtext {
text-align: center;
white-space: nowrap;
line-height: 200px;
border: 2px solid #000;
padding: 6px 20px;
font-size: 14px;
display: inline;
}
.lastimg {
width: calc(100vw/2);
}
</style>