implementación de la página de inicio del proyecto uni-app 2
Implementación de carrusel
<template>
<view class="home">
首页
swiper- {
{
swiper }}
<swiper class="swiper" circular indicator-dots="true" autoplay interval="2000" duration="500" >
<swiper-item v-for="(item,idx) in swiper" :key="idx">
<view class="swiper-item uni-bg-red">{
{
item.title}}</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
swiper:[],
}
},
onLoad() {
this.getSwiper()
},
methods: {
async getSwiper(){
const res = await this.$myHttp({
url:"/swiper",
})
console.log("res",res);
this.swiper = res.data;
}
}
}
</script>
<style lang="scss">
.home {
.swiper {
width: 750rpx;
height: 380rpx;
background: orange;
}
}
</style>
- Efecto
Implementación de la navegación de la página de inicio
<template>
<view class="home">
<view class="nav">
<view class="nav_item" v-for="item in navList">
{
{
item }}
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
navList:[1,2,3,4]
}
},
onLoad() {
},
methods: {
}
}
</script>
<style lang="scss">
.home {
.nav {
margin-top: 15rpx;
display: flex;
justify-content: space-around;
align-items: center;
.nav_item {
height: 120rpx;
line-height: 120rpx;
width: 120rpx;
border: 1px solid #ccc;
text-align: center;
}
}
}
</style>
- Efecto
Productos Recomendados
<template>
<view class="home">
<view class="recommend">
<view class="recommend_title">
推荐商品
</view>
<view class="recommend_list">
<view class="recommend_list_item">
商品1
</view>
<view class="recommend_list_item">
商品2
</view>
<view class="recommend_list_item">
商品3
</view>
<view class="recommend_list_item">
商品4
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
},
methods: {
}
}
</script>
<style lang="scss">
.home {
.recommend {
margin-top: 10rpx;
background: #eee;
overflow: hidden;
.recommend_title {
margin: 7rpx 0;
height: 80rpx;
line-height: 80rpx;
color: $shop_color;
text-align: center;
background: #fff;
letter-spacing: 20rpx;
}
.recommend_list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 15rpx;
.recommend_list_item {
box-sizing: border-box;
margin-bottom: 15rpx;
background: #fff;
width: 355rpx;
height: 400rpx;
line-height: 400rpx;
text-align: center;
}
}
}
}
</style>
- Efecto
página de inicio completa
<template>
<view class="home">
<swiper class="swiper" circular indicator-dots="true" autoplay interval="2000" duration="500" >
<swiper-item v-for="(item,idx) in swiper" :key="idx">
<view class="swiper-item uni-bg-red">{
{
item.title}}</view>
</swiper-item>
</swiper>
<view class="nav">
<view class="nav_item" v-for="item in navList">
{
{
item }}
</view>
</view>
<view class="recommend">
<view class="recommend_title">
推荐商品
</view>
<view class="recommend_list">
<view class="recommend_list_item" v-for="item in shopList">
{
{
item.title}}
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
swiper:[],
navList:[1,2,3,4],
shopList:[],
}
},
onLoad() {
this.getSwiper();
this.getShopList();
},
methods: {
async getSwiper(){
const res = await this.$myHttp({
url:"/swiper",
})
console.log("res",res);
this.swiper = res.data;
},
async getShopList(){
const res = await this.$myHttp({
url:"/shopList",
})
this.shopList = res.data;
}
}
}
</script>
<style lang="scss">
.home {
.swiper {
width: 750rpx;
height: 380rpx;
background: orange;
}
.nav {
margin-top: 15rpx;
display: flex;
justify-content: space-around;
align-items: center;
.nav_item {
height: 120rpx;
line-height: 120rpx;
width: 120rpx;
border: 1px solid #ccc;
text-align: center;
color: $shop_color;
}
}
.recommend {
margin-top: 10rpx;
background: #eee;
overflow: hidden;
.recommend_title {
margin: 7rpx 0;
height: 80rpx;
line-height: 80rpx;
color: $shop_color;
text-align: center;
background: #fff;
letter-spacing: 20rpx;
}
.recommend_list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 15rpx;
.recommend_list_item {
box-sizing: border-box;
margin-bottom: 15rpx;
background: #fff;
width: 355rpx;
height: 400rpx;
line-height: 400rpx;
text-align: center;
}
}
}
}
</style>