這篇文章主要介紹了微信小程序 scroll-view組件實現列表頁實例代碼的相關資料,scroll-view組件介紹scroll-view是微信小程序提供的可滾動視圖組件,其主要作用是可以用來做手機端經常會看到的上拉加載 ，需要的朋友可以參考下
scroll-view組件介紹
scroll-view是微信小程序提供的可滾動視圖組件,其主要作用是可以用來做手機端經常會看到的上拉加載下拉刷新列表頁!下面就以<搖出微笑>為例來講解一下這個組件的使用吧!
為app導入新page頁面
首先需要為我們的小程序導入新的page頁面,項目根目錄打開app.json這個項目配置文件在里面的pages數組添加"pages/allJoke/allJoke"然后設置底部導航在"tabBar"的列表項("list")添加:
{
"text": "列表",
"pagePath": "pages/allJoke/allJoke",
"iconPath": "images/note.png",
"selectedIconPath": "images/noteHL.png"
},如果大家要了解具體配置的含義可以參考小程序配置文檔這里不再贅述!
json配置頁
接下來就是我們新建page的配置頁了,在page目錄下新建一個目錄如alljoke,再在這個目錄下新建一個allJoke.json,復制下面代碼到這個文件里面:
{
"navigationBarTitleText": "笑話集錦",
"enablePullDownRefresh": true
}因為我們待會做下拉刷新時需要用到小程序提供的onPullDownRefresh方法,所以在配置項里面必須開啟enablePullDownRefresh.另外一個選項是頁頂標題大家隨意設置也可以不用設置!
wxml視圖頁
好輪到視圖頁了,同樣的在alljoke目錄下新建一個alljoke.wxml頁面.wxml是小程序自創(chuàng)的一個視圖頁文檔類型,其寫法類似html,對于前端來說入門沒有難度.需要詳細了解的可以去閱讀wxml文檔.同樣復制以下代碼到alljoke.wxml里面
<view>
<view>
<scroll-view class="scroll" scroll-top="{{scrollTop}}" style="height:580px;" scroll-y="true" bindscroll="scrll" bindscrolltolower="loadMore">
<view class="block" wx:for="{{listLi}}" wx:for-item="item">
<text>{{item.text}}</text>
</view>
</scroll-view>
</view>
<view class="top" hidden="{{hidden}}" catchtap="goTop">?</view>
</view>大家可以看到,我們的主角scroll-view也在這里隆重登場了!帶過來的是一長串配置,就讓我來為大家講一下這些配置的作用吧!
| 配置項 | 作用 |
|---|---|
| scroll-top | 設置豎向滾動條的位置,要注意一點如果設置的值沒有變化,組件不會渲染! |
| scroll-y | 允許縱向滾動 |
| bindscroll | 滾動時觸發(fā)的回調函數 |
| bindscrolltolower | 滾動到底部觸發(fā)的事件 |
用到的選項都列出來了,還有一點需要大家特別注意的:
使用豎向滾動條時必須為組件設置一個固定高度就是上面代碼style里面設置的高!切記切記!
更多資料請閱讀微信小程序scroll-view組件文檔
wxss樣式
同樣在alljoke目錄下面新建allJoke.wxss文件,小程序的樣式和傳統(tǒng)css差不多大家可以根據自己喜好自行設計,這里我簡單做了一下樣式比較丑大家將就著用吧.(題外話:受不了的自己動手豐衣足食)
.block {
border: 8px solid #71b471;
margin: 20rpx 20rpx;
padding: 10rpx;
background-color: #fff;
border-radius: 20rpx;
text-align: center;
}
.top {
width: 100rpx;
height: 100rpx;
line-height: 100rpx;
background-color: #fff;
position: fixed;
bottom: 40rpx;
right: 20rpx;
text-align: center;
font-size: 50rpx;
opacity: .8;
border-radius: 50%;
border: 1px solid #fff;
}小程序文檔中關于樣式的介紹
邏輯部分
來到最后也是最重要的邏輯部分了!老規(guī)矩alljoke目錄下新建allJoke.js文件,先貼代碼再慢慢講解:
Page({
data:{
listLi:[],
page:1,
scrollTop:0,
done: false,
hidden: true
},
onLoad:function(options){
this.getList(1);
},
onPullDownRefresh: function(){
wx.showToast({
title: '加載中',
icon: 'loading'
});
this.getList(1,true);
},
getList: function(page, stopPull){
var that = this
wx.request({
url: 'https://wechat.sparklog.com/jokes',
data: {
page: page,
per: '20'
},
method: 'GET',
success: function(res){
if(page===1){
that.setData({
page: page+1,
listLi: res.data,
done: false
})
if(stopPull){
wx.stopPullDownRefresh()
}
}else{
if(res.data<20){
that.setData({
page: page+1,
listLi: that.data.listLi.concat(res.data),
done: true
})
}else{
that.setData({
page: page+1,
listLi: that.data.listLi.concat(res.data)
})
}
}
},
})
},
loadMore: function(){
var done = this.data.done;
if(done){
return
}else{
wx.showToast({
title: '加載中',
icon: 'loading',
duration: 500
});
var page = this.data.page;
this.getList(page)
}
},
scrll: function(e){
var scrollTop = e.detail.scrollTop
if(scrollTop>600){
this.setData({
scrollTop: 1,
hidden: false
})
}else{
this.setData({
scrollTop: 1,
hidden: true
});
}
},
goTop: function(){
this.setData({
scrollTop:0,
hidden: true
})
}
})大家可以看到首先我們需要用page()函數注冊頁面,然后在data里面定義一些初始化數據.onLoad是這個頁面的生命周期函數,頁面加載時會調用到它.我們在頁面加載時調用了自定義的getList函數.這個函數接收兩個參數,第一個參數是要加載的頁面,第二個參數是布爾值,用來判斷是下拉刷新調用的這個函數,還是頁面加載時調用的這個函數!接下來onPullDownRefresh是小程序提供的下拉刷新函數,里面wx.showToast顯示消息提示框,用來提示用戶正在加載,loadMore是滾動到底部觸發(fā)的事件.函數里面會檢查是否已經加載了全部列表項,如果已經加載了全部列表項會return掉,如果數據庫還有列表項,上拉到底部加載下一頁!scrll函數是滾動時觸發(fā)的函數,可以看到這個函數會判斷滾動條位置是否大于六百,如果大于六百顯示點擊直達底部的按鈕,如果小于六百隱藏直達頂部的按鈕.同時會更新滾動條位置的參數.剛剛在講wxml時已經講過scroll-view組件設置豎向滾動條位置scroll-top設置項時如果參數一樣,頁面不會重新渲染,我們就是利用了這一點,如果要到達頂部,位置必定是'0',滾動時觸發(fā)scrll函數,我們把位置信息設置為'1',因為滾動函數會反復觸發(fā),所以此時頁面是不會渲染的.也就是說由于位置設置參數都是設置為'1'不變,導致scroll-top設置項不會生效為goTop函數的直達頂部(把參數變?yōu)?0'提供機會).最后就是直達頂部按鈕的函數了,可以看到它是把位置信息變?yōu)?0',參數變化scroll-top設置生效,頁面直達頂部.最后再通過改變hidden這個參數把自己(直達頂部按鈕)給隱藏掉了!
結尾
ok,通過上面的步驟我們終于實現了下拉刷新上拉加載的列表頁功能了,從上面我們可以看到微信提供的接口和api還是挺全面的,要實現一個功能總體來說要比原生js實現要簡單一些!
【相關推薦】
1. 特別推薦：“php程序員工具箱”V0.1版本下載
2. 微信公眾號平臺源碼下載
Atas ialah kandungan terperinci scroll-view完成列表頁的方法詳解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
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)
Program mini Xianyu WeChat dilancarkan secara rasmi
Feb 10, 2024 pm 10:39 PM
Program mini WeChat rasmi Xianyu telah dilancarkan secara senyap-senyap Dalam program mini, anda boleh menghantar mesej peribadi untuk berkomunikasi dengan pembeli/penjual, melihat maklumat dan pesanan peribadi, mencari item, dsb. Jika anda ingin tahu apakah program mini Xianyu WeChat. dipanggil, lihat sekarang. Apakah nama applet Xianyu WeChat Jawapan: Xianyu, transaksi terbiar, jualan terpakai, penilaian dan kitar semula. 1. Dalam program mini, anda boleh menghantar mesej terbiar, berkomunikasi dengan pembeli/penjual melalui mesej peribadi, melihat maklumat dan pesanan peribadi, mencari item yang ditentukan, dsb. 2. Pada halaman program mini, terdapat halaman utama, berdekatan, post idle, messages, and mine 5 functions; 3. Jika anda ingin menggunakannya, anda mesti mengaktifkan pembayaran WeChat sebelum anda boleh membelinya;
Laksanakan kesan penapis imej dalam program mini WeChat
Nov 21, 2023 pm 06:22 PM
Melaksanakan kesan penapis gambar dalam program mini WeChat Dengan populariti aplikasi media sosial, orang ramai semakin gemar menggunakan kesan penapis pada foto untuk meningkatkan kesan artistik dan daya tarikan foto. Kesan penapis gambar juga boleh dicapai dalam program mini WeChat, menyediakan pengguna dengan fungsi penyuntingan foto yang lebih menarik dan kreatif. Artikel ini akan memperkenalkan cara melaksanakan kesan penapis imej dalam program mini WeChat dan memberikan contoh kod khusus. Pertama, kita perlu menggunakan komponen kanvas dalam applet WeChat untuk memuatkan dan mengedit imej. Komponen kanvas boleh digunakan pada halaman
Laksanakan kesan menu lungsur dalam applet WeChat
Nov 21, 2023 pm 03:03 PM
Untuk melaksanakan kesan menu lungsur dalam Program Mini WeChat, contoh kod khusus diperlukan Dengan populariti Internet mudah alih, Program Mini WeChat telah menjadi bahagian penting dalam pembangunan Internet, dan semakin ramai orang telah mula memberi perhatian kepada dan. gunakan Program Mini WeChat. Pembangunan program mini WeChat adalah lebih mudah dan pantas daripada pembangunan APP tradisional, tetapi ia juga memerlukan penguasaan kemahiran pembangunan tertentu. Dalam pembangunan program mini WeChat, menu lungsur ialah komponen UI biasa, yang mencapai pengalaman pengguna yang lebih baik. Artikel ini akan memperkenalkan secara terperinci cara melaksanakan kesan menu lungsur dalam applet WeChat dan menyediakan praktikal
Apakah nama applet WeChat Xianyu?
Feb 27, 2024 pm 01:11 PM
Program mini WeChat rasmi Xianyu telah dilancarkan secara senyap-senyap Ia menyediakan pengguna dengan platform yang mudah yang membolehkan anda menerbitkan dan berdagang item terbiar dengan mudah. Dalam program mini, anda boleh berkomunikasi dengan pembeli atau penjual melalui mesej peribadi, melihat maklumat peribadi dan pesanan, dan mencari item yang anda inginkan. Jadi apa sebenarnya yang dipanggil Xianyu dalam program mini WeChat ini akan memperkenalkannya kepada anda secara terperinci Pengguna yang ingin tahu, sila ikuti artikel ini dan teruskan membaca! Apakah nama applet Xianyu WeChat Jawapan: Xianyu, transaksi terbiar, jualan terpakai, penilaian dan kitar semula. 1. Dalam program mini, anda boleh menghantar mesej terbiar, berkomunikasi dengan pembeli/penjual melalui mesej peribadi, melihat maklumat dan pesanan peribadi, mencari item yang ditentukan, dsb. 2. Pada halaman program mini, terdapat halaman utama, berdekatan, post melahu, mesej, dan 5 fungsi;
Applet WeChat melaksanakan fungsi muat naik imej
Nov 21, 2023 am 09:08 AM
Applet WeChat melaksanakan fungsi muat naik gambar Dengan perkembangan Internet mudah alih, applet WeChat telah menjadi bahagian yang amat diperlukan dalam kehidupan orang ramai. Program mini WeChat bukan sahaja menyediakan pelbagai senario aplikasi, tetapi juga menyokong fungsi yang ditentukan oleh pembangun, termasuk fungsi muat naik imej. Artikel ini akan memperkenalkan cara untuk melaksanakan fungsi muat naik imej dalam applet WeChat dan memberikan contoh kod khusus. 1. Kerja persediaan Sebelum mula menulis kod, kita perlu memuat turun dan memasang alat pembangun WeChat dan mendaftar sebagai pembangun WeChat. Pada masa yang sama, anda juga perlu memahami WeChat
Laksanakan kesan putaran imej dalam applet WeChat
Nov 21, 2023 am 08:26 AM
Untuk melaksanakan kesan putaran imej dalam Program Mini WeChat, contoh kod khusus diperlukan Program Mini WeChat ialah aplikasi ringan yang menyediakan pengguna dengan fungsi yang kaya dan pengalaman pengguna yang baik. Dalam program mini, pembangun boleh menggunakan pelbagai komponen dan API untuk mencapai pelbagai kesan. Antaranya, kesan putaran gambar merupakan kesan animasi biasa yang boleh menambah minat dan kesan visual pada program mini. Untuk mencapai kesan putaran imej dalam program mini WeChat, anda perlu menggunakan API animasi yang disediakan oleh program mini. Berikut ialah contoh kod khusus yang menunjukkan cara untuk
Gunakan applet WeChat untuk mencapai kesan penukaran karusel
Nov 21, 2023 pm 05:59 PM
Gunakan applet WeChat untuk mencapai kesan penukaran karusel WeChat applet ialah aplikasi ringan dengan ciri pembangunan dan penggunaan yang mudah dan cekap. Dalam program mini WeChat, adalah keperluan biasa untuk mencapai kesan penukaran karusel. Artikel ini akan memperkenalkan cara menggunakan applet WeChat untuk mencapai kesan penukaran karusel dan memberikan contoh kod khusus. Mula-mula, tambahkan komponen karusel pada fail halaman applet WeChat. Contohnya, anda boleh menggunakan teg <swiper> untuk mencapai kesan penukaran karusel. Dalam komponen ini, anda boleh lulus b
Laksanakan fungsi padam gelongsor dalam program mini WeChat
Nov 21, 2023 pm 06:22 PM
Melaksanakan fungsi padam gelongsor dalam program mini WeChat memerlukan contoh kod khusus Dengan populariti program mini WeChat, pembangun sering menghadapi masalah pelaksanaan beberapa fungsi biasa semasa proses pembangunan. Antaranya, fungsi padam gelongsor adalah keperluan fungsi yang biasa dan biasa digunakan. Artikel ini akan memperkenalkan secara terperinci cara melaksanakan fungsi padam gelongsor dalam applet WeChat dan memberikan contoh kod khusus. 1. Analisis keperluan Dalam program mini WeChat, pelaksanaan fungsi pemadaman gelongsor melibatkan perkara berikut: Paparan senarai: Untuk memaparkan senarai yang boleh diluncurkan dan dipadam, setiap item senarai perlu disertakan
