微信小程序：制作商城分类效果
2019-07-06 本文已影响0人
冰河世纪_d2d7
废话不多说先上效果图：
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,
})
},
})
