小程序顶部搜索框怎么实现
这篇文章主要为大家详细介绍了小程序实现搜索框功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
小程序顶部搜索框怎么实现
实现效果如下:
具体代码:
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

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

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.

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

Langkah-langkah operasi pendaftaran program mini: 1. Sediakan salinan kad pengenalan peribadi, lesen perniagaan korporat, kad pengenalan orang sah dan bahan pemfailan lain 2. Log masuk ke latar belakang pengurusan program mini 3. Masukkan halaman tetapan program mini; Pilih " "Basic Settings"; 5. Isikan maklumat pemfailan; 6. Muat naik bahan pemfailan; 7. Hantar permohonan pemfailan; 8. Tunggu keputusan semakan. Jika pemfailan tidak lulus, buat pengubahsuaian berdasarkan alasan dan serahkan semula permohonan pemfailan; 9. Operasi susulan bagi pemfailan ialah Can.

Kotak carian bar tugas win10 ialah alat carian yang sangat mudah digunakan, tetapi ramai pengguna tidak biasa atau tidak boleh menggunakannya Jika mereka ingin mematikannya, mereka hanya perlu klik kanan pada ruang kosong pada bar tugas dan cari fungsi carian untuk mematikannya. Cara menutup kotak carian pada bar tugas win10 1. Pertama, klik kanan pada ruang kosong pada bar tugas, seperti yang ditunjukkan dalam rajah: 2. Dalam antara muka, klik pilihan "Cari" dan pilih Sembunyikan, seperti yang ditunjukkan dalam rajah: 3. Lengkapkan tetapan di atas Kotak carian tersembunyi. PS: Jika kotak carian tidak boleh ditutup, ini mungkin masalah dengan sistem anda, dan anda perlu memasang semula sistem untuk menyelesaikannya.
