支付宝小程序侧边栏

代码

html页

<view class="box">
  <view class="Side">
    <view class="sides   {{activeTab==0?'background':''}}" onTap="one">
     分类一
    </view>
    <view class="sides   {{activeTab==1?'background':''}}" onTap="tow">
     分类二
    </view>
    <view class="sides   {{activeTab==2?'background':''}}" onTap="three">
     分类三
    </view>
  </view>
  <view class="center">
    <view class="hearder">
     商城
    </view>
   <view class="centers">
      <view class="centerTop" a:for="{{one}}">
      <view class="topLeft">
        <image mode="scaleToFill" src="{{item.img}}"/>
      </view>
      <view class="topRight">
        <view class="oneTitle">
      {{item.name}}
        </view>
        <view class="Price">
      {{item.myname}}
        </view>
        <view class="company">
      {{item.money}}
        </view>
      </view>
    </view>
   </view>
  </view>
</view>

js页

Page({
  data: {
    activeTab: 0,
    list: {
     one:
        [
            { img: '../../assets/img/1.jpg', name: '一 一', myname: '使用何种场合 ', money: 8888 },
            { img: '../../assets/img/1.jpg', name: '二二', myname: '使用何种场合', money: 8888 },
        ],
    tow:
        [
            { img: '../../assets/img/1.jpg', name: '三三', myname: '使用何种场合 ', money: 8888 },
            { img: '../../assets/img/1.jpg', name: '四四', myname: '使用何种场合', money: 8888 },
        ],
    three:
        [
            { img: '../../assets/img/1.jpg', name: '五五', myname: '使用何种场合 ', money: 8888 },
            { img: '../../assets/img/1.jpg', name: '六六', myname: '使用何种场合', money: 8888 },
        ],

    foue: [
        [
            { img: '../../assets/img/1.jpg', name: '七七', myname: '使用何种场合 ', money: 88 },
            { img: '../../assets/img/1.jpg', name: '八八', myname: '使用何种场合', money: 88 },
        ],

    ],

    },
    one: null,
  },
  onLoad() {
    this.setData({
      activeTab: 0,
      one: this.data.list.one
    })
  },
  //种类
  one() {
    this.setData({
      activeTab: 0,
      one: this.data.list.one
    })
  },
  tow() {
    this.setData({
      activeTab: 1,
      one: this.data.list.tow
    })

  },
  three() {
    this.setData({
      activeTab: 2,
      one: this.data.list.three
    })

  }
});

acss服务

page{
  background: #fff;
}
.background{
    background: #fff;
}
.box{
  display: flex;
}
.Side{
  width: 20vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: rgb(243, 248, 246);
  color: rgb(94, 94, 94);
  font-size: 14px;
  padding-top: 4vh;
}
.center{
  flex: 1;
}
.sides{
  width: 100%;
  height: 6vh;
  line-height: 6vh;
  text-align: center;
  font-weight: bold;
}
.hearder{
  width: 80vw;
  height:13vh;
  text-align: center;
  line-height:8vh;
  font-size: 14px;
  color: #fff;
  font-weight: bold;
  background: url("../../assets/img/top.png");
  background-size: 100%;
  background-repeat:round;
  margin-bottom: 2vw;
  box-shadow:rgba(0, 0, 0, 0.1) 6px 9px 29px 6px;
}
商品详细布局
.centers{
   display: flex;
   flex-wrap: wrap;
   margin-top:-6vh;
} 
.centerTop{
  width:30vw;
  margin:0 auto;
  height: 31vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 2vw;
  background: #fff;
  border-radius: 2vh;
}
.topLeft{
  width:30vw;
  display: flex;
  justify-content: center;
  align-items:center;
}
.topLeft image{
  height: 25vw;
  border-radius: 10%;
}
.topRight{
  flex: 1;
  height: 25vh;
  display: flex;
  flex-direction: column;
}
.Price{
  width: 100%;
  height: 9vh;
  font-size: 12px;
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:nowrap;
}
.oneTitle{
  height: 7vh;
  width: 100%;
  line-height: 7vh;
  font-size: 12px;
  font-weight: bold;
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:nowrap;
}
.company{
  flex: 1;
  width: 100%;
  line-height: 1vh;
  color: red;
  text-align: right;
}