景点列表图片作业问题
你好，我问一个很白痴的问题，我写的后端代码和要求一致，非常简单，如图：
但是前端运行时，就会出现page=NaN的错误，看了好几遍的前端代码，没有找到问题，请问这个问题出在哪？谢谢
26
收起
正在回答 回答被采纳积分+1
3回答
时间，
2021-03-09 14:15:06
同学，你好！影点图片没有更多了，page值没有获取到，因此报错了。同学没有提供相应的代码，无法确定具体问题。同学可以参考下述前端代码进行修改：
1 | <template><br> <!-- 景点图片 --><br> <div class="page-sight-image"><br> <!-- 顶部导航 --><br> <van-nav-bar title="景点图片" left-text="返回" left-arrow @click-left="goBack" /><br> <!-- 图片列表 --><br> <van-pull-refresh v-model="refreshing" @refresh="onRefresh"><br> <van-list<br> class="sight-image"<br> v-model="loading"<br> :finished="finished"<br> finished-text="没有更多了"<br> :error.sync="error"<br> error-text="请求失败，点击重新加载"<br> @load="getImageList"<br> ><br> <van-row><br> <van-col span="12" v-for="(item, index) in imageList" :key="index"><br> <van-image width="100%" height="100%" :src="item.img" @click="showPreview=true"/><br> </van-col><br> </van-row><br> </van-list><br> </van-pull-refresh><br> <!-- //图片列表 --><br><br> <!-- 图片预览 --><br> <van-image-preview v-model="showPreview" :images="imgUrlList" @change="onChange"><br> <template v-slot:index>第{{ index + 1 }}页 / 共{{ imageList.length }}张</template><br> </van-image-preview><br> <!-- // 图片预览 --><br> </div><br></template><br><script><br>import { ajax } from '@/utils/ajax'<br>import { SightApis } from '@/utils/apis'<br>export default {<br> components: {},<br> data () {<br> return {<br> // 图片列表<br> imageList: [],<br> // 图片预览<br> index: 0,<br> showPreview: false,<br> // 当前的页码<br> currentPage: 1,<br> // 正在加载中<br> loading: false,<br> // 所有的内容加载完<br> finished: false,<br> // 请求失败<br> error: false,<br> // 是否正在下拉刷新中<br> refreshing: false<br> }<br> },<br> methods: {<br> /**<br> * 预览切换图片<br> */<br> onChange (index) {<br> this.index = index<br> },<br> goBack () {<br> this.$router.go(-1)<br> },<br> /**<br> * 下拉刷新执行<br> */<br> onRefresh () {<br> // 清空数据<br> this.imageList = []<br> this.currentPage = 1<br><br> this.finished = false<br> this.error = false<br> },<br> /**<br> * 图片列表<br> */<br> getImageList () {<br> const url = SightApis.sightImageUrl.replace('#{id}', this.id)<br> ajax.get(url, {<br> params: {<br> page: this.currentPage<br> }<br> }).then(({ data: { meta, objects } }) => {<br> this.imageList = this.imageList.concat(objects)<br> // 加载状态结束<br> this.loading = false<br> // 设置下一页的页码<br> this.currentPage = meta.current_page + 1<br> // 数据全部加载完成： 当前页面 == 总页数<br> if (meta.current_page === meta.page_count) {<br> this.finished = true<br> }<br> this.refreshing = false<br> }).catch(() => {<br> this.loading = false<br> this.error = true<br> this.refreshing = false<br> })<br> }<br> },<br> computed: {<br> /**<br> * 图片地址<br> */<br> imgUrlList () {<br> return this.imageList.map(item => item.img)<br> }<br> },<br> mounted () {<br> this.id = this.$route.params.id<br> }<br>}<br></script><br> |
祝：学习愉快！
-
Lester #1
你好，下拉刷新没有问题，问题是滚动加载，后端paginate_by=10，每页10笔，共5页，ajax请求的返回也都正常，包括页码，比如下图的page=3，现我故意将48张图都设给同一个景点，滚动加载的话，应该会有5页，page_count=5，但在第一页之后，依然是page=NaN，即page=1之后，还是page=NaN，但ajax的每一页请求都是正常的，比如postman到(http://localhost:8080/api/sight/image/list/11/?page=)，返回json，正常，表示page是取到了，不了解的是，为什么会被解析成page=NaN，而且在第1页时，并不会滚动加载，是vant组件的问题？谢谢，我这边的前端代码，和课程提供的一样，
2021-03-09 15:52:05 -
Lester #21
// 我这边的前端代码<br><template><br> <!-- 景点图片 --><br> <div class="page-sight-image"><br> <!-- 顶部导航 --><br> <van-nav-bar title="景点图片" left-text="返回" left-arrow @click-left="goBack" fixed /><br> <!-- 图片列表 --><br> <van-pull-refresh v-model="refreshing" @refresh="onRefresh"><br> <van-list<br> class="sight-image"<br> v-model="loading"<br> :finished="finished"<br> finished-text="没有更多了"<br> error-text="请求失败，点击重新加载"<br> :error.sync="error"<br> @load="getImageList"<br> ><br> <van-row><br> <van-col span="12" v-for="(item, index) in imageList" :key="index"><br> <van-image width="100%" height="100%" :src="item.img" @click="showPreview=true"/><br> </van-col><br> </van-row><br> </van-list><br> </van-pull-refresh><br> <!-- //图片列表 --><br><br> <!-- 图片预览 --><br> <van-image-preview v-model="showPreview" :images="imgUrlList" @change="onChange"><br> <template v-slot:index>第{{ index + 1 }}张 / 共{{ imageList.length }}张</template><br> </van-image-preview><br> <!-- // 图片预览 --><br> </div><br></template><br><script><br>import { ajax } from '@/utils/ajax'<br>import { SightApis } from '@/utils/apis'<br>export default {<br> components: {},<br> data () {<br> return {<br> id: 1,<br> // 图片列表<br> imageList: [],<br> // 图片预览<br> index: 0,<br> showPreview: false,<br> // 当前的页码<br> currentPage: 1,<br> // 正在加载中<br> loading: false,<br> // 所有的内容加载完<br> finished: false,<br> // 请求失败<br> error: false,<br> // 是否正在下拉刷新中<br> refreshing: false<br> }<br> },<br> methods: {<br> /**<br> * 预览切换图片<br> */<br> onChange (index) {<br> this.index = index<br> },<br> goBack () {<br> this.$router.go(-1)<br> },<br> /**<br> * 下拉刷新执行<br> */<br> onRefresh () {<br> // 清空数据<br> this.imageList = []<br> this.currentPage = 1<br><br> this.finished = false<br> this.error = false<br> this.getImageList()<br> },<br> /**<br> * 图片列表<br> */<br> getImageList () {<br> const url = SightApis.sightImageUrl.replace('#{id}', this.id)<br> // console.log('xx:', this.currentPage)<br> ajax.get(url, {<br> params: {<br> page: this.currentPage<br> }<br> }).then(({ data: { meta, objects } }) => {<br> this.imageList = this.imageList.concat(objects)<br> // 加载状态结束<br> this.loading = false<br> // 设置下一页的页码<br> // this.currentPage += 1<br> this.currentPage = meta.current_page + 1<br> // 数据全部加载完成： 当前页面 == 总页数<br> if (meta.current_page === meta.page_count) {<br> this.finished = true<br> // this.error = false<br> }<br> // this.error = false<br> this.refreshing = false<br> }).catch(() => {<br> this.loading = false<br> this.error = true<br> this.refreshing = false<br> })<br> }<br> },<br> computed: {<br> /**<br> * 图片地址<br> */<br> imgUrlList () {<br> return this.imageList.map(item => item.img)<br> }<br> },<br> mounted () {<br> this.id = this.$route.params.id<br> // this.error = false<br> }<br>}<br></script><br><style lang="less"><br>.page-sight-image {<br> padding: 50px 5px 0 5px;<br> .van-col {<br> padding: 5px;<br> }<br>}<br></style><br><br>2021-03-09 15:53:48
Python全栈工程师2020
- 参与学习 人
- 提交作业 5238 份
- 解答问题 2433 个
Facebook曾声称“只招全栈工程师”！全栈用人需求猛增，市面人才紧缺。 0基础进击Python全栈开发，诱人薪资在前方！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧