一，代码：
<template>
<view>
<uni-list>
<uni-list-item :border="false" v-for="(item, index) in itemList" :key="index">
<template v-slot:body >
<view @click="goItem(item.id)" v-if="item.id==5" style="border-radius: 20rpx; min-height:160rpx;margin-top:20rpx;width:690rpx;margin-left:30rpx;margin-right:30rpx;background: #ffeeee;display: flex;flex-direction: row;" >
<image style="width: 100%;" mode="aspectFit" src="https://imgs.lhdtest.com/ware/sowhatimg/ware/orig/2/39/39383.jpg" />
</view>
<view @click="goItem(item.id)" v-else style="border-radius: 20rpx; min-height:160rpx;margin-top:20rpx;width:690rpx;margin-left:30rpx;margin-right:30rpx;background: #efefef;display: flex;flex-direction: row;" >
<view style="width:490rpx;padding-left: 20rpx;padding-right: 20rpx;">
<view style="height:100%;width:510rpx;display: flex;flex-direction: column;justify-content: center;">
{{item.title}}
</view>
</view>
<view style="width:200rpx;display: flex;flex-direction: column;justify-content: center;">
{{item.author}}
</view>
</view>
</template>
</uni-list-item>
<uni-load-more :showIcon="true" :showText="true" :status="loadStatus" ></uni-load-more>
</uni-list>
<view ref="goTopButton" :animation="animationData" class="btn" @tap="toTop" >
<text class="cuIcon-top">返回顶部</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
itemList:[], //列表项数组
isLoading:false, //是否加载中
currentPage:1, //当前页
totalPage:1, //总页数
loadStatus:"loading", //uni-load-more的状态
animationData:{}, // 动画
goTopDisp:false, //是否显示返回顶部的button
}
},
methods: {
//上拉加载更多
loadMore:function() {
if (this.currentPage < this.totalPage) {
if(!this.isLoading){ //此处判断，上锁，防止重复请求
this.isLoading=true;
this.currentPage+=1;
this.loadStatus = "loading";
this.getList();
}
}
},
//下拉刷新
refreshData:function(){
if (this.isLoading == false) {
this.isLoading = true;
this.itemList = [];
this.currentPage = 1;
this.totalPage = 1;
this.loadStatus = "loading";
this.getList();
}
},
//跳转到详情页
goItem:function(id) {
alert(id);
},
//访问接口
getList:function() {
uni.request({
url:'/api/item/list?page='+this.currentPage,
method:'get',
}).then((result)=>{
let [error,res] = result;
//result将返回一个数组[error,{NativeData}]
if(res.statusCode === 200){
console.log(res.data);
//总页数
this.totalPage = res.data.data.total;
//把接口返回的数组合并到本地
this.itemList=this.itemList.concat(res.data.data.list);
console.log(this.itemList);
}
if(res.statusCode === 404){
console.log('请求的接口没有找到');
}
this.isLoading=false;
if (this.currentPage >= this.totalPage){
this.loadStatus = "noMore";
}
//访问接口返回结果后，停止下拉刷新的动画
setTimeout(() => {
console.log('定时结束');
uni.stopPullDownRefresh();
}, 500);
})
},
//设置返回顶部的显示与隐藏
toTop:function() {
console.log("begin to top:");
// #ifdef APP-PLUS-NVUE
console.log("ifdef APP-PLUS-NVUE");
const dom = weex.requireModule('dom')
const el = this.$refs.top
dom.scrollToElement(el, {});
// #endif
// #ifndef APP-PLUS-NVUE
console.log("ifndef APP-PLUS-NVUE");
uni.pageScrollTo({
scrollTop: 0,
duration: 300
});
uni.showToast({
icon:"none",
title:"纵向滚动 scrollTop 值已被修改为 0"
})
// #endif
},
//显示返回顶部按钮
showTopBtn:function() {
if (this.goTopDisp == false){
// #ifdef APP-PLUS-NVUE
const animation = weex.requireModule('animation');
animation.transition(this.$refs.goTopButton, {
styles: {
transform: `translateX(-80)`
},
duration: 300,
timingFunction: 'linear',
delay: 0
})
// #endif
// #ifndef APP-PLUS-NVUE
this.animation.translateX(-100).step({duration:1000})
this.animationData = this.animation.export();
// #endif
this.goTopDisp = true;
}
},
//隐藏返回顶部按钮
hideTopBtn:function() {
if (this.goTopDisp == true){
// #ifdef APP-PLUS-NVUE
const animation = weex.requireModule('animation');
animation.transition(this.$refs.goTopButton, {
styles: {
transform: `translateX(0)`
},
duration: 300,
timingFunction: 'linear',
delay: 0
}, () => {
})
// #endif
// #ifndef APP-PLUS-NVUE
this.animation.translateX(100).step({duration:1000})
this.animationData = this.animation.export()
// #endif
this.goTopDisp = false;
}
},
//加载时访问接口得到数据
onl oad: function(options) {
// 页面创建时执行
console.log("页面加载");
this.getList();
// 初始化一个动画
var animation = uni.createAnimation({
duration: 1000,
timingFunction: 'ease',
})
this.animation = animation;
},
onShow: function() {
console.log("页面进入");
},
onReady: function() {
console.log("页面首次渲染完毕时执行");
},
onHide: function() {
console.log("页面离开");
},
onPullDownRefresh: function() {
//在pages.json中设置enablePullDownRefresh为true开启下拉
console.log("下拉刷新触发");
this.refreshData();
},
onReachBottom: function() {
// 页面触底时执行
console.log("下拉到底");
this.loadMore();
},
onPageScroll: function(e) {
console.log(e.scrollTop);
if (e.scrollTop > 10) { //当距离大于10时显示回到顶部按钮
this.showTopBtn();
} else {
this.hideTopBtn();
}
},
onResize: function() {
console.log("屏幕旋转触发");
}
}
}
</script>
<style lang="scss">
/* 取消各item的padding */
/deep/ .uni-list-item__container {
position: relative;
display: flex;
flex-direction: row;
padding: 0px 0px;
padding-left: 0px;
flex: 1;
overflow: hidden;
}
/* 回到顶部 */
.btn {
position: fixed;
z-index: 9999;
right: -136rpx;
bottom: 180rpx;
background-color: #007AFF;
padding: 5rpx;
border-radius: 4rpx;
}
.btn .cuIcon-top {
font-size: 30rpx;
color: #FFFFFF;
}
</style>
二，测试效果：
三，查看hbuilderx的版本:
标签：function,console,log,18,app,animation,PLUS,uni From： https://www.cnblogs.com/architectforest/p/17119631.html