微信小程序列表下拉刷新上拉加载实例代码
本文主要和大分享微信小程序实现列表下拉刷新上拉加载,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。
DEMO下载
效果图
原理
利用微信小程序的onPullDownRefresh函数(下拉刷新监听函数)和onReachBottom函数(上拉加载监听函数)监听页面的下拉和上拉动态,从而对页面数据进行修改!
页面配置JSON
enablePullDownRefresh:开启下拉刷新;
onReachBottomDistance:页面上拉触底事件触发时距页面底部距离,单位为px。
{ "enablePullDownRefresh": true, "onReachBottomDistance": 50 }
WXML
<view class="tui-content"> <view class="tui-menu-list" wx:for="{{dataList}}">Item -- {{item}}</view> </view>
JS
此处用setTimeout模拟请求数据;
加载数据限制三次,调用wx.showToast显示没有更多数据。
Page({ data: { dataList: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20], count : 0 }, onPullDownRefresh(){ var self = this; setTimeout(() => { // 模拟请求数据,并渲染 var arr = self.data.dataList, max = Math.max(...arr); for (var i = max + 1; i <= max + 3; ++i) { arr.unshift(i); } self.setData({ dataList: arr }); // 数据成功后,停止下拉刷新 wx.stopPullDownRefresh(); }, 1000); }, onReachBottom(){ var arr = this.data.dataList, max = Math.max(...arr); if (this.data.count < 3) { for (var i = max + 1; i <= max + 5; ++i) { arr.push(i); } this.setData({ dataList: arr, count: ++this.data.count }); } else { wx.showToast({ title: '没有更多数据了!', image: '../../src/images/noData.png', }) } } })
总结
必须在每次数据请求完成后,使用wx.stopPullDownRefresh()停止下拉刷新。
相关推荐:
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



Apabila anda menyemak imbas web pada iPhone anda, kandungan yang dimuatkan disimpan buat sementara waktu selagi apl penyemak imbas kekal terbuka. Walau bagaimanapun, tapak web mengemas kini kandungan dengan kerap, jadi menyegarkan halaman adalah cara yang berkesan untuk mengosongkan data lama dan melihat kandungan yang diterbitkan terkini. Dengan cara ini, anda sentiasa mendapat maklumat dan pengalaman terkini. Jika anda ingin memuat semula halaman pada iPhone, siaran berikut akan menerangkan kepada anda semua kaedah. Cara Muat Semula Halaman Web pada Safari [4 Kaedah] Terdapat beberapa kaedah untuk memuat semula halaman yang anda lihat pada Apl Safari pada iPhone. Kaedah 1: Gunakan Butang Muat Semula Cara paling mudah untuk memuat semula halaman yang telah anda buka di Safari ialah menggunakan pilihan Muat Semula pada bar tab penyemak imbas anda. Jika Safa

Adakah kunci F5 tidak berfungsi dengan betul pada PC Windows 11/10 anda? Kekunci F5 biasanya digunakan untuk menyegarkan desktop atau penjelajah atau memuat semula halaman web. Walau bagaimanapun, sesetengah pembaca kami telah melaporkan bahawa kekunci F5 sedang menyegarkan komputer mereka dan tidak berfungsi dengan betul. Bagaimana untuk mendayakan penyegaran F5 dalam Windows 11? Untuk menyegarkan semula PC Windows anda, hanya tekan kekunci F5. Pada sesetengah komputer riba atau desktop, anda mungkin perlu menekan kombinasi kekunci Fn+F5 untuk menyelesaikan operasi muat semula. Mengapa penyegaran F5 tidak berfungsi? Jika menekan kekunci F5 gagal menyegarkan semula komputer anda atau anda mengalami masalah pada Windows 11/10, ia mungkin disebabkan oleh kekunci fungsi yang dikunci. Punca lain yang berpotensi termasuk papan kekunci atau kekunci F5
![Ralat memuatkan pemalam dalam Illustrator [Tetap]](https://img.php.cn/upload/article/000/465/014/170831522770626.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
Apabila memulakan Adobe Illustrator, adakah mesej tentang ralat memuatkan pemalam timbul? Sesetengah pengguna Illustrator telah mengalami ralat ini semasa membuka aplikasi. Mesej itu diikuti dengan senarai pemalam yang bermasalah. Mesej ralat ini menunjukkan bahawa terdapat masalah dengan pemalam yang dipasang, tetapi ia juga mungkin disebabkan oleh sebab lain seperti fail Visual C++ DLL yang rosak atau fail pilihan yang rosak. Jika anda menghadapi ralat ini, kami akan membimbing anda dalam artikel ini untuk menyelesaikan masalah, jadi teruskan membaca di bawah. Ralat memuatkan pemalam dalam Illustrator Jika anda menerima mesej ralat "Ralat memuatkan pemalam" semasa cuba melancarkan Adobe Illustrator, anda boleh menggunakan yang berikut: Sebagai pentadbir

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

Sarikata tidak berfungsi pada Stremio pada PC Windows anda? Sesetengah pengguna Stremio melaporkan bahawa sari kata tidak dipaparkan dalam video. Ramai pengguna melaporkan mengalami mesej ralat yang mengatakan "Ralat memuatkan sari kata." Berikut ialah mesej ralat penuh yang muncul dengan ralat ini: Ralat berlaku semasa memuatkan sari kata Gagal memuatkan sari kata: Ini mungkin masalah dengan pemalam yang anda gunakan atau rangkaian anda. Seperti yang dikatakan oleh mesej ralat, mungkin sambungan internet anda yang menyebabkan ralat. Jadi sila semak sambungan rangkaian anda dan pastikan internet anda berfungsi dengan baik. Selain itu, mungkin terdapat sebab lain di sebalik ralat ini, termasuk sarikata yang bercanggah, sari kata yang tidak disokong untuk kandungan video tertentu dan apl Stremio yang sudah lapuk. suka

Penyegaran halaman adalah perkara biasa dalam penggunaan rangkaian harian kami Apabila kami melawat halaman web, kadangkala kami menghadapi beberapa masalah, seperti halaman web tidak dimuatkan atau dipaparkan secara tidak normal, dsb. Pada masa ini, kami biasanya memilih untuk memuat semula halaman untuk menyelesaikan masalah, jadi bagaimana untuk memuat semula halaman dengan cepat? Mari kita bincangkan kekunci pintasan untuk muat semula halaman. Kekunci pintasan muat semula halaman ialah kaedah untuk memuat semula halaman web semasa dengan pantas melalui operasi papan kekunci. Dalam sistem pengendalian dan penyemak imbas yang berbeza, kekunci pintasan untuk muat semula halaman mungkin berbeza. Di bawah ini kami menggunakan W biasa

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

Dengan perkembangan Internet, semakin banyak halaman web perlu menyokong pemuatan tatal, dan pemuatan tatal yang tidak terhingga adalah salah satu daripadanya. Ia membolehkan halaman memuatkan kandungan baharu secara berterusan, membolehkan pengguna menyemak imbas web dengan lebih lancar. Dalam artikel ini, kami akan memperkenalkan cara melaksanakan pemuatan skrol tak terhingga menggunakan PHP. 1. Apakah pemuatan skrol tak terhingga? Pemuatan skrol tak terhingga ialah kaedah memuatkan kandungan web berdasarkan bar skrol. Prinsipnya ialah apabila pengguna menatal ke bahagian bawah halaman, data latar belakang diambil secara tak segerak melalui AJAX untuk memuatkan kandungan baharu secara berterusan. Kaedah pemuatan seperti ini
