小程序顶部搜索框怎么实现
这篇文章主要为大家详细介绍了小程序实现搜索框功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
小程序顶部搜索框怎么实现
实现效果如下:
具体代码:
1、WXML文件
<!--搜索框 --> <view class="weui-search-bar"> <view class="weui-search-bar__form"> <!--点击之后,出现input框 --> <view class="weui-search-bar__box"> <icon class="weui-icon-search_in-box" type="search" size="14"></icon> <input type="text" class="weui-search-bar__input" placeholder="搜索" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" /> <!--输入款字数大于0,则显示清除按钮 --> <view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput"> <icon type="clear" size="14"></icon> </view> </view> <!--没点击之前,只是一些文字和图标 --> <label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput"> <icon class="weui-icon-search" type="search" size="14"></icon> <view class="weui-search-bar__text">搜索</view> </label> </view> <!--动态出现的“取消”键 --> <view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消</view> </view>
2、WXSS文件
.weui-search-bar { position: relative; padding: 8px 10px; display: -webkit-box; display: -webkit-flex; display: flex; box-sizing: border-box; background-color: #EFEFF4; border-top: 1rpx solid #D7D6DC; border-bottom: 1rpx solid #D7D6DC; } .weui-icon-search { margin-right: 8px; font-size: inherit; } .weui-icon-search_in-box { position: absolute; left: 10px; top: 7px; } .weui-search-bar__text { display: inline-block; font-size: 14px; vertical-align: middle; } .weui-search-bar__form { position: relative; -webkit-box-flex: 1; -webkit-flex: auto; flex: auto; border-radius: 5px; background: #FFFFFF; border: 1rpx solid #E6E6EA; } .weui-search-bar__box { position: relative; padding-left: 30px; padding-right: 30px; width: 100%; box-sizing: border-box; z-index: 1; } .weui-search-bar__input { height: 28px; line-height: 28px; font-size: 14px; } .weui-icon-clear { position: absolute; top: 0; right: 0; padding: 7px 8px; font-size: 0; } .weui-search-bar__label { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; border-radius: 3px; text-align: center; color: #9B9B9B; background: #FFFFFF; line-height: 28px; } .weui-search-bar__cancel-btn { margin-left: 10px; line-height: 28px; color: #09BB07; white-space: nowrap; font-size: 30rpx; }
3、JS文件
showInput: function () { this.setData({ inputShowed: true }); }, hideInput: function () { this.setData({ inputVal: "", inputShowed: false }); // getList(this); }, clearInput: function () { this.setData({ inputVal: "" }); // getList(this); }, inputTyping: function (e) { //搜索数据 // getList(this, e.detail.value); this.setData({ inputVal: e.detail.value }); }
PHP中文网,大量免费小程序开发教程,欢迎学习!
Atas ialah kandungan terperinci 小程序顶部搜索框怎么实现. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas



Dengan populariti teknologi Internet mudah alih dan telefon pintar, WeChat telah menjadi aplikasi yang sangat diperlukan dalam kehidupan orang ramai. Program mini WeChat membenarkan orang ramai menggunakan program mini secara langsung untuk menyelesaikan beberapa keperluan mudah tanpa memuat turun dan memasang aplikasi. Artikel ini akan memperkenalkan cara menggunakan Python untuk membangunkan applet WeChat. 1. Persediaan Sebelum menggunakan Python untuk membangunkan applet WeChat, anda perlu memasang perpustakaan Python yang berkaitan. Adalah disyorkan untuk menggunakan dua perpustakaan wxpy dan itchat di sini. wxpy ialah mesin WeChat

Melaksanakan kesan flipping kad dalam program mini WeChat Dalam program mini WeChat, melaksanakan kesan flipping kad ialah kesan animasi biasa yang boleh meningkatkan pengalaman pengguna dan daya tarikan interaksi antara muka. Yang berikut akan memperkenalkan secara terperinci cara melaksanakan kesan khas flipping kad dalam applet WeChat dan memberikan contoh kod yang berkaitan. Pertama, anda perlu menentukan dua elemen kad dalam fail susun atur halaman program mini, satu untuk memaparkan kandungan hadapan dan satu untuk memaparkan kandungan belakang Kod sampel khusus adalah seperti berikut: <!--index.wxml-. ->&l

Sesetengah pengguna melihat bahawa kotak carian win10 adalah telus, dan mereka ingin memilikinya, tetapi mereka tidak tahu bagaimana untuk menetapkannya Sekarang terdapat kaedah yang sangat mudah. Hanya memuat turun perisian dari kedai win10 bagaimana untuk menetapkan kotak carian win10 menjadi kaedah telus. Kotak carian win10 adalah telus: 1. Klik kanan bar tugas dan pilih Cari untuk menukar kotak carian menjadi ikon carian. 2. Buka gedung aplikasi. 3. Cari perisian TranslucentTB. (Anda boleh memilih untuk memuat turun versi Cina) 4. Selepas memuat turun dan memasang. 5. Buka TranslucentTB, yang boleh dilihat dalam bar tugas di sebelah kanan bawah. 6. Tetapkannya kepada lutsinar sepenuhnya.

Menurut berita dari laman web ini pada 31 Oktober, pada 27 Mei tahun ini, Ant Group mengumumkan pelancaran "Projek Pemilihan Watak Cina", dan baru-baru ini membawa kemajuan baharu: Alipay melancarkan program mini "Pemilihan Watak Cina-Watak Biasa" untuk mengumpul koleksi daripada masyarakat Watak nadir menambah pustaka aksara jarang dan memberikan pengalaman input yang berbeza untuk aksara jarang untuk membantu memperbaik kaedah input aksara jarang dalam Alipay. Pada masa ini, pengguna boleh memasukkan applet "Watak Tidak Biasa" dengan mencari kata kunci seperti "Pengambilan aksara Cina" dan "aksara jarang". Dalam program mini, pengguna boleh menghantar gambar aksara jarang yang belum dikenali dan dimasukkan oleh sistem Selepas pengesahan, jurutera Alipay akan membuat entri tambahan ke dalam perpustakaan fon. Laman web ini mendapati bahawa pengguna juga boleh mengalami kaedah input pemisahan perkataan terkini dalam program mini Kaedah input ini direka untuk perkataan yang jarang dengan sebutan yang tidak jelas. Pembongkaran pengguna

Apabila pengguna setiap hari menggunakan kotak carian win10 untuk mencari kandungan dan perisian yang diperlukan, mereka mendapati masalah bahawa kotak carian win10 berwarna kelabu dan tidak boleh digunakan Secara amnya, ia ditetapkan untuk dilumpuhkan dalam kumpulan dasar komputer penyelesaian kepada kotak carian win10 yang berwarna kelabu dan tidak boleh digunakan. Kotak carian win10 berwarna kelabu dan tidak boleh digunakan Penyelesaian: 1. Tekan kekunci win+R untuk membuka larian dan masukkan gpedit.msc. 2. Dalam Editor Dasar Kumpulan Tempatan - pilih Templat Pentadbiran - pilihan Komponen Windows. 3. Cari pilihan Cari-Benarkan Cortana. 4. Selepas dibuka, pilih Dilumpuhkan pada halamannya, klik OK, dan mulakan semula komputer.

Bagaimana uniapp boleh mencapai penukaran pantas antara program mini dan H5 memerlukan contoh kod khusus Dalam beberapa tahun kebelakangan ini, dengan perkembangan Internet mudah alih dan populariti telefon pintar, program mini dan H5 telah menjadi bentuk aplikasi yang sangat diperlukan. Sebagai rangka kerja pembangunan merentas platform, uniapp boleh dengan cepat merealisasikan penukaran antara program kecil dan H5 berdasarkan set kod, meningkatkan kecekapan pembangunan. Artikel ini akan memperkenalkan cara uniapp boleh mencapai penukaran pantas antara program mini dan H5, dan memberikan contoh kod khusus. 1. Pengenalan kepada uniapp unia

Idea pelaksanaan x01 Penubuhan pelayan Pertama, pada bahagian pelayan, soket digunakan untuk menerima mesej Setiap kali permintaan soket diterima, utas baharu dibuka untuk menguruskan pengedaran dan penerimaan mesej Pada masa yang sama, terdapat pengendali untuk menguruskan semua Thread, dengan itu merealisasikan pemprosesan pelbagai fungsi ruang sembang Penubuhan pelanggan x02 adalah lebih mudah daripada pelayan Fungsi pelanggan hanya untuk menghantar dan menerima mesej, dan untuk memasukkan aksara tertentu mengikut peraturan tertentu. Ini membolehkan penggunaan fungsi yang berbeza, di sisi pelanggan, anda hanya perlu menggunakan dua utas, satu didedikasikan untuk menerima mesej, dan yang lain didedikasikan untuk menghantar mesej adalah kerana, hanya

Pengguna mengalami masalah tersekat apabila menggunakan carian Win10, menyebabkan fungsi carian tidak tersedia Selagi mereka terpaksa menutup dan memulakan semula, bagaimana untuk menyelesaikan masalah ini? Mari kita lihat penyelesaian kepada kotak carian Win10 yang tersekat! Kotak carian win10 tersekat: 1. Ia tersekat selepas mengklik carian Mungkin ia tidak bertindak balas. Anda boleh menunggu seketika. 2. Jika ia masih tersekat selepas menunggu seketika, klik kanan bar tugas untuk membuka Pengurus Tugas dan mulakan semula Windows Explorer. 3. Buka tetapan carian, matikan carian selamat di bawah kebenaran dan sejarah, dan matikan carian awan.
