vue折叠面板的实现

HTML部分

<view class="content">
            <view class="content-item" v-for="(item,index) in list" :key="index">
                <view class="content-title">
                    <view>{{item.name}}</view>
                    <image @click="isShowText(index)" class="right-img" v-if="!item.showContent"                                     src="../../../../static/images/mobile/jaint-you-ic.png"></image>
                </view>
                <view v-if="item.showContent" class="content-item-text">
                    {{item.text}}
                </view>
            </view>
        </view>

 

JS部分

data(){

   return{

        list:[

             {item:我是段落部分的内容，text:我是内容，showContent：false},

             {title:我是段落部分的内容，text:我是内容，showContent：false}

        ]

    }

},

methods:{

           isShowText(index) {
                for (var i = 0; i < this.list.length; i++) {
                    if(i == index){
                        this.list[index].showContent=!this.list[index].showContent;
                    }else{
                        this.list[i].showContent=false
                    }
                }
            },

}

 

 

如果后台不返回showContent这个字段，你可以自己拿到数据循环添加一个控制显示的字段

css代码就不写了

可以实现以下图片的效果

点击其中一个让其他点开的关闭，点击的那栏展开

，