微信小程序类别与产品展示页面

wxml：

<view class="text">
   <view>
      <view class="top">
        <view class="top-left">
             (上海虹桥店)>
        </view>
        <view class="top-right">
            点击添加"..."到我的小程序，微信首页下拉即可快速访问
        </view>
      </view>
      <view class="content">
         <view class="content-nav">
            <view bindtap="show4" data-index="1" class="car-list {{index==1?'active':''}}">1</view>
            <view bindtap="show5" data-index="2" class="car-list {{index==2?'active':''}}">2</view>
            <view bindtap="showyx" data-index="3" class="car-list {{index==3?'active':''}}">3</view>
        </view>
        <view class="content-right">
            <view class="right-detail" wx:for="{{detailList}}" >
                <view class="car-detail-img" >
                  <image src="{{item.img}}" alt="ruse汽车" ></image>
               </view>
               <view class="car-detail">
                  <view class="car-detail-title">{{item.title}}</view>
                  <view  class="car-detail-detail">{{item.detail}}</view>
                  <view  class="car-detail-money">{{item.money}}</view>
               </view>
            </view>
        </view>
      </view>
      <view class="button">
         <button class="buy" bindtap="buy">立即购买</button>
       </view>
   </view>
</view>

less:

.text {
    width: 100%;
    height: 100%;

    .active {
        background-color: #ffffff;
        border-left: 10rpx solid #74003C;

    }

    .top {
        margin: auto;
        width: 95%;
        height: 90rpx;
        padding: 0 10rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .top-left {
            font-size: 30rpx;
        }

        .top-right {
            width: 45%;
            height: 60rpx;
            border: 2rpx solid #999999;
            border-radius: 5rpx;
            font-size: 20rpx;
        }
    }

    .content {
        width: 100%;
        height: 900rpx;
        display: flex;

        .content-nav {
            width: 30%;
            height: 900rpx;
            background-color: #ededed;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;

            .car-list {
                width: 90%;
                height: 90rpx;
                line-height: 90rpx;
                font-size: 30rpx;
                padding-left: 10rpx;
            }
        }

        .content-right {
            width: 70%;
            height: 900rpx;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;

            .right-detail {
                width: 90%;
                height: 150rpx;
                border-bottom: 1rpx solid #666666;
                display: flex;
                padding: 20rpx;

                .car-detail-img {
                    width: 150rpx;
                    height: 150rpx;

                    image {
                        width: 150rpx;
                        height: 150rpx;
                    }
                }

                .car-detail {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    align-items: flex-start;
                    padding-left: 20rpx;

                    .car-detail-title {
                        font-size: 32rpx;
                    }

                    .car-detail-detail {
                        font-size: 26rpx;
                    }

                    .car-detail-money {
                        font-size: 26rpx;
                    }
                }
            }
        }
    }

    .button {
        position: fixed;
        bottom: 50rpx;
        padding: 0 20rpx;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;

        .buy {
            background-color: #74003C;
            color: #ffffff;
        }
    }
}

js:

const app = getApp()
const options = {
  data: {
    index:"0",
    detailList: [{
        img: 'http://it.oss.qorosauto.com/qoros/mina/banner5s.jpg',
        title: "经典款",
        detail: "买不了上当",
        money: "400000"
      },
      {
        img: 'http://it.oss.qorosauto.com/qoros/mina/banner5s-hero.jpg',
        title: "必买款",
        detail: "买不了吃亏",
        money: "180000"
      },
    ],
    detailList4: [{
        img: 'http://it.oss.qorosauto.com/qoros/mina/banner5s-iphonex.jpg',
        title: "蔚蓝款",
        detail: "蔚蓝款为20年新出色款，大气高端",
        money: "100000"
      },
      {
        img: 'http://it.oss.qorosauto.com/qoros/mina/banner5s-hero-iphonex.jpg',
        title: "暗红款",
        detail: "暗红款设计时尚",
        money: "180000"
      },
      {
        img: 'http://it.oss.qorosauto.com/qoros/mina/banner5s-iphonex.jpg',
        title: "深咖款",
        detail: "深咖款低调沉稳",
        money: "200000"
      },
      {
        img: 'http://it.oss.qorosauto.com/qoros/mina/banner5s-hero-iphonex.jpg',
        title: "暗黑款",
        detail: "暗黑款百搭大气，适用于多种场合",
        money: "103780"
      },
    ],
    detailList5: [{
      img: 'http://it.oss.qorosauto.com/qoros/mina/banner5s-iphonex.jpg',
      title: "5系列",
      detail: "新款",
      money: "100000"
    }],
    detailListyx: [{
      img: 'http://it.oss.qorosauto.com/qoros/mina/banner5s-hero.jpg',
      title: "英雄系列",
      detail: "新款",
      money: "100000"
    }],
  },
  onLoad() {
    wx.setNavigationBarTitle({
      title: '详情页'
    })
  },
  buy() {
    wx.navigateTo({
      url: '../agreement/index'
    })
  },
  show4() {
    this.setData({
      detailList: this.data.detailList4,
      index:"1"
    })
  },
  show5() {
    this.setData({
      detailList: this.data.detailList5,
      index:"2"
    })
  },
  showyx() {
    this.setData({
      detailList: this.data.detailListyx,
      index:"3"
    })
  }
}
app.makePage(options)

左导航，右产品。