Rumah applet WeChat Pembangunan program mini 小程序顶部搜索框怎么实现

小程序顶部搜索框怎么实现

Mar 26, 2020 pm 02:21 PM
Program mini kotak carian atas

这篇文章主要为大家详细介绍了小程序实现搜索框功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

小程序顶部搜索框怎么实现

小程序顶部搜索框怎么实现

实现效果如下:

2019712163542622.gif

具体代码:

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>
Salin selepas log masuk

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;
}
Salin selepas log masuk

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
});
}
Salin selepas log masuk

PHP中文网,大量免费小程序开发教程,欢迎学习!

Atas ialah kandungan terperinci 小程序顶部搜索框怎么实现. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bangunkan applet WeChat menggunakan Python Bangunkan applet WeChat menggunakan Python Jun 17, 2023 pm 06:34 PM

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

Laksanakan kesan flip kad dalam program mini WeChat Laksanakan kesan flip kad dalam program mini WeChat Nov 21, 2023 am 10:55 AM

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: &lt;!--index.wxml-. -&gt;&l

Cara uniapp mencapai penukaran pantas antara program mini dan H5 Cara uniapp mencapai penukaran pantas antara program mini dan H5 Oct 20, 2023 pm 02:12 PM

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

Bagaimana untuk menyelesaikan masalah bahawa kotak carian win10 berwarna kelabu dan tidak boleh digunakan Bagaimana untuk menyelesaikan masalah bahawa kotak carian win10 berwarna kelabu dan tidak boleh digunakan Jan 03, 2024 am 11:07 AM

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 untuk menetapkan bar carian Windows 10 menjadi telus Bagaimana untuk menetapkan bar carian Windows 10 menjadi telus Jan 09, 2024 pm 09:46 PM

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.

Alipay melancarkan program mini 'Chinese Character Picking-Rare Characters' untuk mengumpul dan menambah pustaka aksara yang jarang ditemui Alipay melancarkan program mini 'Chinese Character Picking-Rare Characters' untuk mengumpul dan menambah pustaka aksara yang jarang ditemui Oct 31, 2023 pm 09:25 PM

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

Bagaimana untuk mengendalikan pendaftaran program mini Bagaimana untuk mengendalikan pendaftaran program mini Sep 13, 2023 pm 04:36 PM

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.

Bagaimana untuk melumpuhkan kotak carian dalam bar tugas win10 Bagaimana untuk melumpuhkan kotak carian dalam bar tugas win10 Dec 28, 2023 am 08:17 AM

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.

See all articles