這篇文章主要介紹了微信小程式scroll-view元件實(shí)作清單頁實(shí)例程式碼的相關(guān)資料,scroll-view元件介紹scroll-view是微信小程式提供的可捲動(dòng)檢視元件,其主要作用是可用來做手機(jī)端經(jīng)常會(huì)看到的上拉加載，需要的朋友可以參考下
scroll-view組件介紹
scroll-view是微信小程式提供的可滾動(dòng)視圖元件,其主要作用是可以用來做手機(jī)端經(jīng)常會(huì)看到的上拉加載下拉刷新列表頁!下面就以<搖出微笑>為例來講解一下這個(gè)組件的使用吧!
為app導(dǎo)入新page頁面
首先需要為我們的小程式導(dǎo)入新的page頁面,專案根目錄開啟app.json這個(gè)項(xiàng)目設(shè)定檔在裡面的pages陣列新增"pages/allJoke/allJoke"然後設(shè)定底部導(dǎo)航在"tabBar"的清單項(xiàng)目("list")新增:
{
"text": "列表",
"pagePath": "pages/allJoke/allJoke",
"iconPath": "images/note.png",
"selectedIconPath": "images/noteHL.png"
},如果大家要了解具體配置的含義可以參考小程式配置文檔這裡不再贅述!
json設(shè)定頁
接下來就是我們新建page的設(shè)定頁了,在page目錄下新建一個(gè)目錄如alljoke,再在這個(gè)目錄下新建一個(gè)allJoke.json,複製下面程式碼到這個(gè)文件裡面:
{
"navigationBarTitleText": "笑話集錦",
"enablePullDownRefresh": true
}因?yàn)槲覀兇龝?huì)做下拉刷新時(shí)需要用到小程式提供的onPullDownRefresh方法,所以在配置項(xiàng)裡面必須開啟enablePullDownRefresh.另外一個(gè)選項(xiàng)是頁頂標(biāo)題大家隨意設(shè)定也可以不用設(shè)定!
wxml視圖頁
好輪到視圖頁了,同樣的在alljoke目錄下新建一個(gè)alljoke.wxml頁面.wxml是小程式自創(chuàng)的一個(gè)視圖頁文檔類型,其寫法類似html,對(duì)於前端來說入門沒有難度.需要詳細(xì)了解的可以去閱讀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也在這裡隆重登場了!帶過來的是一長串配置,就讓我來為大家講一下這些配置的作用吧!
##配置項(xiàng)目 | 作用 |
scroll-top | 設(shè)定垂直滾動(dòng)條的位置,要注意一點(diǎn)如果設(shè)定的值沒有變化,元件不會(huì)渲染! |
scroll-y | 允許縱向捲動(dòng) |
bindscroll | 滾動(dòng)時(shí)觸發(fā)的回呼函數(shù) |
bindscrolltolower | 捲動(dòng)到底部觸發(fā)的事件 |
用到的選項(xiàng)都列出來了,還有一點(diǎn)需要大家特別注意的:
使用豎向滾動(dòng)條時(shí)必須為組件設(shè)置一個(gè)固定高度就是上面代碼style里面設(shè)置的高!切記切記!
更多資料請(qǐng)閱讀微信小程序scroll-view組件文檔
wxss樣式
同樣在alljoke目錄下面新建allJoke.wxss文件,小程序的樣式和傳統(tǒng)css差不多大家可以根據(jù)自己喜好自行設(shè)計(jì),這里我簡單做了一下樣式比較丑大家將就著用吧.(題外話:受不了的自己動(dòng)手豐衣足食)
.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ān)于樣式的介紹
邏輯部分
來到最后也是最重要的邏輯部分了!老規(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()函數(shù)注冊(cè)頁面,然后在data里面定義一些初始化數(shù)據(jù).onLoad是這個(gè)頁面的生命周期函數(shù),頁面加載時(shí)會(huì)調(diào)用到它.我們?cè)陧撁婕虞d時(shí)調(diào)用了自定義的getList函數(shù).這個(gè)函數(shù)接收兩個(gè)參數(shù),第一個(gè)參數(shù)是要加載的頁面,第二個(gè)參數(shù)是布爾值,用來判斷是下拉刷新調(diào)用的這個(gè)函數(shù),還是頁面加載時(shí)調(diào)用的這個(gè)函數(shù)!接下來onPullDownRefresh是小程序提供的下拉刷新函數(shù),里面wx.showToast顯示消息提示框,用來提示用戶正在加載,loadMore是滾動(dòng)到底部觸發(fā)的事件.函數(shù)里面會(huì)檢查是否已經(jīng)加載了全部列表項(xiàng),如果已經(jīng)加載了全部列表項(xiàng)會(huì)return掉,如果數(shù)據(jù)庫還有列表項(xiàng),上拉到底部加載下一頁!scrll函數(shù)是滾動(dòng)時(shí)觸發(fā)的函數(shù),可以看到這個(gè)函數(shù)會(huì)判斷滾動(dòng)條位置是否大于六百,如果大于六百顯示點(diǎn)擊直達(dá)底部的按鈕,如果小于六百隱藏直達(dá)頂部的按鈕.同時(shí)會(huì)更新滾動(dòng)條位置的參數(shù).剛剛在講wxml時(shí)已經(jīng)講過scroll-view組件設(shè)置豎向滾動(dòng)條位置scroll-top設(shè)置項(xiàng)時(shí)如果參數(shù)一樣,頁面不會(huì)重新渲染,我們就是利用了這一點(diǎn),如果要到達(dá)頂部,位置必定是'0',滾動(dòng)時(shí)觸發(fā)scrll函數(shù),我們把位置信息設(shè)置為'1',因?yàn)闈L動(dòng)函數(shù)會(huì)反復(fù)觸發(fā),所以此時(shí)頁面是不會(huì)渲染的.也就是說由于位置設(shè)置參數(shù)都是設(shè)置為'1'不變,導(dǎo)致scroll-top設(shè)置項(xiàng)不會(huì)生效為goTop函數(shù)的直達(dá)頂部(把參數(shù)變?yōu)?0'提供機(jī)會(huì)).最后就是直達(dá)頂部按鈕的函數(shù)了,可以看到它是把位置信息變?yōu)?0',參數(shù)變化scroll-top設(shè)置生效,頁面直達(dá)頂部.最后再通過改變hidden這個(gè)參數(shù)把自己(直達(dá)頂部按鈕)給隱藏掉了!
結(jié)尾
ok,通過上面的步驟我們終于實(shí)現(xiàn)了下拉刷新上拉加載的列表頁功能了,從上面我們可以看到微信提供的接口和api還是挺全面的,要實(shí)現(xiàn)一個(gè)功能總體來說要比原生js實(shí)現(xiàn)要簡單一些!
【相關(guān)推薦】
1. 特別推薦：“php程序員工具箱”V0.1版本下載
2. 微信公眾號(hào)平臺(tái)源碼下載
3. 阿貍子訂單系統(tǒng)源碼下載
以上是scroll-view完成清單頁的方法詳解的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
本網(wǎng)站聲明
本文內(nèi)容由網(wǎng)友自願(yuàn)投稿，版權(quán)歸原作者所有。本站不承擔(dān)相應(yīng)的法律責(zé)任。如發(fā)現(xiàn)涉嫌抄襲或侵權(quán)的內(nèi)容，請(qǐng)聯(lián)絡(luò)admin@php.cn
閒魚微信小程式正式上線
Feb 10, 2024 pm 10:39 PM
閒魚官方微信小程式悄悄上線，在小程式中可以發(fā)布閒置與買家/賣家私訊交流、查看個(gè)人資料及訂單、搜尋物品等，有用好奇閒魚微信小程式叫什麼，現(xiàn)在快來看一下。閒魚微信小程式叫什麼答案：閒魚，閒置交易二手買賣估價(jià)回收。 1、在小程式中可以發(fā)布閒置、與買家/賣家私訊交流、查看個(gè)人資料及訂單、搜尋指定物品等功能;2、在小程式的頁面中有首頁、附近、發(fā)閒置、訊息、我的5項(xiàng)功能；3、想要使用的話必要要開通微信支付才可以購買；
實(shí)現(xiàn)微信小程式中的圖片濾鏡效果
Nov 21, 2023 pm 06:22 PM
實(shí)現(xiàn)微信小程式中的圖片濾鏡效果隨著社群媒體應(yīng)用程式的流行，人們?cè)絹碓较矚g在照片中應(yīng)用濾鏡效果，以增強(qiáng)照片的藝術(shù)效果和吸引力。在微信小程式中也可以實(shí)現(xiàn)圖片濾鏡效果，為使用者提供更多有趣和創(chuàng)意的照片編輯功能。本文將介紹如何在微信小程式中實(shí)現(xiàn)圖片濾鏡效果，並提供具體的程式碼範(fàn)例。首先，我們需要在微信小程式中使用canvas元件來載入和編輯圖片。 canvas元件可以在頁面
實(shí)作微信小程式中的下拉式選單效果
Nov 21, 2023 pm 03:03 PM
實(shí)現(xiàn)微信小程式中的下拉式選單效果，需要具體程式碼範(fàn)例隨著行動(dòng)互聯(lián)網(wǎng)的普及，微信小程式成為了網(wǎng)路開發(fā)的重要一環(huán)，越來越多的人開始關(guān)注和使用微信小程式。微信小程式的開發(fā)相比傳統(tǒng)的APP開發(fā)更加簡單快捷，但也需要掌握一定的開發(fā)技巧。在微信小程式的開發(fā)中，下拉式選單是一個(gè)常見的UI元件，實(shí)現(xiàn)了更好的使用者操作體驗(yàn)。本文將詳細(xì)介紹如何在微信小程式中實(shí)現(xiàn)下拉式選單效果，並提供具
閒魚微信小程式叫什麼
Feb 27, 2024 pm 01:11 PM
閒魚官方微信小程式已經(jīng)悄悄上線，它為用戶提供了一個(gè)便捷的平臺(tái)，讓你可以輕鬆地發(fā)布和交易閒置物品。在小程式中，你可以與買家或賣家進(jìn)行私訊交流，查看個(gè)人資料和訂單，以及搜尋你想要的物品。那麼閒魚在微信小程式中究竟叫什麼呢，這篇教學(xué)攻略將為您詳細(xì)介紹，想要了解的用戶們快來跟著本文繼續(xù)閱讀吧！閒魚微信小程式叫什麼答案：閒魚，閒置交易二手買賣估價(jià)回收。 1、在小程式中可以發(fā)布閒置、與買家/賣家私訊交流、查看個(gè)人資料及訂單、搜尋指定物品等功能;2、在小程式的頁面中有首頁、附近、發(fā)閒置、訊息、我的5項(xiàng)功能；3、
微信小程式實(shí)現(xiàn)圖片上傳功能
Nov 21, 2023 am 09:08 AM
微信小程式實(shí)現(xiàn)圖片上傳功能隨著行動(dòng)網(wǎng)路的發(fā)展，微信小程式已經(jīng)成為了人們生活中不可或缺的一部分。微信小程式不僅提供了豐富的應(yīng)用場景，還支援開發(fā)者自訂功能，其中包括圖片上傳功能。本文將介紹如何在微信小程式中實(shí)作圖片上傳功能，並提供具體的程式碼範(fàn)例。一、前期準(zhǔn)備工作在開始編寫程式碼之前，我們需要先下載並安裝微信開發(fā)者工具，並註冊(cè)成為微信開發(fā)者。同時(shí)，也需要了解微信
使用微信小程式實(shí)現(xiàn)輪播圖切換效果
Nov 21, 2023 pm 05:59 PM
使用微信小程式實(shí)現(xiàn)輪播圖切換效果微信小程式是一種輕量級(jí)的應(yīng)用程序，具有簡單、高效的開發(fā)和使用特點(diǎn)。在微信小程式中，實(shí)作輪播圖切換效果是常見的需求。本文將介紹如何使用微信小程式實(shí)現(xiàn)輪播圖切換效果，並給出具體的程式碼範(fàn)例。首先，在微信小程式的頁面檔案中，新增一個(gè)輪播圖元件。例如，可以使用<swiper>標(biāo)籤來實(shí)現(xiàn)輪播圖的切換效果。在該組件中，可以透過b
實(shí)現(xiàn)微信小程式中的圖片旋轉(zhuǎn)效果
Nov 21, 2023 am 08:26 AM
實(shí)現(xiàn)微信小程式中的圖片旋轉(zhuǎn)效果，需要具體程式碼範(fàn)例微信小程式是一種輕量級(jí)的應(yīng)用程序，為用戶提供了豐富的功能和良好的用戶體驗(yàn)。在小程式中，開發(fā)者可以利用各種元件和API來實(shí)現(xiàn)各種效果。其中，圖片旋轉(zhuǎn)效果是一種常見的動(dòng)畫效果，可以為小程式增添趣味性和視覺效果。在微信小程式中實(shí)作圖片旋轉(zhuǎn)效果，需要使用小程式提供的動(dòng)畫API。以下是一個(gè)具體的程式碼範(fàn)例，展示如何在小程
實(shí)作微信小程式中的滑動(dòng)刪除功能
Nov 21, 2023 pm 06:22 PM
實(shí)作微信小程式中的滑動(dòng)刪除功能，需要具體程式碼範(fàn)例隨著微信小程式的流行，開發(fā)者在開發(fā)過程中經(jīng)常會(huì)遇到一些常見功能的實(shí)作問題。其中，滑動(dòng)刪除功能是常見、常用的功能需求。本文將為大家詳細(xì)介紹如何在微信小程式中實(shí)現(xiàn)滑動(dòng)刪除功能，並給出具體的程式碼範(fàn)例。一、需求分析在微信小程式中，滑動(dòng)刪除功能的實(shí)作涉及以下要點(diǎn)：列表展示：要顯示可滑動(dòng)刪除的列表，每個(gè)列表項(xiàng)目需要包
See all articles
