微信小程序之布局切换

1,wxml部分

// An highlighted block
<view class="img-view row end">
  <image src="{{active?'/img/row.png':'/img/column.png'}}" class="flex-img" bindtap='flexClick'/>
</view>
<view class="list-view bd-radius row around wrap">
  <view wx:for='{{list}}' wx:key='index' class="list-item bd-radius white-bg between align {{active?'row':'column'}}">
     <image class="img {{active?'list-img-row':'list-img-column'}}" src='{{item.url}}'/>
     <view class="column around {{active?'list-right-row':'list-right-column'}}">
       <view class="lg-text fw-blod">{{item.name}}</view>
       <view class="row align between" wx:if='{{item.discount}}'>
         <view class="line-text grey sm-text">￥{{item.price}}</view>
         <text class="orange fw-bloder">￥{{item.discount}}</text>
       </view>
       <view wx:else>
        <text class="orange fw-bloder mragin-right">￥{{item.price}}</text>
        <text class="xs-text grey">零售价</text>
       </view>
       <view class="row align between">
         <view class="grey sm-text">{{item.time}}分钟</view>
         <text class="grey sm-text">月销{{item.num}}</text>
       </view>
       <view class="grey ml-text ellipsis">{{item.introduce}}</view>
     </view>
  </view>
  <view class="list-item-empty"></view>
  <view class="list-item-empty"></view>
</view>

2,wxss部分

Page{
  background-color: #fff;
  font-size: 30rpx;
  color: black;
}
/*=========
  分布
 ========*/
 .row{
  display: flex;
  flex-direction: row;
}
.column{
  display: flex;
  flex-direction: column;
}
.around{
  justify-content: space-around;
}
.between{
  justify-content: space-between;
}
.end{
  justify-content: flex-end;
}
.wrap{
  flex-wrap: wrap;
}
.align{
  align-items: center;
}
.ellipsis{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/*=========
  字体
 ========*/
 .xs-text{
   font-size: 22rpx;
 }
 .sm-text{
   font-size: 24rpx;
 }
 .ml-text{
   font-size: 28rpx;
 }
 .lg-text{
   font-size: 32rpx;
 }
 .xl-text{
   font-size: 36rpx;
 }
 .xxl-text{
   font-size: 38rpx;
 }

 /*=========
  颜色
 ========*/
 .red{
  color: #f43f3b;
 }
 .orange{
  color: #f37b1d;
 }
 .grey{
  color:grey;
 }
 .white{
   color: #fff;
 }
 /*=========
  字体粗细
 ========*/
 .fw-blod{
   font-weight: 700;
 }
 .fw-bloder{
  font-weight: 900;
}
 /*=========
  字体删除线
 ========*/
 .line-text{
   text-decoration: line-through;
 }
 /*=========
  背景色
 ========*/
 .blue-bg{
   background-color: #2c95fc;
 }
 .grey-bg{
   background-color: #eee;
 }
 .white-bg{
  background-color: #fff;
 }
 /* ========
  边框
  ======= */
  .bd-solid-bottom{
    border-bottom: 1rpx solid #eee;
  }
  .bd-solid-top{
    border-top: 1rpx solid #eee;
  }
  .bd-solid-left{
    width: 3rpx;
    height: 28rpx;
    background-color: grey;
  }
/* ========
  圆角
  ======= */
  .bd-radius{
    border-radius: 10rpx;
  }
  /* ========
  边距
  ======= */
  .mragin-right{
    margin-right: 10rpx;
  }
  /* ========
  按钮
  ======= */
  checkbox .wx-checkbox-input,
  radio .wx-radio-input {
    width: 32rpx;
    height: 32rpx;
  }
  checkbox .wx-checkbox-input.wx-checkbox-input-checked{
    background: #2c95fc;
   
  }
  checkbox .wx-checkbox-input.wx-checkbox-input-checked::before,
  radio .wx-radio-input.wx-radio-input-checked::before{
    width: 32rpx;
    height: 32rpx;
    line-height: 32rpx;
    text-align: center;
    font-size: 26rpx;
    color: #fff;
  }
  button[disabled]{
    background-color: #2C95FC !important;
    color: #fff !important;
    font-size: 32rpx !important;
  }
  /* ========
  以上是公共样式
  ======= */
.flex-img{
  width: 40rpx;
  height: 40rpx;
}
.img-view{
  padding: 30rpx;
  margin: 20rpx 20rpx 0;
  
}
.list-view{
  margin: 0 20rpx 20rpx;
  padding: 10rpx 0;
}
.list-item{
  padding: 20rpx;
  margin-top: 30rpx;
  box-shadow: 0rpx 0rpx 20rpx #ddd;
}
.list-item-empty{
  width: 300rpx;
  height: 0;
  visibility: hidden;
}
.list-img-column{
 width: 270rpx; 
 margin-bottom: 20rpx;
}
.list-img-row{
  width: 200rpx;
  margin-right: 40rpx;
}
.list-right-row{
  width: 430rpx;
  height: 230rpx;
}
.list-right-column{
  width: 270rpx;
  height: 190rpx;
}
.img{
  height: 200rpx;
  border-radius: 10rpx;
}

3,js部分

Page({
  data: {
    active:false,
    在这里插入图片描述
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201221140905857.png)
list:[
      {
        url: 'https://goss.cfp.cn/creative/vcg/800/new/VCG41560336195.jpg',
        name:'云南大理',
        price:99,
        discount:89,
        time:45,
        num:80,
        introduce:'花+草+树木+鸟+虫+鱼+与法国红酒和'
      },
      {
        url: 'https://goss1.cfp.cn/creative/vcg/800/new/VCG21gic19989009-KWX.jpg',
        name:'北京故宫',
        price:99,
        discount:89,
        time:45,
        num:80,
        introduce:'花+草+树木+鸟+虫+鱼+与法国红酒和'
      },
      {
        url: 'https://goss1.cfp.cn/creative/vcg/800/new/VCG41614481028.jpg',
        name:'路过之稻城',
        price:99,
        time:45,
        num:80,
        introduce:'花+草+树木+鸟+虫+鱼+与法国红酒和'
      },
      {
        url: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2743268655,1778161208&fm=26&gp=0.jpg',
        name:'苏州园林',
        price:99,
        discount:89,
        time:45,
        num:80,
        introduce:'花+草+树木+鸟+虫+鱼+与法国红酒和'
      },
      {
        url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2759078875,3643456742&fm=26&gp=0.jpg',
        name:'一级标题',
        price:99,
        time:45,
        num:80,
        introduce:'花+草+树木+鸟+虫+鱼+与法国红酒和'
      },
    ]
  },
 //默认流布局
  flexClick:function(){
    this.setData({
      active:!this.data.active
    })
  },
 })