小程序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; },
转载于:https://www.cnblogs.com/PinkYun/p/9939591.html
