Taro手风琴组件实现动态下拉框单独控制展开及关闭

先看一下没改之前的效果

点其中一个下拉框其他的一起展开和关闭。

想改成的样式

点其中一个只管这个组件的展开与关闭

代码很简单直接给大家了，就不细讲了

主要代码 js.

// An highlighted block
handleClick (id, value) {
    var a = [this.state.ress]
    for (var i=0;i<this.state.ress;i++){
      if(i==id){
        a[i]=value
      }else{
        a[i]=false
      }
    }
    this.setState({
      open:a 
    })
  }

constructor(props){
    super(props)
    this.state={
      // open: false,
      current: 0,
      findList:[],
      open: [],
      ress: '',

    }
  }

//初始化列表
  init(){
    var findList=[
      {name: '番茄A'},
      {name: '番茄B'},
      {name: '番茄C'}
    ]
    this.setState({
      findList: findList,
      //讲数组总条数赋值
      ress: findList.length
    })
  }
  componentDidMount () { 
    this.init()
   }

手风琴下拉显示 .

{
              findList.map((obj,index) => {
                return(
                  <AtAccordion
                    open={this.state.open[index]}
                    onClick={this.handleClick.bind(this,index)}
                    title={obj.name}
                    isAnimation
                  >
                    <AtTabBar
                      tabList={[
                        { title: '种', id:1, image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png'},
                        { title: '肥', id:2, image: 'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png' },
                        { title: '药', id:3, image: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png' }
                      ]}
                      onClick={this.handleClick1.bind(this)}
                      current={this.state.current}
                    />
                  </AtAccordion>
                )
              })
            }

以上是主要代码 下面将全部代码给大家，这里包括一些下拉框里面组件按钮的点击，大家可以去掉。

import Taro, { Component } from '@tarojs/taro'
import { View, Text, SwiperItem, Image, Swiper } from '@tarojs/components'
import { AtButton, AtGrid, AtActivityIndicator, AtFab, AtTabBar, AtForm, AtInput, AtTextarea, AtImagePicker, AtAccordion, AtList, AtListItem, AtMessage  } from 'taro-ui'
export default class Publish extends Component {

  config = {
    navigationBarTitleText: '观光区'
  }

  constructor(props){
    super(props)
    this.state={
      // open: false,
      current: 0,
      findList:[],
      open: [],
      ress: '',

    }
  }

  // handleClick (value, event) {
  //   console.log(event)
  //   this.setState({
  //     open: value
  //   })
  // }

  //实现每个组件分离开
  handleClick (id, value) {
    var a = [this.state.ress]
    for (var i=0;i<this.state.ress;i++){
      if(i==id){
        a[i]=value
      }else{
        a[i]=false
      }
    }
    this.setState({
      open:a 
    })
  }

  handleClick1 (value) {
    console.log(value)
    this.toUrl(value)
    this.setState({
      current: value
    })
  }
  
  toUrl(val){
    if(val === 0){
      Taro.navigateTo({url:'/pages/visit/species'})
    }
    if(val === 1){

    }
    if(val === 2){

    }
  }
  //初始化列表
  init(){
    var findList=[
      {name: '番茄A'},
      {name: '番茄B'},
      {name: '番茄C'}
    ]
    this.setState({
      findList: findList,
      //讲数组总条数赋值
      ress: findList.length
    })
  }
  componentWillMount () { }

  componentDidMount () { 
    this.init()
   }

  componentWillUnmount () { 
    
   }

  componentDidShow () { }

  componentDidHide () { }

  render () {
    const {findList} = this.state
    return (
      <View className='index'>
        {/* <AtActivityIndicator content='加载中...' color='#13CE66'></AtActivityIndicator> */}
        <AtMessage></AtMessage>
        <AtForm>
          <view className='bheight'>
            <AtInput
              placeholder="请输入农产品名称"
              title="搜索"
            />
            {
              findList.map((obj,index) => {
                return(
                  <AtAccordion
                    open={this.state.open[index]}
                    onClick={this.handleClick.bind(this,index)}
                    title={obj.name}
                    isAnimation
                  >
                    <AtTabBar
                      tabList={[
                        { title: '种', id:1, image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png'},
                        { title: '肥', id:2, image: 'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png' },
                        { title: '药', id:3, image: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png' }
                      ]}
                      onClick={this.handleClick1.bind(this)}
                      current={this.state.current}
                    />
                  </AtAccordion>
                )
              })
            }
          </view>
        </AtForm>
        <View className='at-row at-row__align--end'>
          <View style='height:350px' ></View>
          <View className='at-col'>
            <AtButton type="primary" onClick={()=>Taro.navigateTo({url: '/pages/visit/add'})}>+    添加</AtButton>
            </View>
        </View>
      </View>
    )
  }
}