react,taro升序降序

最新推荐文章于 2024-10-14 12:37:39 发布

及时行樂225

最新推荐文章于 2024-10-14 12:37:39 发布

阅读量225

点赞数

文章标签： react.js taro

本文链接：https://blog.csdn.net/weixin_60623799/article/details/130966106

版权

 // 升序降序
  const [tabs, setTabs] = useState([
    { name: '招募中', sort: -1 },
    { name: '进行中', sort: -1 },
    { name: '已结束', sort: -1 },
    { name: '未成立', sort: -1 }
  ])

  // 招募中
  const handleSortButtomClick = (i: any) => {
    setTabs(
      tabs.map((item, index) => {
        return i === index ? {
          ...item,
          sort: item.sort === -1 ? 0 : Math.abs(item.sort - 1)
        } : {
          ...item,
          sort: -1
        }
      })
    )
  }

{/* 升序降序 */}
            <View className='flex flex-align-item-center flex-justify-content-around sort-box'>
              {tabs.map((i, n) => {
                return <View className='flex my-sort flex-align-item-center' key={n} onClick={() => handleSortButtomClick(n)} >
                  <View className={`sort-text ${i.sort > -1 ? 'active-text' : ''}`}>{i.name}</View>
                  {n === 3 ?
                    '' :
                    <View className='my-sort-item' >
                      <View className={`item-son-top ${i.sort === 0 ? 'active' : ''}`}></View>
                      <View className={`item-son-buttom ${i.sort === 0 || i.sort === -1 ? '' : 'active'}`}></View>
                    </View>
                  }
                </View>
              })}
            </View>

 // 升序降序
.sort-box {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  max-width: 710px;
  min-width: 710px;
  margin: auto;
  height: 80px;
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  .sort-text {
    font-size: 28px;
    color: #666667;
  }
  .active-text {
    color: #16ba57;
  }
  .my-sort {
    height: 100%;
    .my-sort-item {
      width: 30px;
      display: flex;
      flex-wrap: wrap;
      margin-left: 10px;
      .item-son-top {
        width: 0;
        height: 0;
        border: 12px solid;
        border-color: transparent transparent #e6e6e6 transparent;
        &.active {
          border-color: transparent transparent #16ba57 transparent;
        }
      }
      .item-son-buttom {
        margin-top: 5px;
        width: 0;
        height: 0;
        border: 12px solid;
        border-color: #e6e6e6 transparent transparent transparent;
        &.active {
          border: 12px solid #16ba57;
          border-color: #16ba57 transparent transparent transparent;
        }
      }
    }
  }
}