微信小程序,基于uni-app的轮播图制作,调用文件中图片
以便捷为目的,想使用文件中的图片制作轮播图
但网上找到的都是轮播图彼此分割,没有使用数组存储在一起,不便于管理,代码不美观简洁
作者使用文件中的图片,并使用数组制作轮播图的具体操作如下:(任一页面的.vue文件,完整简洁代码)
<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>