在微信小程序上,幫助中心界面實現類似手風琴案例

wxml

<view class="container"><block wx:for="{{arrdata}}" wx:key="index"><view class="centent_title" data-index="{{index}}" bindtap="onOpen"><view class="title" >{{item.name}}?</view><image wx:if="{{item.isTrue==true}}" src="/public/orther_img/ic_down.png"></image><image wx:if="{{item.isTrue==false}}" src="/public/orther_img/ic_top.png"></image></view><view class="content_detail" wx:if="{{item.isTrue}}"><text>{{item.content}}</text></view></block> </view>

wxss

/**index.wxss**/ .container {width: 100%;height: 100%;background-color: #ffffff; } .centent_title{width: 100%;height: 80rpx;line-height: 80rpx;display: flex;justify-content: space-between;align-items: center;border-bottom: 2rpx solid #eeeeee; } .title{font-size: 24rpx;color: #999999;margin-left: 30rpx; } .centent_title image{width: 20rpx;height: 20rpx;margin-right: 30rpx; } .content_detail{padding: 20rpx;font-size: 24rpx;text-indent: 2em; }

js

const app = getApp() Page({/*** 頁面的初始數據*/data: {arrdata: [{id: 1,name: "如何下單",content:"點擊下單后，可以直接點擊加入購物車到購物車頁面，再直接點擊下單，微信支付付款即可；也可以直接點擊立即下單，微信支付付款即可",isTrue: false},{id: 2,name:"付款成功未結束訂單",content:"直接返回鍵回去看付款成功頁面，如付款成功頁面未顯示訂單,請聯系客服",isTrue: false},{id: 3,name: "為什么商品加入購物車了，購物車頁面卻看不到商品",content:"商品加入購物車了，購物車頁面卻看不到商品，可能商品點擊的時候未觸發按鈕，導致購物車頁面卻看不到商品，請重新進行一次下單操作",isTrue: false}],},onOpen(e) {this.selectedIndex = e.currentTarget.dataset.index;this.data.arrdata[this.selectedIndex].isTrue = !this.data.arrdata[this.selectedIndex].isTrue;this.setData({arrdata:this.data.arrdata})}, })

總結

以上是生活随笔為你收集整理的在微信小程序上,帮助中心界面实现类似手风琴案例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。