小程序头部tab切换,导航中添加图片

 

 

<scroll-view scroll-x="true"> 
      <view class="banner" scroll-x="true" > 
        <view wx:for="{{optionList}}" wx:key="index" class="banner_Item" > 
          <view bindtap="jumpToOptionDetail" data-positionId="{{item.positionId}}" data-index='{{index}}'>
            <image src="{{item.positionImg}}"  bindtap="jumpToOptionDetail" data-positionId="{{item.positionId}}" data-index='{{index}}'></image>
            <text class="tab_name {{first_id==index?'addStyleMi':''}}"  bindtap="jumpToOptionDetail" data-positionId="{{item.positionId}}" data-index='{{index}}'>{{item.positionName}}</text>
          </view>
        </view> 
      </view> 
    </scroll-view> 

 

 data: {    
    optionList:[], // tab 部位列表
    first_id:0, // tab样式控制
  },

 

jumpToOptionDetail: function(e){
    let positionid = e.target.dataset.positionid
    var index = e.currentTarget.dataset.index;//获取当前点击的元素下标
    this.setData({
      first_id: index,
    })
  },

 

posted @ 2021-05-31 15:29  我是木木呀  阅读(428)  评论(0编辑  收藏  举报