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