html
<view class='box'>
<view class='left'>
<!--利用三目运算符将text本来的css样式 “{{ ‘left-box’ 进行判断 传过来的Index ==index ?(真结果)' 一个名':‘’}} ” , 最后你点击的那个变什么色的class名为 “left-box你自己起的那个名字” , 将当text的index利用leftTap点击事件 传到当前的js文件 , 只要是传数据 必须有data-item=“{{item}}”才能t传入你想要数据 data-index=“{{index}}” data可以绑定任何数据 index(你可以起任何一个名字 例 name) -->
<text class="left-box{{Index==index ? 'leftactive':''}}" wx:for='{{left}}' wx:key="index" data-index="{{index}}" bindtap='leftTap'>{{item}}</text>
</view>
<view class='right'>
<view class="wrap">
<swiper autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"current="{{currentSwiper}}" bindchange="swiperChange" circular="{{circular}}" class='swiper'>
<block wx:for="{{imgs}}" wx:key="item">
<swiper-item>
<image src="{{item.url}}" class="slide-image" />
</swiper-item>
</block>
</swiper>
<!--重置小圆点的样式 -->
<view class="dots">
<block wx:for="{{imgs}}" wx:key="item">
<view class="dot{{index == currentSwiper ? ' active' : ''}}"></view>
</block>
</view>
</view>
<view class='right1'>
<view class='right-box' wx:for="{{listdata}}" wx:key='index' data-name="{{item.name}}" bindtap='Shopdetail'>
<image src='{{ item.icon }}'></image>
<text class='text'>{{ item.name }}</text>
</view>
</view>
</view>
</view>
js
leftTap: function (event) {
// target 触发事件的源组件。
// currentTarget 事件绑定的当前组件。
console.log(event.currentTarget.dataset);
let list=[];
// 设置index值
this.setData({
Index: event.currentTarget.dataset.index
})
// console.log(this.data.Index);
wx.request({
url: 'https://api.it120.cc/small4/shop/goods/category/all',
success: (res)=> {
// console.log(res.data);
if (event.currentTarget.dataset.index == 0) {
this.setData({
listdata: res.data.data
//res代表success函数的事件对,data是固定的,stories是是上面json数据中stories
})
} else if (event.currentTarget.dataset.index == 1){
for (let i = 0; i < res.data.data.length; i++) {
if (res.data.data[i].name == '居家' || res.data.data[i].name == '床品件套' || res.data.data[i].name == '家具' || res.data.data[i].name == '行李箱' || res.data.data[i].name == '电器' || res.data.data[i].name == '生活电器'){
list.push(res.data.data[i])
}
}
this.setData({
listdata: list
//res代表success函数的事件对,data是固定的,stories是是上面json数据中stories
})
} else if (event.currentTarget.dataset.index == 2 ){
for (let i = 0; i < res.data.data.length; i++) {
if (res.data.data[i].name == '配件装饰' || res.data.data[i].name == '钱包及小皮件') {
list.push(res.data.data[i])
}
}
this.setData({
listdata: list
//res代表success函数的事件对,data是固定的,stories是是上面json数据中stories
})
} else if (event.currentTarget.dataset.index == 3){
for (let i = 0; i < res.data.data.length; i++) {
if (res.data.data[i].name == '服装' || res.data.data[i].name == '衬衫' || res.data.data[i].name == "T恤" || res.data.data[i].name =="牛仔") {
list.push(res.data.data[i])
}
}
this.setData({
listdata: list
//res代表success函数的事件对,data是固定的,stories是是上面json数据中stories
})
}
}
})
},
网友评论