小程序下拉刷新scroll-view 高度设为100% 并且page的高度 也要100% 才有效
转载小程序下拉刷新
/*scroll-view 高度设为100% 并且page的高度 也要100% 才有效! */
page{
height: 100%;
}
.item{
display: inline-block;
width: 335rpx;
margin: 10rpx 20rpx;
text-align: center;
vertical-align: top;
}
.item image{
width: 100%;
height: 550rpx;
box-shadow: 0 0 10px #ccc;
}
.item text{
font:12px/1.5 "微软雅黑";
}
.loading{
text-align: center;
}
.loading image{
width: 80rpx;
}
<!-- 下拉刷新 scroll-view 高度设为100% 并且page的高度 也要100% 才有效 -->
<scroll-view
style="height:100%"
scroll-y="{{true}}"
lower-threshold="200"
bindscrolltolower="loadmore">
<view class='item' wx:for="{{list}}" wx:key="{{index}}">
<image src="{{item.cover}}"></image>
<!--{{}}里面进行数据拼接-->
<text>{{item.title +"/"+ item.rate}}</text> <!-- item.xxx 看后台返回的数据-->
</view>
<!-- loading图标 -->
<view class='loading' wx:if="{{loading}}">
<image mode='widthFix' src='/assets/loading/loading-bars.svg'></image>
</view>
</scroll-view>
//获取应用实例
const app = getApp()
Page({
data: {
list: [],//先定义一个数组
start:0, //第几页数据
loading: false,
},
onLoad: function () {
this.loadData() //页面初始化加载数据
},
// 加载更多
loadmore() {
if (!this.data.loading) {
this.loadData()
}
},
//加载
loadData(){
//提取JSON数据、解构赋值对提取JSON对象中的数据,尤其有用。
let { list,start,loading, } = this.data; //解构赋值
wx.showLoading({
title: '正在拼命加载加载中...',
mask:true
})
this.setData({
loading:true
})
wx.request({
url: `https://www.koocv.com/h5-view/v/movie/list?page_start=${start}`,//超级字符串
header: {
'content-type': 'application/json'
},
//请求成功后
success: (res) => {
console.log(res.data.subjects);
// list = res.data.subjects //基本写法
let { subjects } = res.data;//解构赋值写法
start += 20;
list.push(...res.data.subjects) //... 把subjects打散变成为一个一个单独的参数传过去
this.setData({
list: list,
start:start,
loading:false
})
wx.hideLoading();
}
})
}
})