效果:?
<view class="list-item" v-for="(item,index1) in listData" :key="index1">
<view class="item-title" @click="item.content.length>0?handleToggle(item,index1):''">
<view class="">{{item.title}}</view>
<u-icon :name="item.isToggle ? 'arrow-right' : 'arrow-down'"></u-icon>
</view>
<view class="item-content" v-show="!item.isToggle">
<view class="content-sel" v-for="(c,index2) in item.content" :key="index2">
{{c.title}}
</view>
</view>
</view>
?
listData:[
{
title:"新疆",
isToggle:false,
content:[
{title:"新疆大明礦業(yè)1"},
{title:"新疆大明礦業(yè)2"}
],
},
{
title:"山東",
isToggle:false,
content:[
{title:"山東礦業(yè)1"},
{title:"山東礦業(yè)2"}
],
}
],
handleToggle(item,index1){
item.isToggle = !item.isToggle;
console.log(item.isToggle,"item.isToggle")
}
小程序打印的結(jié)果:值一直為true
?
如果你試過v-if不生效,又試了v-show,還是不行?。∏f不要著急!
不是自己寫的不對,而是uni-app和微信小程序修改值的方式不一致造成的。反正就是不承認(rèn)是自己的問題。
其實(shí)解決的辦法也很簡單,就是要兼容兩端,寫出符合讓兩端都適合的代碼?。
既然這樣直接修改值不行,那就從根本出發(fā)。文章來源:http://www.zghlxwxcb.cn/news/detail-696631.html
handleToggle(item,index1){
// item.isToggle = !item.isToggle;
this.listData.forEach((item,index)=>{
if(index1 === index){
item.isToggle = !item.isToggle;
}
})
console.log(item,"item.isToggle")
}
文章來源地址http://www.zghlxwxcb.cn/news/detail-696631.html
到了這里,關(guān)于uni-app實(shí)現(xiàn)點(diǎn)擊顯示隱藏列表,兼容微信小程序的文章就介紹完了。如果您還想了解更多內(nèi)容,請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!