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