美文网首页我爱编程
微信小程序 点击给当前添加class名 并让右侧跳动

微信小程序 点击给当前添加class名 并让右侧跳动

作者: 加冰宝贝 | 来源:发表于2018-06-04 00:32 被阅读71次

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
        })
      }
    }
  })
},

相关文章

网友评论

    本文标题:微信小程序 点击给当前添加class名 并让右侧跳动

    本文链接:https://www.haomeiwen.com/subject/kanssftx.html