airyland / airyland/vux

swiper组件内容不会立刻展示

Đang mở
#2,775 4 bình luận 0 reaction 0 người được giao Xem trên GitHub
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á.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.