Rumah >hujung hadapan web >html tutorial >Applet WeChat melaksanakan pengembangan item senarai dan fungsi lipatan
Aplet WeChat melaksanakan fungsi kembangkan dan runtuh item senarai, yang memerlukan contoh kod khusus
Pengenalan:
Aplet WeChat ialah aplikasi merentas platform yang berkembang pesat Ia menyediakan API dan komponen yang kaya yang boleh Dibangunkan dengan mudah dan menerbitkan program kecil untuk memenuhi keperluan pengguna yang berbeza. Apabila membangunkan program kecil, kami sering menghadapi senario di mana senarai perlu dipaparkan, dan kadangkala senarai itu terlalu panjang, mengakibatkan paparan halaman yang rumit Untuk meningkatkan pengalaman pengguna dan estetika antara muka, kami boleh mempertimbangkan untuk menggunakan senarai fungsi kembangkan dan runtuhkan item. Artikel ini akan memperkenalkan cara melaksanakan fungsi kembangkan dan runtuh item senarai dalam applet WeChat dan memberikan contoh kod khusus.
1. Idea pelaksanaan:
Pertama, kita perlu mentakrifkan senarai dalam fail wxml dan menetapkan pembolehubah untuk mengawal keadaan item senarai yang dikembangkan dan diruntuhkan. Kemudian, dengan mengikat peristiwa klik, ubah suai nilai pembolehubah untuk mencapai kesan mengembang dan melipat. Akhir sekali, maklumat terperinci dipaparkan atau disembunyikan dengan mengubah suai gaya paparan secara dinamik mengikut keadaan item senarai yang dikembangkan dan diruntuhkan.
2. Contoh kod:
<view class="list"> <view class="item" wx:for="{{list}}" wx:key="{{index}}"> <view class="title" bind:tap="toggleItem">{{item.title}}</view> <view class="content" wx:if="{{item.isExpanded}}"> <!-- 详细信息内容 --> <text class="info">{{item.info}}</text> </view> </view> </view>
Page({ data: { list: [ {title: "列表项1", info: "列表项1的详细信息", isExpanded: false}, {title: "列表项2", info: "列表项2的详细信息", isExpanded: false}, {title: "列表项3", info: "列表项3的详细信息", isExpanded: false}, ... ], }, toggleItem: function(event) { var index = event.currentTarget.dataset.index; var list = this.data.list; list[index].isExpanded = !list[index].isExpanded; this.setData({ list: list }); } })
Atas ialah kandungan terperinci Applet WeChat melaksanakan pengembangan item senarai dan fungsi lipatan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!