Taro手風琴元件實作動态下拉框單獨控制展開及關閉

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>
    )
  }
}