实现选择分类

实现发帖选择tags，实现分类的功能，方便后续搜索相关内容

wxml

<view class='container'>
   <text class="title">选择分区</text>
   <picker bindchange="changeMultiPicker" mode = "multiSelector" value="{{multiIndex}}" range="{{multiArray}}">
     <view class="tui-picker-detail">
     {{multiArray[0][multiIndex[0]]}}-{{multiArray[1][multiIndex[1]]}}
    </view>
   </picker>
</view>

wxss

.container{
  width: 750rpx;
  height: 1560rpx;
  background: linear-gradient(to right, #1EABDE, #196BE3);
  display: flex;
  flex-direction: column;
  align-items: center;
}
 
.title {
  font-size: 48rpx;
  color: #fff;
  font-weight: 500;
}

可选择的内容 数据源 在page中设定

/**
   * 页面的初始数据
   */
  data: {
    region: ["数学", "英语", "物理"],
    countryIndex:0,
    multiArray: [["高数Ⅰ","高数Ⅱ","线性代数","概率论与数理统计"], [ 9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]],
    multiIndex: [10, 8],
  },

给组件添加事件，以获取选择的内容

  <picker mode = "selector" value="{{countryIndex}}" range="{{region}}" bindchange="fetchData">
    <view class="tui-picker-detail">{{region[countryIndex]}}</view>
   </picker>

其中bindChange=“fatchData”

 fetchData:function(event){
    this.setData({countryIndex: event.detail.value });
  },

参考