小程序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;
},