以便捷为目的,想使用文件中的图片制作轮播图
但网上找到的都是轮播图彼此分割,没有使用数组存储在一起,不便于管理,代码不美观简洁
作者使用文件中的图片,并使用数组制作轮播图的具体操作如下:(任一页面的.vue文件,完整简洁代码)
bash
<template>
<swiper>
<swiper-item v-for = "item in picture" :key="item.id">
<view>
<image :src = "item.img"></image>
</view>
</swiper-item>
</swiper>
</template>
<script>
export default {
data() {
return {
title: 'Hello uni',
//轮播图数据
picture : [
{ id: '1', img: "/static/tabs/home_default.png"},
{ id: '2', img: "/static/tabs/home_selected.png"}
]
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>