小程序wxml代碼如下:
<block wx:for="{{arrdata}}" wx:key="">
<view class="centent_title" @tap="open_that" data-index="{{index}}">
<view class="title" >{{item.name}}?</view>
<image hidden="{{item.isTrue==true}}" src="/images/ic_down.png"></image>
<image hidden="{{item.isTrue==false}}" src="/images/ic_top111.png"></image>
</view>
<view class="content_detail" hidden="{{!item.isTrue}}">
<text>{{item.content}}</text>
</view>
</block>
js代碼 數據時自己寫的 文字類的就不用請求接口了 哈哈
arrdata: [
{
id: 1,
name: '如何計費?',
content:
'采用分時計費規則,從借出充電寶后開始計時,歸還充電寶后結束,具體價格以租借時頁面展示的計費規則為准,每天封頂20元,計時消費超出20元,按封頂價格計費',
isTrue:false
},
{
id: 2,
name:'歸還充電寶未結束訂單?',
content:'請進行再次掃碼點擊租借按鈕,此刻會退還上一筆押金余額,如需再借請支付,押金退還時間0-2小時,如兩小時后未到賬請聯系客服',
isTrue:false
},
{
id: 3,
name: '為什么充值了,機櫃卻沒有彈出充電寶?',
content:'充值了沒有彈出充電寶,可能充電機櫃和充電寶在使用過程中的磨損,導致無法正常彈出充電寶,請放心,沒有彈出充電寶是不計算費用的,請重新進行一次租借操作',
isTrue:false
},
{
id: 4,
name: '能否請朋友幫忙歸還充電寶?',
content:'當您使用充電寶之后,借給他人使用時,只要您朋友使用完,可以找到附近商店的機櫃插入成功即可,系統會結算充電費用,您將會收到退回押金余額的信息',
isTrue:false
},
{
id: 5,
name: '能否租借多個充電寶?',
content:'暫時不支持一人租借多個充電寶,只能租借一個,租借結束后可以再次租借',
isTrue:false
},
{
id: 6,
name: '押金規則?',
content: `押金充值
在每次使用前需要繳納押金99元,在每次使用完歸還后,會自動結束計費,並在押金中扣除充電費用
押金退還
在用戶歸還充電寶到機櫃之后,系統會結束訂單,並扣除充電費用,剩下的押金余額會原路退回,退款時間為0-2小時之內`,
isTrue:false
},
其中第六個的因為內容較多需要分開的話 我們可以用模板字符串換行 在小程序的text標簽里 換行是可以解析的 大家都知道
事件處理方法:
open_that(event) {
// console.log(event)
this.selectedIndex = event.currentTarget.dataset.index;
for(var i = 0 ; i < this.arrdata.length;i++){
if(this.selectedIndex!=i){
this.arrdata[i].isTrue =false;
}
}
this.arrdata[this.selectedIndex].isTrue = !this.arrdata[this.selectedIndex].isTrue;
},
