简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah> applet WeChat> Pembangunan program mini> teks badan

实现选项卡功能的微信小程序

小云云
Lepaskan： 2018-05-15 14:15:30
asal
2228 orang telah melayarinya

选项卡浏览是 Internet Explorer 中的一项功能，该功能可让您在一个浏览器窗口中打开多个网站。可以在新选项卡中打开网页，并通过单击要查看的选项卡切换这些网页。通过使用选项卡浏览，可以潜在地减少任务栏上显示的项目数量。本文我们就为大家分享微信小程序实现选项卡功能。

首先看看微信小程序上的选项卡的效果：

原理呢，就是先布局好（这就不必说了吧），然后在上面的每一个选项卡上都定义一个同样的点击事件，然后给每一个组件上绑定一个唯一的标识符，然后点击事件触发的时候，获取到绑定的标识符，判断当前点击的是哪个选项卡，然后再判断下面该显示哪一块，现在上代码：

wxml:

 menu1 menu2
Salin selepas log masuk

wxss:

.menu_box{ display: flex; height: 80rpx; } .menu1,.menu2{ flex: 1; font-size:30rpx; line-height: 80rpx; text-align: center; } .borders{ border-bottom: 4rpx solid #f00; color: #f00; } .tab1,.tab2{ height: 300rpx; background: #23bff3; } .tab2{ background: #ccc; }
Salin selepas log masuk

JS:

menuTap:function(e){ var current=e.currentTarget.dataset.current;//获取到绑定的数据 //改变menuTapCurrent的值为当前选中的menu所绑定的数据 this.setData({ menuTapCurrent:current }); },
Salin selepas log masuk

相关推荐：

微信小程序机器人自动客服功能

微信小程序-仿盒马鲜生

微信小程序视频，音乐，图片组件详解

微信小程序实现密码输入的实例

最全的微信小程序项目实例

Atas ialah kandungan terperinci 实现选项卡功能的微信小程序. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
功能 小程序 程序
sumber：php.cn
Artikel sebelumnya：多宫格抽奖活动的实现 Artikel seterusnya：微信小程序异步处理详解
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Modul tidak ditakrifkan dalam projek Vue Saya baru sahaja mencipta aplikasi Vue baharu dengan menjalankan npmini tvue@latest sepert...
daripada 2023-11-17 12:38:53
0
2
394
Bagaimana untuk menyelesaikan masalah: "Tidak dapat memuatkan sumber: net::ERR_CONNECTION_REFUSED http://localhost:8989/route?...." Terdapat masalah dengan program saya. Ini ialah program tentang sistem maklumat geografi, ...
daripada 2023-11-12 19:34:27
0
1
244
Apakah alternatif kepada pages/_app.js dalam Penghala Aplikasi dalam NextJS? Saya baru sahaja mula menggunakan NextJS dan terdapat penghala baharu yang dipanggil Pengh...
daripada 2023-11-11 09:38:14
0
1
395
Manfaatkan komponen VueJS dalam PHP Saya mahu mencampurkan HTML asas yang dijana oleh komponen Php dan VueJS tanpa perlu mengg...
daripada 2023-11-11 00:01:44
0
2
288
Mengapakah OpenAI Chat GPT (GPT-3.5) API tidak bertindak balas apabila parameter strim ditetapkan kepada palsu? Anda boleh melihat nilai $prompt dalam aplikasi saya di bawah. Apabila saya memasukkan nil...
daripada 2023-11-10 18:39:06
0
1
338
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！