微信小程序：制作商城分类效果

废话不多说先上效果图：

image

   ##  其实很简单，分成三个盒子：主盒子，左盒子，右盒子

<!-- 主盒子 -->

<view class="container">

<!-- 左盒子 -->

  <view class='left'>

    <view class='{{left_index==item.id?"activityId":""}}' wx:for="{{list}}" wx:key="key" bindtap='bt_left' data-id="{{item}}">{{item.title}}</view>

  </view>

  <!-- 右盒子 -->

  <view class='right'>

  <image src='{{img_src}}'></image>

  </view>

</view>

js代码 ： 点击左边item 给数据传给右边就搞定～ 写完手工

//logs.js

const util = require('../../utils/util.js')

Page({

  data: {

    left_index: 1,

    img_src:"",

    list: [{

        id: 1,

        title: "流川枫",

        url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1562330949283&di=a7da685bfff6a688f21f89a04661005c&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201505%2F25%2F20150525224003_AUYdj.jpeg"

      },

      {

        id: 2,

        title: "樱木花道",

        url: "https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=beec3a7cd51373f0e13267cdc566209e/a8773912b31bb05197b6112f327adab44aede023.jpg"

      },

      {

        id: 3,

        title: "仙道彰",

        url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1562331098316&di=2c7f18a59b708ef66ec89f0b1044f357&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201611%2F08%2F20161108123616_saNrf.thumb.700_0.jpeg"

      },

      {

        id: 4,

        title: "三井寿",

        url: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4030538769,3441586783&fm=26&gp=0.jpg"

      },

      {

        id: 5,

        title: "赤木刚宪",

        url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1562331158454&di=44c7622de7e8c737ed08bc1bf7c825ff&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20170915%2F5e3242002e4e45f98ad7e67bbf578385.jpeg"

      },

      {

        id: 6,

        title: "宫城良田",

        url: "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3044862175,2281880056&fm=26&gp=0.jpg"

      },

    ]

  },

  // 第一次进来加载

  onLoad: function() {

    this.setData({

      left_index:this.data.list[0].id,

      img_src: this.data.list[0].url,

    })

  },

  // 点击左选项

  bt_left(e) {

    this.setData({

      left_index: e.currentTarget.dataset.id.id,

      img_src:e.currentTarget.dataset.id.url,

    })

  },

})