淘宝优惠券 如果做网站,邵阳建设网站公司,山东网站建设哪家权威,互联网服务平台投诉效果图 在app或者小程序中向下滑动 会出现刷新数据 ,而上拉到底 需要更新数据
功能实现
主要俩种方式
依赖生命周期
在page.json中开启 page.json style : {navigationBarTitleText : 小小练习,backgroundTextStyle: style : {navigationBarTitleText : 小小练习,backgroundTextStyle: dark,enablePullDownRefresh: true}开启后页面监听onPullDownRefresh()顶部下拉事件,onReachBottom触底事件 templateview classcontentview v-for(item, index) in cats :keyindeximage :style{ width: item.width/2 rpx, height: item.height/2 rpx } :srcitem.url/image/view/viewview classfloatview classitem顶部/viewview classitem刷新/view/view
/templatescript setup
import { reactive, onMounted } from vue;const cats reactive([]);
onPullDownRefresh(() {console.log(触发下拉刷新了);// 进行下拉刷新的操作比如重新加载数据等refresh(); // 这里调用你封装的刷新数据的方法uni.stopPullDownRefresh();
});
onReachBottom((){console.log(触底时间)PullDownRefresh()
})const PullDownRefresh ((){uni.showLoading({title:加载中,duration:1000})console.log(触发滑动区域刷新了)// 停止当前页面下拉刷新refresh()}) const addrefresh(){console.log(滑动到进行更新)uni.request({url: https://api.thecatapi.com/v1/images/search?limit2,success(res) {console.log(获取接口成功, res);// cats.length 0; // 不清空清空数组res.data.forEach(item {cats.push(item); // 将接口数据逐个添加到cats数组中});},fail: (e) {console.log(获取接口失败);}});}
const refresh(){uni.request({url: https://api.thecatapi.com/v1/images/search?limit2,success(res) {console.log(获取接口成功, res);cats.length 0; // 不清空清空数组res.data.forEach(item {cats.push(item); // 将接口数据逐个添加到cats数组中});},fail: (e) {console.log(获取接口失败);}});
}
onMounted(() {
refresh()
});
/scriptstyle langscss scoped
/* 样式 */
.float{position: absolute;right: 30rpx;bottom: 100rpx;.item{width: 90rpx;height: 90rpx;background: rgba(165, 213, 255, 0.0);border-radius: 50%;align-items: center;justify-content: center;padding-bottom: env(safe-area-inset-bottom);display: flex;border: 1px solid rebeccapurple;margin-bottom: 15rpx;}
}
/style
依赖滚动视图组件 主要依赖这俩个事件
templatescroll-view scrolltoupperPullDownRefresh scroll-ytrue styleheight: 1080rpx; classscroll-Y scrolltoloweraddrefreshview v-for(item, index) in cats :keyindeximage :style{ width: item.width/2 rpx, height: item.height/2 rpx } :srcitem.url/image/view/scroll-viewview classfloatview classitem顶部/viewview classitem刷新/view/view
/templatescript setup
import { reactive, onMounted } from vue;const cats reactive([]);const PullDownRefresh ((){uni.showLoading({title:加载中,duration:1000})console.log(触发滑动区域刷新了)// 停止当前页面下拉刷新refresh()}) const addrefresh(){console.log(滑动到进行更新)uni.request({url: https://api.thecatapi.com/v1/images/search?limit2,success(res) {console.log(获取接口成功, res);// cats.length 0; // 不清空清空数组res.data.forEach(item {cats.push(item); // 将接口数据逐个添加到cats数组中});},fail: (e) {console.log(获取接口失败);}});}
const refresh(){uni.request({url: https://api.thecatapi.com/v1/images/search?limit2,success(res) {console.log(获取接口成功, res);cats.length 0; // 不清空清空数组res.data.forEach(item {cats.push(item); // 将接口数据逐个添加到cats数组中});},fail: (e) {console.log(获取接口失败);}});
}
onMounted(() {
refresh()
});
/script这种方式没有自带的动画 并且需要设置滑动区域的高度,不然可能滑倒底部没数据了但是由于没有到组件底部无法触发事件
当上拉更新数据过多时,想要在滑动顶部进行更新数据时候,就需要滑动很长事件,所以可以使用uni.pageScrollTo(OBJECT) 快速到达页面指定位置
