小程序tab选项卡切换及picker的添加

wxml文件：

  <!-- tab切换卡 -->
  <view class="like-tab {{menuFixed ? 'menu-bar fixed' : 'menu-bar'}}">
      <block wx:for="{{changeTabList}}" wx:for-index="index" wx:for-item="item" wx:key="index">
          
          <view class="{{curTabIdx == index ? 'tab current' : 'tab'}}" data-index="{{index}}" bindtap="changeTab" >
            {{item.id == 4 ? '' : item.value}}
              <picker wx:if="{{item.id == 4}}"
              bindchange="bindPickerPriceChange" value="{{pickerPriceIndex}}" range="{{pickerPrice}}" range-key="value">
              <view class="picker">
                价格:{{pickerPrice[pickerPriceIndex].value}}
              </view>
            </picker>
          </view>
          <image bindtap="showSearch" class="icon-search" src="/image/icon_search.png"></image>
           
      </block>
  </view>

wxss文件

/* 切换卡 */
.like-tab {
    padding: 14rpx 0;
    margin-bottom: 14rpx;
    font-size: 24rpx;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 30rpx;
    position: relative;
}

.like-tab .tab {
  position: relative;
    display: inline-block;
    min-width: 120rpx;
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
    background-color: #1F1F1F;
    color: #999;
    border-radius: 25rpx
}
.like-tab .tab.current {
    background-color: #2D2D2D;
    color: white
}
.like-tab .icon-search {
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translate(0, -50%);
}

js文件

data: {
    curTabIdx: 0,
    curTabId:1,
    changeTabList:[
      { value: "全部", id: 1 },
      { value: "特卖", id: 2 },
      { value: "热度", id: 3 },
      { value: "新品", id: 1 },
      { value: "价格", id: 4 },
    ],
    pickerPrice: [{ value: '降序', id: 4 }, { value: '升序', id: 5 }],
    pickerPriceIndex: 0,
  },
changeTab(e) {
    if (e.currentTarget.dataset.index == this.data.curTabIdx) return
    this.setData({
      curTabIdx: e.currentTarget.dataset.index,
    })
    this.setData({
      curTabId: this.data.changeTabList[this.data.curTabIdx].id
    })
    console.log('curTabId:' + this.data.curTabId)
  },
  bindPickerPriceChange(e){
    this.setData({
      pickerPriceIndex: e.detail.value,
      curTabId: this.data.pickerPrice[parseInt(e.detail.value)].id,
      curTabIdx: 4,
    })
    console.log(this.data.curTabId)
  },

来源：https://blog.csdn.net/qq_20896193/article/details/102757654

标签

选项卡

data

tab