动态切换列表-单双列表切换。可用于商品的单双列表切换。功能就跟淘宝的搜索界面里面的商品单双列切换一样。
<template>
<view class="main">
<view class="switching-mode" :style="{'flex-direction':direction}">
<view v-for="(item,index) in 10" :key="index" :class="[direction==='row'?'box-two':'box-one']">
<view :class="[direction==='row'?'img-two':'img-one']"> </view>
<view :class="[direction==='row'?'infor-two':'infor-one']"></view>
</view>
</view>
<button @click="changeCss" style="position: fixed;bottom:0 ;right: 0;">动态切换css</button>
</view>
</template>
<script>
export default {
name: "goods-list",
data() {
return {
direction: 'row',
};
},
methods: {
changeCss() {
this.direction = this.direction === 'row' ? 'column' : 'row'
}
}
}
</script>
<style lang="scss" scoped>
.main {
width: 98%;
height: auto;
padding: 1%;
.switching-mode {
display: flex;
flex-wrap: wrap;
width: 100%;
height: auto;
color: springgreen;
.box-one {
width: 100%;
height: 296rpx;
background-color: red;
display: flex;
align-items: center;
justify-content: center;
.img-one {
width: 230rpx;
height: 230rpx;
background-color: black;
}
.infor-one {
width: 456rpx;
height: 230rpx;
background-color: yellow;
}
}
.box-two {
height: 554rpx;
width: 48%;
padding: 1%;
background-color: black;
.img-two {
width: 100%;
height: 346rpx;
background-color: yellowgreen;
}
.infor-two {
width: 100%;
height: 182rpx;
background-color: yellow;
}
}
}
}
</style>放两张效果图
双列
单列
