案例演示
案例代码
<template>
<view class="container">
<view class="headBox">
<view class="greenBg"></view>
<!-- 轮播图start -->
<view class="swiperBox">
<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
:interval="interval" :duration="duration" indicator-color="#ffffff8C"
indicator-active-color="#ffffff">
<block v-for="(item,index) in swiperList" :key="index">
<swiper-item>
<image :src="$common.image(item.image)" mode="aspectFill" class="banner"></image>
</swiper-item>
</block>
</swiper>
</view>
<!-- 轮播图end -->
</view>
<!-- 主体部分 -->
<view class="body">
<!-- 左侧分类 -->
<view class="leftTab">
<scroll-view scroll-y="true" class="tabBox">
<block v-for="(item,index) in tabList" :key="index">
<view class="tabItem" :class="tabCurrent == index?'tabActive':''" @click="changeTab(index)">
{
{
item.name}}
</view>
</block>
</scroll-view>
</view>
<!-- 右侧商品 -->
<view class="rightGoods">
<scroll-view scroll-y="true" class="whiteBox" @scrolltolower="scrollBottom">
<view class="title">{
{
productTitle}}</view>
<view class="list">
<block v-for="(item,index) in 10" :key="index">
<view class="item" @click="toDetails()">
<view class="goodImg">
<image src="/static/images/mall/goodImg.png" mode="aspectFill"></image>
</view>
<view class="goodName">西瓜</view>
<view class="goodPrice">￥20/个</view>
</view>
</block>
</view>
</scroll-view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
indicatorDots: true,
autoplay: true,
interval: 2000,
duration: 500,
swiperList: [{
image: '/static/images/mall/banner.png'
}, {
image: '/static/images/mall/banner.png'
}, {
image: '/static/images/mall/banner.png'
}, {
image: '/static/images/mall/banner.png'
}],
tabList: [{
id: 1,
name: '水果'
}, {
id: 2,
name: '设备配件'
}, {
id: 3,
name: '生活用品'
}],
tabCurrent: 0,
productTitle: '氧气罐',
fromStore: false,
}
},
onLoad(options) {
if (options.fromStore) {
this.fromStore = options.fromStore
}
},
methods: {
changeTab(index) {
this.tabCurrent = index
this.productTitle = this.tabList[index].name
console.log(this.tabList[index].id);
},
scrollBottom() {
console.log("商品触底");
},
toDetails() {
this.$common.to(`/subPackages/mall/productDetails?fromStore=${
this.fromStore}`)
}
}
}
</script>
<style lang="scss">
.headBox {
height: 21vh;
position: relative;
.greenBg {
height: 10vh;
background: rgb(96, 179, 71);
border-radius: 0px 0px 30rpx 30rpx;
}
.swiperBox {
position: absolute;
left: 23rpx;
top: 0;
width: 704rpx;
border-radius: 20rpx;
overflow: hidden;
swiper {
width: 100%;
height: 20vh;
image {
width: 100%;
height: 100%;
border-radius: 20rpx;
}
}
}
}
.body {
height: 79vh;
display: flex;
justify-content: space-between;
.leftTab {
width: 177rpx;
height: 79vh;
background: #ffffff;
border-radius: 0px 15rpx 0px 0px;
padding: 24rpx 11rpx;
box-sizing: border-box;
.tabBox {
height: 100%;
.tabItem {
text-align: center;
padding: 14rpx 0;
border-radius: 60rpx;
color: #464646;
font-size: 26rpx;
font-weight: bold;
margin-bottom: 20rpx;
}
.tabActive {
background: #60B347;
color: #ffffff;
}
}
}
.rightGoods {
width: 573rpx;
height: 79vh;
padding: 0 16rpx 27rpx;
box-sizing: border-box;
.whiteBox {
height: 100%;
background: #ffffff;
border-radius: 15rpx;
padding: 0 25rpx;
box-sizing: border-box;
.title {
height: 77rpx;
line-height: 77rpx;
color: #2D2D2D;
font-size: 26rpx;
font-weight: bold;
}
.list {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.item {
width: calc((100% - 30rpx)/2);
margin-bottom: 30rpx;
.goodImg {
height: 200rpx;
background: rgb(255, 255, 255);
border: 1px solid rgb(208, 208, 208);
border-radius: 15rpx;
image {
width: 100%;
height: 100%;
}
}
.goodName {
color: #2D2D2D;
font-size: 26rpx;
line-height: 62rpx;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.goodPrice {
text-align: center;
color: #FA412B;
font-size: 26rpx;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
}
}
</style>