uniapp列表数据遍历方法,实现上拉加载,下拉刷新
数据列表在很多时候,经常会用到,这里介绍uniapp数据遍历方法。步骤一:首先开启上拉加载,下拉刷新打开pages.json,添加如下代码,开启enablePullDownRefresh{"path":"pages/index/index",style":{"enablePullDownRefresh":true}}步骤二、代码实现1、页面模板代码:遍历数据,没有数据是显示的提示内容<tem
·
数据列表在很多时候,经常会用到,这里介绍uniapp数据遍历方法。
步骤一:首先开启上拉加载,下拉刷新
打开pages.json,添加如下代码,开启enablePullDownRefresh
{ "path": "pages/index/index", style":{ "enablePullDownRefresh": true } }
步骤二、代码实现
1、页面模板代码:遍历数据,没有数据是显示的提示内容
<template> <!-- 列表 --> <view> <view v-for="(item) in List" @click="play(item.id)"> <view> <image :src="item.vod_pic" mode="" lazy-load="true" fade-show="true"></image> <view>{{item.aricle_continu}}</view> </view> <view>{{item.aricle_name}}</view> <view>{{item.aricle_content}}</view> </view> <view v-if="flag"> <image src="/static/no.png" mode=""></image> <view class="">没有数据了</view> </view> </view> <!-- 列表 --> </template>
2、js逻辑代码:定义数组集合,页码,是否显示没有更多数据变量
<script> export default { data() { return { List: [], //数据集合 page: 1, //页码 flag: false //是否显示没有更多数据了 } }, onLoad() { this.article() }, // 下拉刷新 onPullDownRefresh() { var that = this that.page = 1 this.article() }, onReachBottom() { //滚动到底翻页 var that = this var pages = that.page that.page = ++pages this.articleAdd() console.log(that.page) }, methods: { // 列表 async article(){ var that =this const res = await this.$myRequest({ url: '/api/Uniapp/getarticle', data: { page: that.page, } }) this.vodList = res.data.data console.log( res.data) }, // 追加列表 async articleAdd(){ var that =this const res = await this.$myRequest({ url: '/api/Uniapp/getarticle', data: { page: that.page, } }) this.vodList = [...this.vodList,...res.data.data] if(res.data.data.length ==0){ that.flag = true } console.log( res.data) }, // 详情页 detail(id){ uni.navigateTo({ url: '../detail/detail?id='+id }) } } } </script>
来源地址:https://www.yujianni.top/news/comp_artinfo.html?id=878
更多推荐
已为社区贡献2条内容
所有评论(0)