swiper组件内容不会立刻展示
- Ngôn ngữ chính
- Vue
- Star
- 17.5k
- Fork
- 3.6k
- Chỉ số merge pull request
- Không có pull request nào được merge trong 30 ngày
Mô tả
VUX version
2.9.1
OS/Browsers version
win64/chrome
Vue version
2.5.17-beta.0
Code
```html
{{category.name}}
{{article.title}}
import axios from 'axios'
import { Tab, TabItem, Swiper, SwiperItem } from 'vux'
import footerNav from "@/components/footerNav"
export default {
data() {
return {
index: 0,
height: '180px',
categories: [{id: 0, name: '推荐'}],
articles: [],
pages: []
}
},
created() {
this.getData();
},
mounted() {
this.setHeight();
},
methods: {
getData() {
this.getCategories();
this.changeCategory(0);
},
setHeight() {
let height = document.documentElement.clientHeight;
let headerHeight = document.querySelector('.header').offsetHeight;
let footerHeight = document.querySelector('#footer').offsetHeight;
this.height = height - headerHeight - footerHeight + 'px';
},
getCategories() {
axios.get('article/category').then(response => {
this.categories = this.categories.concat(response.data.data.categories);
});
},
getArticles(index) {
let category = this.categories[index];
let url = index ? 'article/category/' + category.id : 'article/recommend';
axios.get(url + '?page=' + this.pages[index]).then(response => {
let articles = this.articles[index];
if (!articles) {
articles = [];
}
this.pages[index]++;
this.articles[index] = articles.concat(response.data.data.articles);
});
},
changeCategory(index) {
if (!this.pages[index]) {
this.pages[index] = 1;
this.getArticles(index);
}
}
},
components: {
footerNav,
Tab,
TabItem,
Swiper,
SwiperItem
},
}
```
Steps to reproduce
替换数据来源或者直接在getCategories和getArticles内给对应数据赋值即可
What is Expected?
在调用getArticles后,每个页面对应的文章数据立即展示。
希望提供一个重新渲染swpier组件的方法,或者重新渲染指定的swiper-item的方法
What is actually happening?
实际上它的推荐页,您可以看到我挂载完成后就调用了一次数据,推荐页的文章数据时不时的出现,然后切换到别的分类下的时候是一片空白,查看dom变化,发现只要我再切换到另外一个分类,之前的分类对应文章数据就会被渲染到dom里面去。
Hướng dẫn đóng góp
Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này
Đánh giá
Issue này chưa được đánh giá.