uni-app框架种使用swiper 怎么动态赋值
时间: 2023-12-22 18:05:46 浏览: 56
在 uni-app 中使用 Swiper 进行动态赋值,可以通过以下步骤实现:
1. 在页面中引入 Swiper 组件,并定义数据源:
```html
<swiper :indicator-dots="true" :autoplay="true" :interval="5000" :duration="1000">
<swiper-item v-for="(item, index) in swiperList" :key="index">
<image :src="item.imageUrl" mode="aspectFill" />
</swiper-item>
</swiper>
```
在上述代码中,我们通过 `v-for` 指令循环遍历数据源 `swiperList`,并使用 `swiper-item` 组件渲染 swiper slides,其中 `item.imageUrl` 表示数据源中每个元素的图片地址。
2. 在 JavaScript 中动态赋值数据源:
```javascript
export default {
data() {
return {
swiperList: [], // 数据源
};
},
onLoad() {
// 动态获取数据源,假设为数组形式
const newData = [
{
imageUrl: 'https://xxx.com/banner1.jpg',
},
{
imageUrl: 'https://xxx.com/banner2.jpg',
},
{
imageUrl: 'https://xxx.com/banner3.jpg',
},
];
// 更新数据源
this.swiperList = newData;
},
};
```
在上述代码中,我们在页面的 `onLoad` 生命周期钩子函数中动态获取数据源,并将其赋值给页面的 `swiperList` 数据属性,这样 Swiper 组件就会自动渲染新的 swiper slides。
需要注意的是,在 uni-app 中使用 Swiper 组件时,需要在 `swiper-item` 中包裹一个具有固定高度的容器,例如:
```html
<swiper-item v-for="(item, index) in swiperList" :key="index">
<view style="height: 200rpx;">
<image :src="item.imageUrl" mode="aspectFill" style="height: 100%;" />
</view>
</swiper-item>
```
这是因为 uni-app 中 Swiper 组件的高度是自适应的,需要一个固定高度的容器来撑开 Swiper 组件。