全局方法介绍
属性 | 类型 | 描述 | 链接 |
---|---|---|---|
enablePullDownRefresh | boolean(默认false) | 是否开启当前页面下拉刷新 | 官方链接 |
onReachBottomDistance | number(默认50) | 页面上拉触底事件触发时距页面底部距离单位为px。 | 官方链接 |
页面的方法介绍
属性 | 类型 | 描述 |
---|---|---|
onPullDownRefresh | function | 监听用户下拉动作 |
onReachBottom | function | 页面上拉触底事件的处理函数 |
demo展示
怎么做?
1.全局配置
在你的app.json中开启:
"enablePullDownRefresh":true
,
"onReachBottomDistance":50
在你的需要的页面的json中开启 ,如(index.json):
"enablePullDownRefresh":true,
// 这个其实也可以不写但是全局哪里要配置
"onReachBottomDistance":50
//同上
"backgroundTextStyle": "dark",
// 如果颜色默认,可能显示不出来下拉时候点的样式
"backgroundColor": "#fff"
上代码
1.wxml
<view class='case-page'>
<view class='list-masonry'>
<view class='item-masonry' wx:for="{{note}}">
<image src='{{item.url}}' mode='widthFix'></image>
</view>
</view>
</view>
<view class="loading-heart" hidden="{{!ishow}}">
</view>
2.wxss
page {
background-color: white;
}
.case-page {
padding: 20rpx;
}
.list-masonry {
column-count: 2;
column-gap: 20rpx;
}
.item-masonry {
/* animation:myfirst 5s;
-moz-animation:myfirst 5s;
-webkit-animation:myfirst 5s;
-o-animation:myfirst 5s; *//* opacity: 0 */
}
.item-masonry image {
width: 100%;
margin-top: 20rpx;
/* transition: all 2s; */
}
/* @keyframes myfirst {
from {opacity:0;}
to {opacity:1;}
} */
/*动画十一:心跳 */
.loading-heart {
width: 150rpx;
height: 150rpx;
position: relative;
animation: loading-heart 1s ease infinite;
margin: 0 auto;
text-align: center;
right: 20rpx;
}
.loading-heart::before {
content: '';
display: block;
width: 20px;
height: 40px;
background-color: red;
border-radius: 20px 20px 0 0;
position: absolute;
top: 40%;
left: calc(50% - 7px);
transform-origin: center bottom;
transform: translateY(-50%) rotate(45deg);
}
.loading-heart::after {
content: '';
display: block;
width: 20px;
height: 40px;
background-color: red;
border-radius: 20px 20px 0 0;
position: absolute;
top: 40%;
left: calc(50% + 7px);
transform-origin: center bottom;
transform: translateY(-50%) rotate(-45deg);
}
@keyframes loading-heart {
0% {
transform: scale(0.4);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0.4);
}
}
3.js
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
animationData: '',
ishow: false,
note: [{
url: '../images/wxy1.jpg'
},
{
url: '../images/wxy2.jpg'
},
{
url: '../images/wxy3.jpg'
},
{
url: '../images/wxy4.jpg'
},
{
url: '../images/wxy5.jpg'
},
{
url: '../images/wxy6.jpg'
},
{
url: '../images/wxy7.jpg'
},
{
url: '../images/wxy8.jpg'
},
{
url: '../images/wxy9.jpg'
},
{
url: '../images/wxy10.jpg'
}
]
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
wx.showNavigationBarLoading()
this.data.note.forEach((el, index, array) => {
let randomNumber = Math.ceil(Math.random() * 14);
el.url = `../images/wxy${randomNumber}.jpg`
this.setData({
note: this.data.note
})
});
let interval = setInterval(()=>{
wx.hideNavigationBarLoading()
clearInterval(interval)
},3000)
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
this.setData({
ishow: true
})
let arr = [
{
url: '../images/wxy11.jpg'
}, {
url: '../images/wxy12.jpg'
},
{
url: '../images/wxy13.jpg'
}, {
url: '../images/wxy14.jpg'
},
{
url: '../images/wxy15.jpg'
}, {
url: '../images/wxy16.jpg'
},
{
url: '../images/wxy17.jpg'
}, {
url: '../images/wxy18.jpg'
},
{
url: '../images/wxy19.jpg'
},
{
url: '../images/wxy20.jpg'
}]
let interval = setInterval(() => {
let newArr = [...this.data.note, ...arr]
this.setData({
note: newArr
})
clearInterval(interval)
}, 3000);
}
})
结语
微信小程序的上拉 刷新和下拉加载是在实际开发中非常重要的,所以写了这么个东西来娱乐一下,也顺变给还没有做过的同学一个小小的参考。