Dynamic switching list - single and double list switching. It can be used to switch between single and double lists of commodities. The function is the same as switching between single and double columns of products in the search interface of Taobao.
<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>Put two renderings
double column
single column
