이 글에서는 목록 페이지를 구현하기 위한 위챗 애플릿의 스크롤 뷰 컴포넌트의 예제 코드에 대한 관련 정보를 주로 소개합니다. 스크롤 뷰 컴포넌트 소개 스크롤 뷰는 위챗 애플릿에서 제공하는 스크롤 뷰 컴포넌트입니다. 주요 기능은 휴대폰에서 흔히 볼 수 있는 풀업 로딩을 하기 위함이며, 필요하신 분들은
스크롤뷰 컴포넌트
소개를 참고하시면 됩니다.스크롤뷰는 위챗 애플릿에서 제공하는 스크롤뷰 구성요소로, 주요 기능은 휴대폰에서 흔히 볼 수 있는 목록 페이지를 로드하기 위한 풀업과 새로고침을 하는 풀다운입니다! out a smile> 구성 요소를 설명하기 위한 예시 !
앱용 새 페이지 가져오기
먼저 미니 프로그램용 새 페이지를 가져와야 합니다. 프로젝트 루트 디렉터리에서 app.json을 엽니다. 이 프로젝트 구성 파일 은 페이지 배열 에 "pages/allJoke/allJoke"를 추가한 다음 하단 을 설정합니다. 🎜> 네비게이션 "tabBar" 목록 항목에서 ("list") 추가:
{
"text": "列表",
"pagePath": "pages/allJoke/allJoke",
"iconPath": "images/note.png",
"selectedIconPath": "images/noteHL.png"
},특정 구성의 의미를 알고 싶다면 다음을 참조하세요. 여기에 설명되지 않은 미니 프로그램 구성 문서!
json 구성 페이지
다음 단계는 새 페이지의 구성 페이지입니다. 페이지 디렉터리 아래에 alljoke와 같은 새 디렉터리를 만든 다음 이 디렉터리 아래에 새 allJoke.json을 만듭니다. 내부:
{
"navigationBarTitleText": "笑话集锦",
"enablePullDownRefresh": true
}왜냐하면 onPullDownRefresh 메서드를 사용해야 하기 때문입니다. 나중에 풀다운 새로 고침을 수행할 때 애플릿에서 제공하는 또 다른 옵션은 페이지 상단 제목을 켜야 하며 마음대로 설정할 수 있습니다. !
wxml 뷰 페이지
마찬가지로 alljoke 디렉토리에 새로운 alljoke.wxml 페이지를 생성합니다. wxml은 미니 프로그램에서 생성한 것입니다. 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-top | 세로 스크롤 막대의 위치를 설정합니다. 설정한 값이 변경되지 않으면 구성 요소가 렌더링되지 않습니다! | ||||||||||
| scroll-y | 세로 스크롤 허용 | ||||||||||
| bindscroll | 스크롤 시 트리거됨콜백 함수
| ||||||||||
| bindscrolltolower | 아래로 스크롤 트리거됨 이벤트<🎜> |
用到的选项都列出来了,还有一点需要大家特别注意的:
使用竖向滚动条时必须为组件设置一个固定高度就是上面代码style里面设置的高!切记切记!
更多资料请阅读微信小程序scroll-view组件文档
wxss样式
同样在alljoke目录下面新建allJoke.wxss文件,小程序的样式和传统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;
}小程序文档中关于样式的介绍
逻辑部分
来到最后也是最重要的逻辑部分了!老规矩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是滚动到底部触发的事件.函数里面会检查是否已经加载了全部列表项,如果已经加载了全部列表项会return掉,如果数据库还有列表项,上拉到底部加载下一页!scrll函数是滚动时触发的函数,可以看到这个函数会判断滚动条位置是否大于六百,如果大于六百显示点击直达底部的按钮,如果小于六百隐藏直达顶部的按钮.同时会更新滚动条位置的参数.刚刚在讲wxml时已经讲过scroll-view组件设置竖向滚动条位置scroll-top设置项时如果参数一样,页面不会重新渲染,我们就是利用了这一点,如果要到达顶部,位置必定是'0',滚动时触发scrll函数,我们把位置信息设置为'1',因为滚动函数会反复触发,所以此时页面是不会渲染的.也就是说由于位置设置参数都是设置为'1'不变,导致scroll-top设置项不会生效为goTop函数的直达顶部(把参数变为'0'提供机会).最后就是直达顶部按钮的函数了,可以看到它是把位置信息变为'0',参数变化scroll-top设置生效,页面直达顶部.最后再通过改变hidden这个参数把自己(直达顶部按钮)给隐藏掉了!
结尾
ok,通过上面的步骤我们终于实现了下拉刷新上拉加载的列表页功能了,从上面我们可以看到微信提供的接口和api还是挺全面的,要实现一个功能总体来说要比原生js实现要简单一些!
【相关推荐】
1. 特别推荐：“php程序员工具箱”V0.1版本下载
2. 微信公众号平台源码下载
3. 阿狸子订单系统源码下载
위 내용은 스크롤 뷰가 목록 페이지를 완성하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
